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

문법

토픽 프로그래머로부터 배우는 코딩의 기술 > Sass / SCSS

이 문서에 대해서

이 문서는 Sass의 공식 메뉴얼(http://sass-lang.com/tutorial.html)을 의역한 것으로, 더 많은 정보는 Sass 레퍼런스(http://sass-lang.com/docs.html)를 통해서 찾을 수 있다.

중첩(Nesting)

CSS의 특성으로 인해서 셀렉터를 중복해서 사용해야 하는 경우가 많은데 Sass의 Nesting을 이용하면 코드의 양을 줄이고 연관된 코드끼리 그룹핑할 수 있다.

/* style.scss */
#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}
/* style.css */

#navbar {
  width: 80%;
  height: 23px; 
}
#navbar ul {
    list-style-type: none; 
}
#navbar li {
    float: left; 
}
#navbar li a {
    font-weight: bold; 
}

셀렉터 뿐만 아니라 이름의 중복도 줄일 수 있다.

/* style.scss */

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
/* style.css */

.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; }

부모 엘리먼트를 참조(Parent References)

(마우스가 엘리먼트 위로 올라왔을 때를 의미하는) :hover와 같은 pseudoclasses의 경우는 특수기호 '&'를 이용해서 부모 엘리먼트를 참조할 수 있다.

/* style.scss */

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}
/* style.css */

a {
  color: #ce4dd6; }
  a:hover {
    color: #ffb3ff; }
  a:visited {
    color: #c458cb; }

변수(Variables)

CSS내에서 변수를 사용할 수 있다. 변수이름은 '$'로 시작해야 하고, 변수의 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 칼러(#ce4dd6)가 있다. 변수를 이용하면 크기나 색상과 같은 값을 일괄적으로 변경할 수 있다.

/* style.scss */

$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}
/* style.css */

#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid; }

a {
  color: #ce4dd6; }
  a:hover {
    border-bottom: solid 1px; }

연산자와 함수(Operations and Functions)

연산자와 함수를 이용해서 엘리먼트의 크기나 좌표 또는 색상을 동적으로 변경할 수 있다.

/* style.scss */

#navbar {
  $navbar-width: 800px;
  $items: 5;
  $navbar-color: #ce4dd6;

  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;

  li {
    float: left;
    width: $navbar-width/$items - 10px;

    background-color:
      lighten($navbar-color, 20%);
    &:hover {
      background-color:
        lighten($navbar-color, 10%);
    }
  }
}
/* style.css */

#navbar {
  width: 800px;
  border-bottom: 2px solid #ce4dd6; }
  #navbar li {
    float: left;
    width: 150px;
    background-color: #e5a0e9; }
    #navbar li:hover {
      background-color: #d976e0; }

Interpolation

'#{}'를 사용해서 변수로 속성이나 선택자의 이름을 동적으로 치환할 수 있다.

/* style.scss */

$side: top;
$radius: 10px;

.rounded-top {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
/* style.css */

.rounded-top {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

Mixins

선택자와 속성을 재활용할 수 있도록 해주는 방법이다. 선언할 때는 '@mixin'으로 시작하고, 호출할 때는 '@include'을 사용한다.

/* style.scss */

@mixin rounded-top {
  $side: top;
  $radius: 10px;

  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded-top; }
#footer { @include rounded-top; }
/* style.css */

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

인자 (Arguments)

Mixin의 진정한 힘은 인자를 통해서 나타나는데, 인자는 Mixin 안에서만 사용되는 지역변수를 의미한다. 인자는 기본 값을 가질 수 있다.

/* style.scss */

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
/* style.css */

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 5px;
  -moz-border-radius-top: 5px;
  -webkit-border-top-radius: 5px; }

#sidebar {
  border-left-radius: 8px;
  -moz-border-radius-left: 8px;
  -webkit-border-left-radius: 8px; }

불러오기 (@import)

CSS는 @import 명령을 지원하는데, 이 명령은 다른 CSS를 불러오는 것이다. 이것은 별도의 파일을 네트워크를 통해서 로딩하는 것인데, 네트워크 커넥션은 느리고 비싼 행위다. Sass에서 import는 그 파일의 내용을 실제로 가져와서 파일에 통합하다.

Sass는 import를 위한 이름규칙이 있다. 불러지는 파일은 partials라고 불리고, 이 파일은 '_'로 이름이 시작된다. 예를들면 _rounded.scss 와 같은 식이다. 이 파일을 불러올 때 Sass에서는 @import 'rounded'를 사용한다.

/* _rounded.scss */

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
/* style.scss */

@import "rounded";

#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
/* style.css */

#navbar li {
  border-top-radius: 10px;
  -moz-border-radius-top: 10px;
  -webkit-border-top-radius: 10px; }

#footer {
  border-top-radius: 5px;
  -moz-border-radius-top: 5px;
  -webkit-border-top-radius: 5px; }

#sidebar {
  border-left-radius: 8px;
  -moz-border-radius-left: 8px;
  -webkit-border-left-radius: 8px; }

댓글

댓글 본문
  1. hanjaelee
    2024-03-14 수강완료
    답글
  2. jeisyoon
    2021.09.30 - OK

    감사합니다 !!
    답글
  3. 제갈량
    SASS 좋아 보이기는 하네요.
    SASS를 활용하려면 문법을 알아야 써먹을 수 있을 거 같습니다.
    그 이전에는 엄두도 못낼거 같아요...
    잘 봤습니다.
    답글
  4. 최주원
    sass 필요한데 정리가 많은 도움되었습니다. 감사합니다!! ^^
    답글수정삭제
  5. 엄태성
    와 감사합니다!! 잘 정리되어있네요!!
    답글수정삭제
  6. 류11
    출석~
    예제중에
    border-top-radius: 10px; 라는 게 동작하는 건지 의문이 듭니다.
    http://www.w3schools.com......asp
    에 의하면,
    border-top-left-radius 또는,
    border-top-right-radius 로,
    먼저 위나 아래를 선택후 이어서 왼쪽 또는 오른쪽을 선택해야하고,
    아니면 border-radius: 10px 10px 0 0;
    등으로 작성해서 상단 왼쪽, 상단 오른쪽, 하단 왼쪽, 하단 오른쪽의
    수치를 입력해야 작동이 되는게 맞지 않나 싶습니다.
    답글수정삭제
  7. garam
    sass --watch style.scss:style.css
    대화보기
      답글수정삭제
    • 코드
      scss 문법을 cmd로 실시간으로 감시하면서 쓸 수 있던 걸로 기억하는데 사용법이 기억이 안나네요. 혹시 이부분도 업데이트를 해주실 수 있을까요?

      ps. 아시는 분께는 답변도 부탁드려봅니다.
      답글수정삭제
    • fasdgoc
      잘봤새우
      답글
    • Dri
      이부분은 강의만 듣고 실제로 만들때 다시 보고 적용해봐야겠습니다 ^^
      답글
    • SK Kim
      완료 도장 쾅!
      scss 내용을 수정하면 sass에서 에러(어쩌고 저쩌고...CP949 and UTF-8)가 나면서 css가 업데이트가 안되네요. 생선된 css와 map 확장자 파일 2개를 삭제하면 정상으로 동작합니다.
      뭔가 잘못하고 있는거 같은데...
      답글
    • 귀한시간
      좋은 강의 감사합니다 자주 들릴께요~!
      답글수정삭제
    • 유수경
      감사합니다. 머리에 쏙쏙 들어오네요!
      답글수정삭제
    • 이현아
      유용하게 싹 정리해놓으셨네요. 감사합니다~
      답글수정삭제
    • ♡.♡
      고맙습니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 덕분에 살았어요.
      답글수정삭제
    • Ji Young Yoon
      우왕~~ 너무 감사히 잘 보았습니다.
      유용한 강의예요!!! ^-^b
      답글
    • dlrlwjd1127@naver.com
      저같은겨우 큰프로젝트를 하느라 한 CSS파일에 1000줄 넘게 작성해서 불편을 겪었는데, SASS랑 less를 알게된후에, 편하게 미리 선언해서 불러올 수 있어서 정말 편한코딩을 할 수 있었어요 ㅎㅎ
      답글수정삭제
    • 아라한사
      그냥 막 css코딩하던 중.. 삽질을 느끼고 배워보려고 왔습니다.
      less와 sass의 차이를 고민하던중 외국인이 더 많이 사용한다는 sass를 일단 시작해보려합니다.

      역시 입문은 생코네요. 좋은 강좌 감사합니다 :)
      답글
    • 무른
      쫙 훝어보니 좋은 툴이 될 수 있을 것 같은데 일부 기능은 장기프로젝트나 코딩양이 엄청 많은게 아니면, CSS로 작성하는게 더 나을 수도 있겠다는 생각이 드네요ㅎ
      답글
    • 벨벨
      혹시 compass는 생활코딩에서 안다루시나요?
      compass를 좀 자세히 알고 싶은데 적당한 곳을 못찾고 있네요.

      책이나 사이트 카페등 추천 부탁 드립니다.
      답글수정삭제
    • Yonghun Lee
      오오~ 머찝니다. 아직 경험이 부족해서 100%활용을 못하겠지만 정말 유용할듯하네요^^: css를 열어서 하나씩 고치는 작업자와 요놈을 이용해서 고치는 작업자의 시간 차이는 엄청날듯합니다. 강의 감사합니다^^
      답글수정삭제