scss 자주 사용하는 문법 4개

변수(Variables)

$font-stack: Helvetica, sans-serif; // $로 변수 설정
$primary-color: #333; // $로 변수 설정

body {
  font: 100% $font-stack; // 변수 사용
  color: $primary-color; // 변수 사용
}

• '$변수명 : 값'으로 설정
• 사용하고자 하는 곳에서 '$변수명'을 입력하여 사용
  
  

중첩(Nesting)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

• 중첩기능을 사용하여 가독성을 훨씬 높일 수 있다.
  
  

함수(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);
}

• JavaScript의 함수처럼 만들어서 사용할 수 있다.
• '@mixin 함수명(인자){속성}'으로 선언하고
• '@include 함수명(파라미터)'로 함수와 같은 기능으로 사용하면 된다.
  
  

확장/상속(Extend/Inheritance)

// 예제 1)
.btn {
  width: 200px;
  height: 60px;
}

.login_btn {
  @extend .btn;
  color: aquablue;
}

.signUp_btn {
  @extend .btn;
  color: green;
}

// 예제 2)
%btn {
  width: 200px;
  height: 60px;
}

.login_btn {
  @extend %btn;
  color: aquablue;
}

.signUp_btn {
  @extend %btn;
  color: green;
}

// display 관련 속성은 확장되지 않는다.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

• @extend를 사용하여 예제 1처럼 다른 속성을 상속받아 사용할 수 있다.
• 하지만 불필요한 선택자를 피하고 싶을 때 예제 2와 같이 %를 사용하면 된다.
  
  

@mixin과 @extend는 언제 사용할까?

• 선택자간의 연관성이 존재한다면 extend
• 연관성은 없고 코드가 겹치는 선택자들이라면 mixin