[CSS] SCSS?

터미널에 명령어 입력하여 CSS로 컴파일

sass --watch input.scss output.css

변수(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;
}

$를 사용하여 재사용 하려는 속성을 변수로 만들 수 있다.




중첩(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;
  }
}

가독성 개선을 위해 HTML과 동일한 계층구조를 따르는 속성들을 {}괄호를 사용하여 중첩시킨다




부분(Partials)
_밑줄을 사용하여 css조각 파일이라는 것을 알린다. (ex. _partial.scss) @use를 함께 사용한다





모듈화(Modularity)

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

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



/* SCSS */
// _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를 사용하여 단일 파일관리가 아닌 파일이름을 기반으로 하는 네임스페이스 모듈로 분리시킨다.
위 예제를 보면 styles.scss에서 @use를 사용해 _base.scss를 불러왔다




믹스인(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);
}

공통속성들을 @mixin으로 그룹화 한 후, @include로 재사용해주었다.
선택자간 연관성이 없지만 중복되는 스타일에 사용해준다

변수또한 같이 사용가능하며 가변일 경우 ...을 사용할 수 있다($theme: DarkGray)




확장&상속(Extend/Inheritance)

/* 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을 사용하여 확장 및 상속을 가능하게한다.
연관성 있는 규칙을 만들 수 있다 (ex. 버튼 너비,길이에 대한 규칙 통일)
연관성 있는 컴포넌트에 사용




연산자(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;
}

-, *, math.div()같은 연산이 가능하다






참고:
- https://velog.io/@pock11/Boomdoggy-mixinsass
- https://13akstjq.github.io/sass/2020/02/22/mixin%EA%B3%BC-extend-%EC%95%8C%EB%A7%9E%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.html
- https://sass-lang.com/guide