[Vue.js] 나를 소개하는 홈페이지 만들기 (3) - CSS, SASS, SCSS

Next14 + Netlify 로 새로 작성했습니다.

https://whothatsme.tistory.com/42

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

 

---

 

css로 만들었던 파일을 scss로 바꾸어 정리해보려고 한다. 과연 css와 sass/scss의 차이는 무엇일까?

 

CSS : Cascading Style Sheets - 종속형 시트

SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트

SCSS : Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS

 

• sass/scss는 css를 편리하게 사용할 수 있으며 추가 기능이 있는 확장판 스크립트 언어
• 기존의 css의 기능 부재 단점을 보완한 다양한 기능 추가
• 전 세계적으로 scss의 사용자 수, 라이브러리, 프레임 워크 가 sass보다 많음

통상적으로 scss를 더 많이 사용하는데, css 문법과 완벽하게 호환되는 장점 또한 가지고 있기 때문이다. 코드의 가속성과 재사용성을 높여주며 심플한 표기법으로 css 구조를 평준화 할 수 있다.

 

CSS

.list {
  width: 100px;
  float: left;
  }
li {
  color: red;
  background: url("./image.jpg");
  }
li:last-child {
  margin-right: -10px;
  }

SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

SASS

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

코드의 차이는 다음과 같다. 크기와 생김새의 차이를 어느정도 눈으로 볼 수 있다.

 

다음은 제공하는 기능을 이해해보자.

 

1. 변수 (Variable) 할당

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

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

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

2. 중첩 (Nesting) 구문

구성을 쉽게 변경하고 가독성을 높일 수 있다.

/* 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를 사용해서 파일을 분할하고 모듈화 할 수 있다.

/* _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)

함수처럼 default parameter를 지정할 수 있고, 파라미터를 받아서 속성을 부여할 수 있다. 재사용성이 높아진다.

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

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

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

/* 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 등 여러가지 수학적 기능을 사용할 수 있다.

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