[SCSS] SCSS은 무엇인가? 공부한 것 개념 정리

CSS는 생각보다 배우기가 쉽다.  하지만 작업이 많아질수록 불편함이 커지게 된다. HTML마크업이 제대로 되어있지 않다면 더욱 큰 문제가 발생한다.

그래서 우리에게 필요한 것은 SCSS 이다.

---

Sass(SCSS)란 무엇인가?

Sass란 Syntactically Awesome Style Sheets의 약자로, CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다.

Sass와 SCSS의 차이는 어떻게 표기되는지 알아보자!

[Sass 예시]

     .sass
        height: 100px
        ui
           color: blue

[SCSS 예시]

 .scss {
        height: 100px;
        ui {
           color: blue;
        }
     }

Sass 와 SCSS의 차이점은 Sass는{}(중괄호)와;(세미콜론)을 사용하지 않지만, SCSS는 CSS와 비슷한 문법으로 {}(중괄호)와;(세미콜론)을 그대로 사용한다. Sass는 유효범위를 '들여쓰기'로 구분하고, SCSS는 {}로 범위를 구분을 한다.

---

SCSS의 특징으로 무엇이 있는가?

첫번째

Variables : 변수를 지정을 할 수가 있음. 예를 들어 색깔을 변수의 저장을 할 수 있음.

예시

$bg : #c53b31 -> $bg에 저장.

이것처럼 $bg에 #c53b31에 색깔을 저장해서 사용이 가능하다.

 

두번째

Nesting(둥지) : 부모 내 자식 요소들의 CSS를 굳이 class를 주지 않아도 됨.

.box {
  margin-top: 20px;
  h2 {
    color: blue
  }
  button {
    color: red;
  }
  &:hover{
    background-color: green;
  }
}

* 활동적인 CSS를 넣고 싶을때 (hover, active) &:를 붙여준다.
이런식으로 작성이 가능해짐.

원래 같으면 .box 클래스 안에 있는 자식요소 h2 나  button 같은 것들을 .box 가로 밖에다가 따로 class 줘서
작성을 해야하지만 SCSS를 사용하게되면 그 안에 h2 { ... } 이런식으로 쉽게 작성이 가능해진다.

 

세번째

- mixins : scss functionality를 재사용할 수 있도록 해줌. 어떤 종류의 argument를 mixin에다가 보내야 할 때 사용.

예시

link 안에 $color 변수 생성
//mixins.css 
@mixin link($color) {
    text-decoration: none;
    display: block;
    color: $color;
}

거기 안에 blue 와 red 넣어서 색상 변경.
//styles.scss

@import "_mixins";
a {
  margin-top: 10px;
  &:nth-child(odd) {
    @include link(blue);
  }
  
  &:nth-child(even){
    @include link(red);
  }
}

이런식으로 사용 가능. 혹은,

문자열을 이용.
//styles.scss

@import "_mixins";

a {
  margin-top: 10px;
  &:nth-child(odd) {
    @include link("odd");
  }
  
  &:nth-child(even){
    @include link("even");
  }
}

//_mixins.scss
@mixin link($word) {
    text-decoration: none;
    display: block;
    @if $word == "even" {
        color: blue;
    } @else {
        color: red;
    }
}

이렇게 사용이 가능하다.

* @content 문은  mixin 안에 @content를 사용하여 styles.scss 에서 추가적인
css 작업을 추가 할 때 사용.

 

이렇게 SCSS의 강한 장점들이 있기 때문에 현재 SCSS를 많이 사용하는 것 같다.