CSS | SCSS

🤔 SCSS, 그게 뭔데?

CSS의 단점 |
CSS 는 HTML 태그에 디자인을 넣어줄 때 사용합니다. 하지만 프로젝트 규모가 커지면 커질수록 가독성이 떨어진다거나 유지보수가 어려워지는 일이 발생하게 됩니다.

이러한 CSS의 단점을 보완하여 코드의 재활용성과 효율성을 높이기 위해 나온 개념이 SCSS라고 합니다.

---

Variables(변수)

변수를 지정해놓고 사용하기 때문에 오차 범위를 줄여주며, 디자인 컨셉이 변경되거나 변경사항이 생겼을때도 유지보수가 간편합니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

CSS 확인하기

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

Nesting(중첩)

CSS에서는 nav ul / mav li / nav a 이렇게 태그별로 나눠서 작업을 해줬다면, SCSS는 중첩기능이 가능하여 코드의 가독성이 좋아집니다.

nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
}

CSS 확인하기

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

Modules(모듈)

한 파일에 모든 SCSS를 작성하지 않고 다른 SCSS 파일을 모듈로 로드할 수 있습니다.

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
    background-color: base.$primary-color;
    color: white;
}

CSS 확인하기

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

.inverse {
    background-color: #333;
    color: white;
}

Mixins(재활용)

@mixin 지시문을 만들어 재사용하려는 CSS끼리 묶어 그룹을 만들어줍니다.
@mixin theme($theme: 믹스인 이름) {}
"@include 믹스인이름" 으로 사용할 수 있습니다.

@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);
}

// styles.scss
@use 'base';

.inverse {
    background-color: base.$primary-color;
    color: white;
}

CSS 확인하기

.info {
    background: DarkGray;
    box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
    color: #fff;
}

.alert {
    background: DarkRed;
    box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
    color: #fff;
}

.success {
    background: DarkGreen;
    box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
    color: #fff;
}

Operators(연산자)

SCSS의 연산은 픽셀 값을 직접 입력하지 않고 백분률로 변환하는 등 작업해 줄 수 있습니다.

@use "sass:math";

.container {
    display: flex;
}

article[role="main"] {
    width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
    width: math.div(300px, 960px) * 100%;
    margin-left: auto;
}

CSS 확인하기

.container {
    display: flex;
}

    article[role="main"] {
    width: 62.5%;
}

    aside[role="complementary"] {
    width: 31.25%;
    margin-left: auto;
}