[SASS - 문법]

테크야끼·2021년 5월 18일
0

CSS

목록 보기
6/9
post-thumbnail

SASS

SASS(Syntactically Awesome StyleSheets)는 CSS 전처리기(pre-processor)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

SASS의 장점

  • 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
  • CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 높인다.

1. 중첩(Nesting)

셀렉터를 중복해서 사용해야 하는 경우 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; }

2. 부모요소 참조 (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; }

3. 변수(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; }

4. 연산자와 함수(Operations and Functions)

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

  • 연산자 : +, -, *, /, %
  • 함수 : lightness, hue, saturation, 기타
/* 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; }

5. Interpolation

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; }

6. Mixin

  • 선택자와 속성을 재활용할 수 있도록 해주는 방법이다. 선언할 때는 @mixin으로 시작하고, 호출할 때는 @include을 사용한다.
  • JavaScript의 함수의 작은 버전이라고 할 수 있다.
/* 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; }

7. 인자 (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; }

8. 불러오기 (@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;
}

rounded.scss 불러오기

@import "rounded";
 
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

[참고]
https://opentutorials.org/module/237/2490
https://sass-lang.com/guide

0개의 댓글