0102 TIL 주말 자습

SASS

css 전처리기 Less,Sass(SCSS),Stylus가 대표적이다.
다른 개발자들이 내가 작성한 css를 더 쉽게 이해할수 있게, css로 구현 불가능한 변수를 사용하기 위해서, 반복작업을 줄이기 위해서 css전처리기를 이용했다.
Sass 프레임 워크를 사용하기로 했다.
SASS는 css와 거의 같은 문법으로 Sass기능을 지원한다.

devzine팀의 github를 참고해보니 styles폴더를 만들고 main.scss 파일에서

@import './constants/breakpoints';
@import './constants/grids';

@import './base/fonts';
@import './base/normalize';

@import './mixins/positions';
@import './mixins/flexbox';

@import './modules/forms';

@import '../components/Common/Button/Button';

이런식으로 import를 먼저 한 후에 다른 scss파일을 만드는 것을 확인했다.
(shift .을 누르면 브라우저에서도 vs코드를 볼수있다)
css module을 썼을 때는 js파일에 어쩌구.module.css 파일을 일일히 import먼저 하고 시작했는데 main.scss에 전부 import해주는게 좋은 방법인 것같다.

Sass는 중첩 기능을 사용할 수 있고 변수에 유효범위가 있다. 이 점이 js같아서 신기했다.

 // 일반 CSS 코드
label {

      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;
}

label:hover {
      color: white;
      background-color: $color8;
} 

 // 같은 작업 SCSS 코드
label {

      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;

      &:hover {
        color: white;
        background-color: $color;
      }
}

변수 명은 $로 시작한다.

$site_max_width: 960px;
$font_color: #333;
$link_color: #00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);

body {
  color: $font_color;

  // Property Nesting
  font: {
    size: $font_size;
    family: $font_family;
  }

  line-height: $line_height;
}

#main {
  width: 100%;
  max-width: $site_max_width;
}

@use로 다른 scss파일의 변수를 가져와서 이용할 수 있다.
파일 이름이 _base.scss 이렇게 쓰여있을 때 사용할 수 있다.

@mixin으로 반복작업을 줄일 수 있다.

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

@extend를 이용해서 다른 selector끼리 같은 css속성을 사용할 수 있다.

참고

SASS 공식홈페이지
SASS 1
SASS 2