프로그래머로부터 배우는 코딩의 기술

코스 전체목록

닫기

소개

SASS의 등장배경

CSS는 HTML을 디자인하는 언어다. 엘리먼트(태그)를 선택하고, 선택된 태그를 꾸며주는 단순한 원리를 가지고 있다. 이런 단순성은 CSS의 미덕이지만, 규모가 조금만 커져도 CSS 유지보수하는 것은 어렵거나 불가능한 일이 된다. 자바스크립트와 같은 동적인 언어는 변수나 함수를 이용해서 코드의 재활용성을 높이고 코드의 양을 줄여주는데 반해서 CSS는 효율이 떨어진다.

SASS란?

위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다.

SASS 홈페이지

http://sass-lang.com/

예제

아래의 .sass 파일을 변환하면 CSS가 만들어진다.

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}
/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

참고

댓글

댓글 본문
  1. jeisyoon
    2021.09.30 소개 - OK
  2. htmlhm
    이 웹페이지 다 뭐야...
    대화보기
    • 류11
      출석~
    • 버들부들이
      도움이 많이 됐습니다. 감사합니다..
    • fasdgoc
      감사합니다..ㄷㄷㄷㄷ
    • 아하 sass를 여기서 첨들었는데 더 효율적이군요!
    • DHKim
      감사합니다. 아주 잘 보았습니다.

      뒷부분까지 보았는데 요점들이 잘 되어서 이해가 잘 되었습니다.
    • Ji Young Yoon
      잘보았습니다. 감사합니다. ^-^b
      CSS밖에 몰랐었는데 역시 생활코딩!!!!
      좋은 내용이네요~~!!
    • 조중현
      감사합니다
    • 스마트
      좋은 정보 감사합니다.
    • 케이짱
      좋은 정보 감사합니다, 많은 도움 받고 갑니다~
    • 냐옹이
      less의 일부 logic state에 에러가 있다는걸 생각해보면 sass로 가야겠죠.
    • fksak80
      예 만들수 있습니다.
    • openkwang
      좋은 기술이네요!

      반대로 CSS를 SASS로 만들 수 있을까요?
    • egoing
      고맙습니다. 수정했습니다.
      대화보기
      • appster
        위에서 언급한 CSS의 단점을 보안하기 위한 기술로,--> 보완하기 위한 기술로,
        좋은 글 감사해요.
      • synthresin
        정식명칙이 sass 랍니다.. Syntactically Awesome Stylesheets
        대화보기
        • Tw Shim
          횽! 저건 sass가아니라 scss 인데요.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기