scss 정리 (css 전처리기)

 

변수

- 중괄호 안에서 선언 되었으면 내부에서만 사용 가능

- 중괄호 안에서 선언 되었어도 전역변수로 설정 시 !global 속성 추가

// 변수 선언
$변수이름: blue;

// 사용 시
.text {
  color: $변수이름;
}

.box1 {
  $color: #111 !global; // 내부에서 선언 했지만 전역변수
  background: $color;
}
.box2 {
  background: $color; // 전역변수기에 에러 안남
}

 

 

 

부모 선택자 (&)

// & 사용하여 부모 선택
.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

// 컴파일 시
.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

 

 

 

중첩 벗어나기(@at-root)

.list {
  $w: 100px; // 내부에서 변수 만들면 내부에서만 사용 가능
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

// 컴파일 시
.list li {
  width: 100px;
  height: 50px;
}
.box { // 부모를 선택하지 않고 자기 자신만 선택됨
  width: 100px;
  height: 50px;
}

 

 

 

중첩된 속성 사용시

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

// 컴파일 시
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

 

 

 

초기값 설정(!default)

$color-primary: red;
.box {
  $color-primary: blue !default; // 변수 선언=할당된 변수가 없으면 blue 사용. 있으면 있는 값(red) 사용
  background: $color-primary;
}

 

 

문자 보간(#{})

- 자바스크립트의 템플릿 리터럴과 비슷

- 문자열 사이에 변수가 필요할 때 사용

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

// 컴파일 시
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

 

 

 

@extend 문법

.class {
  color: blue;
}
.btn {
  @extend .class; // .class에 있는 스타일을 모두 가져온다
}

// 컴파일 시
.class {color: blue;}
.btn {color: blue;}

 

 

 

임시 클래스(%)

- 컴파일 되었을 때 임시 클래스는 컴파일 되지 않음

%btn {background-color: orange;} 
.background {
  @extend %btn; // 임시클래스 %btn에 있는 스타일 복사
}

// 컴파일 시(%btn은 컴파일 되지 않음)
.background {background-color: orange;}

 

 

 

@mixin 문법

- 여러 코드를 하나에 담아 함수처럼 사용

- 파라미터를 받을 수 있다(여러개 가능)

- style이름에 파라미터 사용 시 문자 보간 #{} 사용

// mixin 함수 선언
@mixin 함수1($파라미터) {
  padding: $파라미터;
}

// mixin 함수 사용 시
.box {
  @include 함수1(10px);
}

// 파라미터 여러개 사용하는 함수 선언
@mixin 함수2($파라미터1, $파라미터2){
  background: red;
  font-size: $파라미터1;
  #{$파라미터2}: white; // 왼쪽 자리에도 파라미터 가능(문자보간 사용)
}

// 파라미터 여러개 사용하는 함수 사용 시
.box2 {
  @include 함수2(14px, color);
}

 

 

 

@use 문법

- @import와 같은 방식으로 다른 파일을 가져오고 싶을 때

- @use '파일이름'; => 확장자는 안써도 가능

- 다른 파일에 있는 변수 사용 시 앞에 파일명 붙여주기 => 파일이름.$변수

 

 

 

 

scss파일을 css로 변환하지 않게 하고 싶으면 파일이름 작명 시 앞에 언더바(_) 붙여주기