[데브코스] TIL-117 SCSS

Sass(SCSS)란?

  CSS 전처리 도구(Preprocessor)이다. SCSS는 중괄호와 세미콜론이 사용되고, Sass는 중괄호와 세미콜론이 사용되지 않는다. 이것이 가장 큰 차이점이다. SCSS에서는 CSS에서 사용하는 문법 그대로 사용해도 호환되기 때문에, Sass보다는 SCSS를 사용하는 것을 적극 권장한다.

 

SassMeister | The Sass Playground!

SassMeister | The Sass Playground!

SCSS를 CSS로 컴파일해주는 사이트

1. 중첩기능

SCSS

.container {
  display: flex;
  .item {
    flex-grow: 1;
    > span {
      color: red;
      &:hover {
        color: blue;
      }
    }
  }
}

• &: 상위 선택자를 참조하는 기능

위의 SCSS를 CSS로 컴파일하면 아래와 같다.

 

CSS

.container {
  display: flex;
}
.container .item {
  flex-grow: 1;
}
.container .item > span {
  color: red;
}
.container .item > span:hover {
  color: blue;
}

2. @at-root

  선택자를 .container .item .box에서 .box로 작성하고 싶을 때 @at-root를 붙여주면 된다.

 

SCSS

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

CSS

.container .item {
  width: 100px;
  height: 100px;
  margin: 100px;
}
.box {
  width: 200px;
}

반복되는 속성들을 아래와 같이 묶어서 작성할 수 있다.

 

SCSS

.container {
  display: flex;
  .item {
    flex: {
      grow: 1;
      shrink: 0;
      basis: auto;
    }
  }
}

CSS

.container {
  display: flex;
}
.container .item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

쉼표로 다중 선택자를 표현하는 것도 가능하다.

 

SCSS

ul, ol {
    li, span {
        width: 100px;
        color: red;
    }
}

CSS

ul li, ul span, ol li, ol span {
  width: 100px;
  color: red;
}

 

3. 변수

  $를 변수명 앞에 작성하여 변수를 선언할 수 있다. 재사용, 재할당이 가능하다. 변수는 유효 범위를 가진다. 특정 중괄호 범위 안에서 선언한다면 해당 중괄호 내에서만 사용할 수 있다. 유효 범위를 변경해주는 flag인 !global이 있다. 변수를 전역에서 사용할 수 있게 해준다. !default는 같은 이름의 변수가 있고, 이미 값이 지정되어 있다면 기존 값을 사용한다는 flag이다.

 

SCSS

$primary: blue;

.container {
  $primary: orange !default;
  background-color: $primary;
}

CSS

.container {
  background-color: blue;
}

 

4. 보간

  자바스크립트에서 Hello ${dataName} 처럼 사용하는 보간은 SCSS에서도 사용이 가능하다. 여기서는 ${}가 아닌 #{}를 사용하여 보간처리를 할 수 있다.

 

5. 데이터 타입

• Numbers: 숫자 데이터 타입으로, 단위 포함 여부와 관계없이 모두 숫자 데이터로 볼 수 있다.
  • $numbers: 2fr;
• Strings: 문자 데이터 타입으로, 따옴표 묶임 여부와 예약어와 관계 없이 모두 문자 데이터로 볼 수 있다.
  • $string: 'assets/images/';
• Colors: 색상 데이터 타입으로, 색상의 이름이나 rgb, Hexadecimal 색상들이 잉포함된다.
  • $color: #ffff00;
• Booleans: true 또는 false 값을 가지는 데이터 타입이다.
• Null: 아무런 값도 의미하지 않는 데이터
  • 특정 속성의 값으로 사용되면 CSS로 컴파일되지 않는다.
• Lists: 배열 데이터 타입으로, 소괄호를 사용하며 생략 가능하고, 쉼표로 값을 구분하나 이도 생략이 가능하다.
  • $list: 10px 20px 30px;
• Maps: 객체 데이터 타입으로, 소괄호를 사용하며 생략 불가능하고, key: value 형태로 값을 넣을 수 있다.
  • $map: ( a: apple, b: banana );

 

6. 산술 연산자

  연산 시 같은 단위가 아닌 경우의 연산을 하고 싶을 때 calc() 함수를 사용하면 된다. 단축 속성에서 슬래시 기호를 사용하는데 이 기호가 나누기 연산자와 같기 때문에 나누기가 되지 않는다. 해결 방법은 아래와 같다.

1. 소괄호로 묶기
   • width: (20px / 2)
2. 변수를 사용하기
   • width: $size / 2
3. 다른 연산자와 함께 사용하기
   • width: 20px / 2 + 1px

 

7. 비교 연산자, 논리 연산자

  조건문에서 비교/논리 연산자를 사용한다. 우리가 아는 기본적인 연산자를 사용하면 된다.

 

 

오늘을 마무리 하며

 

  오늘은 CSS의 전처리도구인 SCSS에 대해서 공부했다. 뭔가 완벽히 처음 접하는 내용을 공부하다보니 처음에는 조금 겁을 먹었던 것 같아 어렵게 느껴졌던 것 같다. 하지만 다시 복습하면서 생각해보니 어떤 의도로 등장한 개념인지 알 수 있었다. 그렇다고 SCSS를 자유자재로 사용할 수 있다 이런 의미라기 보다는 그냥 CSS을 문법적으로 보조하는 느낌으로 받아들일 수 있었다. 우선 가장 피부로 와닿았던 개념은 중첩기능이다. CSS를 처음 공부할 때부터 느꼈던 이상한 이질감이 있었는데 바로 이 문제였다. 하나 하나 요소들을 선택해서 원하는 CSS를 적용해주어야 하는데 선택자로 전부 선택하는 것이 굉장히 번거로운 작업이라고 느꼈었다. 하지만 SCSS 문법을 사용하게 되면 부모부터 자식요소들까지 전부 중괄호로 묶어 표현할 수 있고, 이를 통해 어떤 요소가 어떤 위치에 있는지 직관적으로 확인할 수 있었다. 이 점이 가장 편리한 점이라고 느껴졌다.