[TIL]221214 CSS 와 SCSS의 차이

이태은·2022년 12월 14일

회고

목록 보기

68/71

CSS

Cascading Style Sheets

종속형 시트

SASS

Syntactically Awesome Style Sheets
- 문법적으로 어썸한 스타일시트
- 아니 ㅋㅋㅋㅋㅋ 문법적으로 대박인 스타일 시트가 뭔데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

SCSS

Sassy CSS
- 문법적으로 짱 멋진(Sassy) CSS
- 작명 센스 무엇,,,

CSS 안쓰는 이유

프로젝트의 크기가 커지고 고도화 될수록 유지보수에 어려움이 생긴다.
기존의 css는 불필요한 선택자와, 연산기능 한계, 구문의 부재 등의 문제점이 있다.

SCSS 쓰는 이유?

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)

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

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

4. 믹스인(Mixins)

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

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

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

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

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

6. 연산자(Operators)

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