[Sass] - 중첩과 변수

이 글은 패스트캠퍼스 오늘 복습으로 [프론트엔드 개발 올인원 패키지 with React Online] 강의와 HEROPY 블로그의 Sass(SCSS)완전 정복!을 보고 정리한 글입니다.

02. 문법

03. 중첩

일반적으로 CSS를 작성할 시 자식 클래스에 속성을 주기 위해 부모 클래스의 요소까지 앞에 써주는 경우가 있다.

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

그러나 Sass에서는 중첩 기능을 사용할 수 있고, 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할수 있다.

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

04. 중첩 - 상위 선택자 참조

.btn {
    .btn.active {
        color: red;
    }
}


.btn {
    width: 100px;
    height: 100px;
    &.active {
        color: red;
    }
}

.fs {
    &-small {
        font-size: 14px;
    }
    &-medium {
        font-size: 16px;
    }
    &-large {
        font-size: 18px;
    }
}

.btn 안에 .btn.active로 코드를 짜게 되면 버튼안의 버튼 액티브 클래스에 적용이 되므로 이를 피하기 위해 상위 선택자를 참조하는 &기호를 사용!
또한 font-size와 관련한 클래스에서 fs를 상위선택자로 선택하고 -small, -medium, -large의 각 크기마다 폰트 사이즈를 다르게 줄 때 편하게 사용할 수 있다.

css로 컴파일 시

/* 이 부분 때문에 상위 선택자 사용! */
.btn .btn.active {
  color: red;
}

.btn {
  width: 100px;
  height: 100px;
}

.btn.active {
  color: red;
}

.fs-small {
  font-size: 14px;
}

.fs-medium {
  font-size: 16px;
}

.fs-large {
  font-size: 18px;
}

05. 중첩 - 중첩 벗어나기

.section {
    $width: 100px;
    $height: 200px;
    width: $width;
    height: $height;
    .item {
        width: $width;
        height: $height;
    }
    @at-root .box {
    width: $width;
    height: $height;
    }
}

변수를 사용하기 위해(특정 변수는 범위 밖에서 사용불가능) .section이라는 영역 안에서 선언을 하였을 시, .section 클래스 안의 요소가 아닌 .section밖의 요소로 선택을 하고 싶을 때, @at-root 를 사용하여 중첩에서 벗어날 수 있음

css 컴파일 결과

.section {
  width: 100px;
  height: 200px;
}

.section .item {
  width: 100px;
  height: 200px;
}

.box {
  width: 100px;
  height: 200px;
}

06. 중첩 - 중첩된 속성 정의

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

css 개별 속성들을 정의할 때 중괄호를 사용하여 한 곳에 묶어서 - 없이 속성을 정의 해주면, 컴파일 시 자동으로 개별속성으로 바꾸어 줌

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

07. 변수

다른 언어와 마찬가지로 반복적으로 사용되는 값을 변수로 저장해두었다가 사용할 수 있음.
변수 이름 앞에는 $을 붙이면 된다.

$변수이름: 속성값;

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

08. 변수 - 유효범위, 재할당

변수는 선언된 블록{}내에서만 유효범위를 가진다.

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

변수에 변수를 재할당할 수 있다.

$red: #FF0000;
$blue: #0000FF;

$color-primary: $blue;
$color-danger: $red;

.box {
  color: $color-primary;
  background: $color-danger;
}

09. 변수 - 전역 설정

!global 을 사용하여 변수의 유효범위를 전역으로 설정할 수 있다.

.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}

css로 컴파일

.box1 {
  background: #111;
}
.box2 {
  background: #111;
}

기존에 사용하던 같은 이름의 변수가 있느면 나중에 선언된 값으로 덮어져 사용될수도 있다.

$color: #000;
.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}
.box3 {
  $color: #222;
  background: $color;
}

css로 컴파일

.box1 {
  background: #111;
}
.box2 {
  background: #111;
}
.box3 {
  background: #222;
}