[SASS] SASS 기초 공부

Sass(syntactically awesome stylesheets) 는 CSS로 해석 및 컴파일되는 스크립트 언어이다.

 

SASS 변수 정의

변수는 $ 로 시작하며 4가지 자료형을 지원한다.

- 수(단위 포함)

- 문자열(인용 부호가 있거나 없이)

- 컬러 (하나 이상의 이름)

- 불리언

 

변수는 매개변수로 사용하거나 결과물이 될 수 있다.

예시

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

루프

Sass는 @for, @each, @while를 사용하여 변수에 대한 루프를 지원하며, 비슷한 클래스나 id를 가진 요소들에 각기 다른 스타일을 적용하기 위해 사용할 수 있다.

예시

$squareCount: 3
@for $i from 1 through $squareCount
  #square-#{$i}
   background-color: red
   width: 50px * $i
   height: 120px / $i

참고

ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)