SCSS

SCSS 란?

SCSS는 "Sassy CSS"의 약자로, CSS의 확장된 문법을 제공하는 CSS 전처리기(preprocessor)입니다. SCSS는 CSS의 기능을 확장하고 개발자가 스타일시트를 보다 효율적으로 작성할 수 있도록 도와줍니다.
즉, SCSS는 CSS 확장언어로 CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다.

SCSS 기본용법

1. Nesting 구조

SCSS의 중첩(nesting) 구조는 CSS 선택자를 부모-자식 관계로 구성하여 스타일 규칙을 더 직관적이고 구조화된 방식으로 작성할 수 있도록 합니다.

body {
   // 들여쓰기를 통해 body 태그 하위 .box 클래스 선택
  .box {
    width: 100%;
    background-color: white;
    color: white;
    // & 부모태그 선택(여기서는 .box)
    &:hover {
      background-color: black;
    }
  }
}

2. 변수 선언

$ 를 사용하여 변수를 선언한 후 값을 저장할 수 있습니다.
$변수명 : 값;

$primary-color: #333;
$favorite-color: #00498c;

div {
color: $primary-color;
background-color: $favorite-color;
}

3. SCSS 색관련 내장함수

/*
  darken : 어둡게
  lighten : 밝게
  saturate : 더 선명하게(높은 채도)
  desaturate : 더 흐리게(낮은 채도)
  adjust-hue : 명도 변경
  rgba : alpha값 변경
*/

// 7개의 div 태그가 있다고 가정해보자

$color: #d2e1dd;

body {
  div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: $color;
    display: inline-block;
    margin: 10px;
    text-align: center;
    &:nth-of-type(1) {
      // default 값
    }
    &:nth-of-type(2) {
      background-color: darken($color, 20%);
    }
    &:nth-of-type(3) {
      background-color: lighten($color, 10%);
    }
    &:nth-of-type(4) {
      background-color: saturate($color, 70%);
    }
    &:nth-of-type(5) {
      background-color: desaturate($color, 70%);
    }
    &:nth-of-type(6) {
      background-color: adjust-hue($color, 80%);
    }
    &:nth-of-type(7) {
      background-color: rgba($color, 0.5);
    }
  }
}

4. 확장(extend)으로 CSS 템플릿 구성하기

// % : 임시 클래스
// 임시 클래스를 지정한 후 @extend %변수명; 을 사용하여 스타일값을 불러올 수 있다.

// .btn-1, .btn-2 라는 클래스명을 가진 버튼태그가 있다고 가정해보자

// %btn(변수명)을 설정하고 스타일값을 저장할 수 있다.
%btn {
  padding: 10px 20px;
  cursor: pointer;
  background-color: inherit;
  border: 1px solid lightgray;
  border-radius: 14px;
}

.btn-1 {
  // btn css 스타일 그대로 복사
  @extend %btn;
  // 수정 혹은 추가가 필요한 스타일 적용
  border: 1px solid red;
  color: red;
  font-weight: bold;
}

.btn-2 {
  @extend %btn;
  border: 1px solid blue;
  color: blue;
  font-weight: bold;
}

5. mixin을 통한 CSS 맞춤 템플릿

// @mixin 변수명(인자){}를 사용하여 마치 자바스크립트 함수처럼 사용할 수 있다
// mixin 안에 인자($테두리, $글자색)를 넣어서 사용가능
// 인자가 전달되지 않았을 때 디폴트값도 설정 가능(black)

@mixin 버튼($테두리: black, $글자색: black) {
  padding: 10px 20px;
  cursor: pointer;
  background-color: inherit;
  border: 1px solid lightgray;
  border-radius: 14px;
  font-weight: bold;

  border: 1px solid $테두리; // 
  color: $글자색;
}

.btn-1 {
  @include 버튼(red, red);
}

.btn-2 {
  // 인자는 디폴트값이 적힌 순서대로 값을 넣어 적용시키지만
  // 이렇게 나머지는 디폴트값으로 설정하고 다른 특정 인자의 값만 설정하고 싶을 때
  // 테두리는 디폴트값, 글자색은 그린으로
  @include 버튼($글자색: green);
}

6. @use를 사용하여 외부파일 가져오기

/* 
use를 통해 다른 파일 가져오기
test.scss 불러오기, 파일이름이 너무 길다면 as로 임시파일명 설정가능
import 사용해서 url로 불러올 수도 있지만 use가 import보다 최근에 나온거라 사용권장
*/

// test.scss 파일

$test-color: red;


// 현재 scss 파일
@use "./test" as c;

.box {
  // test에서 선언한 변수 가져와서 쓰기(mixin, 임시클래스 등등 다른 것도 가능)
  color: c.$test-color; // red 값이 불러와짐
}

7. 반복문, 조건문

// 반복문
// 변수 $i를 1부터 10까지 반복 실행
@for $i from 1 through 10 {
  .box:nth-of-type(#{$i}) {
    width: 100px;
  }
}

// 배열 반복
// 변수 안에 마치 배열처럼 여러가지 값을 담아 선언할 수 있다.
$list: orange, blue, red, yellow;

// $list 배열 안 값들에 대한 반복 실행
@each $color in $list {
  .box {
    background-color: $color;
  }
}

// 객체 반복
$object: (
  1: orange,
  2: blue,
  3: yellow,
);

// 객체 안 property와 그에 대한 value 값을 반복실행
@each $key, $color in $object {
  .box-#{$key} {
    background-color: $color;
  }
}

// 조건문

$statement: yellow;

// $statement 변수가 blue 라면 color를 blue로 아니라면 red로 설정
p {
  @if $statement == blue {
    color: blue;
  } @else {
    color: red;
  }
}

위 scss코드를 css코드로 컴파일한다면 아래와 같이 설정된다.

/* css로 컴파일 */

/* for 반복 */

.box:nth-of-type(1) {
  width: 100px;
}

.box:nth-of-type(2) {
  width: 100px;
}

.box:nth-of-type(3) {
  width: 100px;
}

.box:nth-of-type(4) {
  width: 100px;
}

.box:nth-of-type(5) {
  width: 100px;
}

.box:nth-of-type(6) {
  width: 100px;
}

.box:nth-of-type(7) {
  width: 100px;
}

.box:nth-of-type(8) {
  width: 100px;
}

.box:nth-of-type(9) {
  width: 100px;
}

.box:nth-of-type(10) {
  width: 100px;
}

/* 배열 반복 */

.box {
  background-color: orange;
}

.box {
  background-color: blue;
}

.box {
  background-color: red;
}

.box {
  background-color: yellow;
}

/* 객체 반복 */

.box-1 {
  background-color: orange;
}

.box-2 {
  background-color: blue;
}

.box-3 {
  background-color: yellow;
}

/* 조건문 */

p {
  color: red;
}

8. 함수 선언

// @function을 사용하여 인자를 설정하고 값을 return 한다.

@function half-opacity($color, $opacity) {
  $color: rgba($color, $opacity);
  @return $color;
}

h1 {
  font-size: 10em;
  text-align: center;
  color: half-opacity(green, 0.3); // color: rgba(green, 0.3);
}