SASS

SASS는 CSS로 컴파일된 스타일시트 언어이다

완전히 CSS와 호환되는 구문으로 변수, 중첩, 믹스인, 함수 등을 사용할 수 있다.

SASS는 대규모 스타일시트를 잘 정리된 상태로 유지하고 프로젝트 내외에서 디자인을 쉽게 공유할 수 있도록 도와준다.

 

npm install -g sass

 

 

▶ Preprocessing

sass는 vaiables, nesting, operators, imports, partials, mixins, function, extends, control directives와 같은 기능을 가진다.

sass 코드가 css 코드로 컴파일되어 사용된다. 이는 css가 가진 방대하고, 복잡하고 유지하기 어려운 부분을 해결해 주는 것이다..

 

 

▶ Variables

변수는 내가 재사용하고자 하는 colors, font stack, or any css value 같은 것들을 $ symbol을 사용해 재사용할 수 있게 한다.

SASS보다는 CSS와 닮아있는 SCSS를 주로 사용한다.

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

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

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

 

 

▶ Nesting

CSS는 중첩이 불가능하지만 SCSS는 중첩을 허용함으로써 읽기 쉽게 한다.

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

  li { display: inline-block; }

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

/* CSS SYNTAX */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

 

▶ Partials

여러 개의 파일로 분할하는 것 또는 분할된 파일을 partial이라 하며, partial 된 Sass 파일명의 선두에는 underscore(_)를 붙인다.

(_reset.scss, _module.scss, _print.scss)

@use

 

▶ Modules

모든 Sass를 하나의 파일에 작성할 필요는 없다. 원하는 대로 분할할 수 있다.

/* SCSS SYNTAX */

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

 

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

.inverse {
  background-color: #333;
  color: white;
}

 

 

▶ Mixins

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

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

 

 

▶ Inheritance

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

/* CSS SYNTAX */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

 

 

▶ Operators

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

/* CSS SYNTAX */
.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

 

---

https://sass-lang.com/guide/#preprocessing

Sass: Sass Basics

https://poiemaweb.com/sass-basics

Sass - Basics | PoiemaWeb