2021/06/23- SCSS

SCSS 란?

CSS 전(예비)처리기

CSS Preprocessor 라고 부릅니다.

 

주석

// 컴파일되지 않는 주석

/* 컴파일되는 주석 */

 

중첩

//SCSS
.section {
  width: 80%;
  .list {
    margin: 10px;
    li {
      text-align: left;
    }
  }
}

이것을 컴파일 하면

//CSS
.section {
  width: 80%;
}
.section .list {
  margin: 10px;
}
.section .list li {
  text-align: left;
}

 

상위 선택자 참조

중첩안에서 & 를 이용하면 상위 선택자를 참조하여 치환해줍니다.

 

//SCSS
.main {
  &.active {
    opacity: 1;
  }
}

//CSS
.main.active {
    opacity: 1;
}

이런식으로 & 이 상위 선택자로 치환이 됩니다.

//SCSS
.box {
  &-small { width: 50px; }
  &-big { width: 100px; }
}

//CSS
.box-small {
  width:50px
}
.box-big {
  width:100px
}

 

변수

변수는 $ 를 앞에 붙여 지정해줍니다.

//SCSS
$color: red;
$h:120px;

.main {
  height: $h;
  color: $color;
}

 

변수는 블록내에서 선언하여 사용가능한 유효범위를 제한시킬 수 있습니다.

//SCSS
.box1 {
  $color: #111;
  background: $color;
}

// Error
.box2 {
  background: $color;
}

 

변수의 전역설정을 위해서는 !global 플래그를 사용할 수도 있습니다.

//SCSS
.box1 {
  $color: #fff !global;
  background: $color;
}
.box2 {
  background: $color;
}

 

재활용(Mixins)

선언하기(@mixin)와 포함하기(@include)

 

@mixin 을 이용하여 스타일을 정의합니다.

//SCSS
@mixin big-box {
  width:100px;
  font-size: 30px;
  font-weight: bold;
  color: red;
}

@include 를 사용하여 선언된 mixin 을 사용합니다.

//SCSS
.large-box {
  @include big-box;
}

Mixin은 함수처럼 인수를 가질 수 있고, 기본값도 설정할 수 있습니다.

//SCSS
@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}

.box1 { @include dash-line; }
.box2 { @include dash-line(4px); }