SCSS, SASS

chaen·2023년 12월 28일

HTML / CSS

목록 보기

8/8

📌 CSS Preprocessor

CSS는 쉽고 재미있는 언어이지만, 작업이 고도화될수록 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재 등으로 코드가 복잡해지고 아쉬움이 발생한다. 이를 보완하기 위해 나온 게 CSS Preprocessor이다.

CSS Preprocessor은 CSS 전(예비)처리기이다. CSS가 동작하기 전에 사용하는 기능으로, CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능이 있는 확장판 언어이다.

CSS 버전

.a {
    width: 100px;
}

li {
    list-style:none;
}
  
li:hover {
    color: red;
}

SCSS 버전

.a {
    width: 100px;
    li {
        list-style:none;
    }
        &:hover {
            color: red;
        }
}

위와 같이 SCSS는 CSS 문법과 굉장히 유사하면서도 다음과 같은 추가 기능들을 제공한다.

변수의 사용
조건문, 반복문
Import
선택자의 중첩(Nesting)
Mixin
Extend/Inheritance
다양한 단위의 연산

❔ SASS와 SCSS

SCSS : Sassy CSS (멋진 CSS)
SASS : Syntactically Awesome Style Sheets (문법적으로 짱 멋진 스타일시트)

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 언어이다. 즉 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.

간단하게 {}(중괄호)와 ;(세미콜론)의 유무로 구분할 수 있다.

SCSS

.list {
  width: 100px;
  li {
    color: red;
    &:last-child {
      margin-right: -10px;
    }
  }
}

인라인 코드를 작성 가능하고, CSS와 유사하다.

Sass

.list
  width: 100px
  li
    color: red
    &:last-child
      margin-right: -10px

더 간결하고 작성하기 편리하며, 코드가 깔끔해진다.

각자의 장단점이 있기 때문에 상황에 맞춰서 선택 가능하지만, 보통은 SCSS를 추천한다.

💻 사용 방법

SCSS와 SASS는 웹에서 직접 동작하지 않는다. 어디까지나 최종에는 표준 CSS만이 사용되기 때문에, 전처리기에서 작성한 후 CSS로 컴파일(Compile) 해야 한다.

컴파일 방법으로는 여러가지가 있으나, 입문하는 과정에서는 아래의 두 가지 방법을 추천한다.

1. SassMeister

간단한 코드를 테스트해보고 싶을 경우 SassMeister 웹사이트를 이용할 수 있다.

페이지 접속 후 Sass/SCSS로 코딩할 경우 실시간으로 CSS 변환이 가능하다.

2. VSCode Live Sass Compiler

아래의 확장 프로그램을 설치한 후 VSCode를 재접속하면 오른쪽 아래에 Watch Sass 버튼이 생길 것이다. SCSS 문법으로 언어를 작성한 후 해당 버튼을 누르면 자동으로 연동되는 CSS 파일이 생성된다.

+ 컴파일 선택

Scss는 CSS와 마찬가지로 각 기능에 따라서 파일을 분리하여 코드를 작성할 수 있다.
만약 main이 되는 SCSS파일을 두고 @import하여 다른 파일을 불러온다면, 모든 파일을 다 CSS로 변환할 필요가 없으므로 파일 앞에 언더바 _를 붙여주면 컴파일을 막을 수 있다.

📘 SCSS 문법 (Syntax)

1. Nesting 구조

부모 요소 안에 자식 요소를 작성할 수 있다.
하지만 과하게 작성하면 읽기 힘드므로 최대 3뎁스까지 추천한다.

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

아래처럼 속성도 중첩 가능하다.

.a {
  background : {
    image: url("./assets/a.svg");
    position: center;
    repeat: no-repeat;
    size: 15px;
  }
}

`&` (엠퍼샌트)

선택자로 부모 요소를 지정할 경우 중접 안에서 &(엠퍼샌트) 를 사용한다.
after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있다.

.btn {
  position: absolute;
  &:active { /* .btn.active {} */
    color: red;
  }
  &::after {
  content: "";
  }
}

`@at-root`

@at-root 키워드를 사용하면 중첩에서 벗어날 수 있다.

.a {
  display: flex;
  justify-content: center;
  .a-content {
    font-size: 14px;
    @at-root i {
      opacity: 0.5;
    }
  }
}

2. 변수

$ 기호로 변수 만든다.

//$변수 : 값
$bgColor : #FFF;

선언된 블록({}) 내에서만 유효범위를 가진다.
변수 $color는 .box1의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서는 적용되지 않는다.
위에서 @at-root를 사용하는 이유이다.

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

단, !global 플래그를 사용하면 유효 범위를 전역(Global)로 변경할 수 있다.

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

3. 내장된 색 관련 함수

color: darken ($color: ,$amount: n%); // 어둡게
color: lighten ($color: ,$amount: n%);// 밝게
color: saturate ($color: ,$amount: n%); // 채도 올림
color: desaturate ($color: ,$amount: n%); // 채도 낮춤
color: adjust-hue ($color: ,$degrees: deg); // 색조 변화
color: rgba(color, 0.5); //투명도 변화

4. extend (확장)

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 (코드의 중복) 일 경우 사용할 수 있다.

기존에 작성한 클래스 전체를 가져올 수 있다.

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

위의 코드는 css로 아래와 같다.

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

`%` placeholder

% 로 임시 클래스를 만들 수 있다. html 파일에는 btn-1, btn-2 클래스만 존재하지만, scss 내부에 %btn 이라는 컴파일 되지 않는 임시 클래스를 만들어 작성 후 @extend를 사용해 두 클래스의 속성을 이어서 작성할 수 있다.

%btn {
  padding: 10px;
  margin: 10px;
}
.btn-red {
  @extend %btn;
  background-color: red;
}
.btn-blue {
  @extend %btn;
  background-color: blue;
}

5. mixin

🤔 Mixin 과 Extend 차이점

mixin는 (관계 없는) 선택자에서 조금 다른 스타일을 적용할 때 사용

extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용

@mixin name을 통해 생성을 하고, extend와 같이 @include name을 통해 불러올 수 있다.

@mixin name{ } // 생성
  
.btn {
  @include name; // 사용
}

argument

mixin은 함수처럼 매개변수(parameter)와 인수(Arguments)를 가질 수 있다.
매개변수와 인수에는 $ 달러 사인을 넣어야 한다.

@mixin dash-line($parameter){
}
  
.btn {
  @include dash-line($arguments);
}

매개변수에 인수 값이 들어오지 않을 때를 대비하여 기본 값을 설정할 수 있다.

@mixin dash-line($width: 50px){ }

함수와 같이 서로가 매치되지 않아도 무방하다.
단, 순차적으로 적용되므로 값을 비울 땐 null을 사용하거나, 매개변수 명과 인수 값을 직접 언급해야 한다.

@mixin btn ($width:100px, $height:50px, $radius:10px) {
    width: $width;
    height: $height;
    border-radius: $radius;
}
// 값 비우기
.btn1 {
    @include btn (500px, null, 20px)
}
// 중앙값 주지 않기
.btn2 {
    @include btn (200px, $radius:20px)
}

6. 연산자 (operator)

CSS에서는 calc() 을 사용하여 연산한다.
하지만 SCSS의 경우 괄호 없이도 연산이 가능하다.

.box {
  width: 20px + 20px;  // 더하기
  height: 40px - 10px;  // 빼기
  font-size: 10px * 2;  // 곱하기
  margin: ( 30px / 2 );  // 나누기
}

단, 나누기의 경우 이미 다른 기능으로 사용되고 있어 사용되지 않을 수 있다. 이럴 경우 아래의 조건 중 하나를 만족해야 한다.

다른 연산자와 함께 사용할 경우
값이 ()로 묶여있는 경우
Sass의 공식적인 연산자 방식을 활용할 경우

@use "sass:math";

.box {
  width: math.div(100px, 2);
} // division (분자, 분모)

추가적인 참고: sass:math

연산자 종류

산술 연산자

종류	설명	주의사항
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자(Number)
/	나누기	오른쪽 값이 반드시 숫자(Number)
%	나머지

비교 연산자

종류	설명
==	동등
!=	부등
<	대소 / 보다 작은
>	대소 / 보다 큰
<=	대소 및 동등 / 보다 작거나 같은
>=	대소 및 동등 / 보다 크거나 같은

논리 연산자

종류	설명
and	그리고
or	또는
not	부정

7. @use

다른 파일을 불러와서 연결할 때 사용한다.
파일 확장자 명은 생략 가능하다.

@use "test" //test.scss 파일을 임포트

다른 파일에서 선언한 변수의 명을 또 다른 파일에서 사용하고 싶을 경우 아래와 같이 파일명 + . 을 작성한다.

@use "test"

.box {
  color: test.$bg-color;
  // test 파일에 bg-color라는 변수를 선언한 상태

파일명이 길 경우 아래와 같이 치환 가능하다.

@use "test" as c;

.box {
  color: c.$bg-color;

@import와의 차이

@import는 @use와 같이 모듈화된 다른 파일을 불러올 때 사용한다.
하지만 SCSS에서는 @import 규칙을 사용하는 것을 권장하지 않으며, 점진적으로 이를 완전히 제거할 것이라고 말한다.

8. 조건문, 반복문

if (함수)

sass에서는 if 함수가 사용 가능하다.
조건부 삼항 연산자처럼 활용되는데, if(조건, 표현식1, 표현식2) 구조를 가지고 두 개의 표현식 중 하나만 반환한다.

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

@if, @else(지시어)

$color: orange;
div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else if $color == banana {
    color: #FFFF00;
  } @else {
    color: #2A1B0A;
  }
}

@for

@for는 스타일을 반복적으로 출력합니다.
@for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다.

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

@each

for in 문과 유사한 형식으로, 배열과 map 데이터를 반복할 때 사용한다.

// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

//오브젝트
$ object : (
  1 : orange,
  2 : blue,
  3 : yellow
);

@each $key, $color in $object {
  .box-#{$key} {
      background-color: $color;
      }
}

REFERENCE
1 : Sass는 SCSS로 쓰세요
2 : CSS & SCSS & SASS
3 : Sass(SCSS) 완전 정복!

chaen

이전 포스트

SCSS, SASS

HTML / CSS

📌 CSS Preprocessor

❔ SASS와 SCSS

추천이유

💻 사용 방법

1. SassMeister

2. VSCode Live Sass Compiler

+ 컴파일 선택

📘 SCSS 문법 (Syntax)

1. Nesting 구조

`&` (엠퍼샌트)

`@at-root`

2. 변수

3. 내장된 색 관련 함수

4. extend (확장)

`%` placeholder

5. mixin

argument

6. 연산자 (operator)

연산자 종류

7. @use

@import와의 차이

8. 조건문, 반복문

if (함수)

@if, @else(지시어)

@for

@each

CSS | transform, transition, css animation

0개의 댓글

관련 채용 정보

SCSS, SASS

HTML / CSS

📌 CSS Preprocessor

❔ SASS와 SCSS

추천이유

💻 사용 방법

1. SassMeister

2. VSCode Live Sass Compiler

+ 컴파일 선택

📘 SCSS 문법 (Syntax)

1. Nesting 구조

& (엠퍼샌트)

@at-root

2. 변수

3. 내장된 색 관련 함수

4. extend (확장)

% placeholder

5. mixin

argument

6. 연산자 (operator)

연산자 종류

7. @use

@import와의 차이

8. 조건문, 반복문

if (함수)

@if, @else(지시어)

@for

@each

CSS | transform, transition, css animation

0개의 댓글

관련 채용 정보

`&` (엠퍼샌트)

`@at-root`

`%` placeholder