SASS[SCSS] 설치 및 활용

1. Sass(syntactically awesome stylesheets, 사스)

: Sass는종속형 시트(CSS)로해석및컴파일되는스크립트 언어입니다. (설치방법)

 

 

2. sass vs scss 차이 : {}(중괄호)와 ;(세미콜론)의 유무

 

SCSS 스타일: - SCSS의 문법이 css의 문법과 비슷하여 가독성이 좋음

 

$color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $color;
  color: darken($color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $color;
}

 

 

SASS 스타일:

 

$color: #3bbfce
$margin: 16px

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

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

 

 

3. SASS 문법

1) 재활용(Mixins) : 재사용 할 CSS 선언 그룹

- 선언하기(@mixin)

- 포함하기(@include) 

 

 

See the Pen Utility Color Classes - SASS Mixin by Amy (@amydepalma) on CodePen.

 

 

 

 

2) 확장(Extend)/상속(Inheritance) : 정의한 셀렉터의 스타일을 상속 

 

See the Pen Scss extend by Anup (@anupmehta702) on CodePen.

 

 

 

 

추가로 참고 사이트 : css-tricks.com/how-to-write-loops-with-preprocessors/