SASS

SASS

문법

이 문서에 대해서

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

중첩(Nesting)

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

?
1
2
3
4
5
6
7
8
9
10
11
/* style.scss */
#navbar {
width: 80%;
height: 23px;
ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* style.css */
#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar li a {
font-weight: bold;
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* style.scss */
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
?
1
2
3
4
5
6
7
8
/* 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의 경우는 특수기호 '&'를 이용해서 부모 엘리먼트를 참조할 수 있다.

?
1
2
3
4
5
6
7
/* style.scss */
a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}
?
1
2
3
4
5
6
7
8
/* style.css */
a {
color: #ce4dd6; }
a:hover {
color: #ffb3ff; }
a:visited {
color: #c458cb; }

변수(Variables)

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* style.scss */
$main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}
a {
color: $main-color;
&:hover { border-bottom: $style 1px; }
}
?
1
2
3
4
5
6
7
8
9
10
/* style.css */
#navbar {
border-bottom-color: #ce4dd6;
border-bottom-style: solid; }
a {
color: #ce4dd6; }
a:hover {
border-bottom: solid 1px; }

연산자와 함수(Operations and Functions)

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 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%);
}
}
}
?
1
2
3
4
5
6
7
8
9
10
11
/* 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

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

?
1
2
3
4
5
6
7
8
9
10
/* style.scss */
$side: top;
$radius: 10px;
.rounded-top {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
?
1
2
3
4
5
6
/* style.css */
.rounded-top {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }

Mixins

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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; }
?
1
2
3
4
5
6
7
8
9
10
11
/* 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 안에서만 사용되는 지역변수를 의미한다. 인자는 기본 값을 가질 수 있다.

?
1
2
3
4
5
6
7
8
9
10
11
/* 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); }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 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'를 사용한다.

?
1
2
3
4
5
6
7
/* _rounded.scss */
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
?
1
2
3
4
5
6
7
/* style.scss */
@import "rounded";
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 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를 열어서 하나씩 고치는 작업자와 요놈을 이용해서 고치는 작업자의 시간 차이는 엄청날듯합니다. 강의 감사합니다^^
      답글 수정 삭제
    버전 관리
    egoing
    현재 버전
    선택 버전
    공동공부
    graphittie 자세히 보기