scss

13 July 2023 - 7 mins read time
Tags: scss 클론코딩


scss의 개념과 기본셋팅 과정! mixin 알아보기.


📖 CSS & SASS & SCSS 개념

  1. 브라우저는 인식할 수 없으며 CSS로 컴파일 된다.
  2. SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
  3. SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
  4. SASS는 들여 쓰기+줄 바꿈 형식 / SCSS는 중괄호+세미콜론 형식
  5. 전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많음
  6. SASS보다 SCSS가 CSS와의 호환성이 더 좋음


📌 제공하는 기능 / 예시


1. 변수(Variable) 할당

자주 사용하는 색이나 폰트 등등 변수로 지정하여 재사용할 수 있다.

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

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

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


2. 중첩(Nesting) 구문

중첩기능을 통해 쉬운 구성과 높은 가독성을 가질 수 있다.

/* 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;}

/* SCSS */
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}


3. 모듈화(Modularity)

@use를 사용하여 파일을 분할하고 모듈화 할 수 있다.

/* CSS */
body {font: 100% Helvetica, sans-serif; color: #333;}
.inverse {background-color: #333; color: white;}

/* _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;
}


4. 믹스인(Mixins)

함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있다. (재사용성)

/* 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;}

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


5. 확장&상속(Extend/Inheritance)

@extend 사용 시 css 속성 집합을 상속받을 수 있다.

/* CSS */
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {border: 1px solid #ccc; padding: 10px; color: #333;}
.success { border-color: green;}
.error {border-color: red;}
.warning {border-color: yellow;}

/* SCSS */
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}


6. 연산자(Operators)

math.div(나누기) 외에도 sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용할 수 있다.

/* CSS */
.container {display: flex;}
article[role="main"] {width: 62.5%;}
aside[role="complementary"] {width: 31.25%;margin-left: auto;}

/* 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;
}


📌 SASS, SCSS가 적용되는 원리

SASS, SCSS를 CSS pre-processor(전처리기)라고도 하는데 스크립팅 언어이기 때문에 SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용될 수는 없다. 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 된다.


📌 SCSS import

@import '../scss/base/reset';

@import '../scss/base/var.scss';
@import '../scss/base/fontFace.scss';
@import '../scss/base/mixin.scss';
@import '../scss/base/preset.scss';
  1. common.scss에 @import 하면 css 한 파일에 연결되기 때문에 로딩시간 단축
  2. @import는 외부에 있는 다른 scss파일을 연결하는 구문
  3. scss는 컴포넌트 방식으로 여러개의 파일을 나누기 때문에 통합하는 과정이 필요하다.
  4. 동일한 scss파일을 import할 때에는 확장자 명을 생락해도 된다. (다른 확장자는 반드시 확장자명 기입)
  5. 컴파일이 필요하지 않은 scss파일은 파일명 앞에 _를 붙이면 컴파일 대상에서 제외된다.