SCSS/Sass 완벽 가이드

1
2
3
4
5
6
7
8
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

1
2
3
4
5
6
7
8
9
10
11
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

1
2
3
4
5
6
7
=flex-center
  display: flex
  justify-content: center
  align-items: center

.box
  +flex-center

1
2
3
4
5
6
7
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box { @include flex-center; }

1
npm i -D sass

1
2
3
4
5
## `main.scss` 파일을 `main.css` 파일로 컴파일
npx sass main.scss main.css

## `scss` 디렉토리의 파일들을 `css` 디렉토리로 컴파일
npx sass scss:css

1
npx sass --watch scss:css

1
npm i -D sass-embedded

1
npm i -D style-loader css-loader sass-loader sass-embedded

1
npm i -D parcel sass

1
npx parcel index.html

1
2
// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

1
2
3
4
5
6
7
8
/* 컴파일되는
 * 여러 줄
 * 주석 */

// Error
/* 컴파일되는
* 여러 줄
    * 주석 */

1
2
3
4
5
/*
컴파일되는
여러 줄
주석
*/

1
2
3
4
5
6
7
8
9
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

1
2
3
4
5
6
7
8
9
.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

1
2
3
4
5
6
7
8
9
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

1
2
3
4
5
.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

1
2
3
4
5
6
7
8
9
.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

1
2
3
4
5
6
7
8
9
10
11
12
.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

1
2
3
4
5
6
7
8
.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
}

// Error
.box {
  width: $w;
  height: $h;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

1
2
3
4
5
6
7
8
9
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

1
$변수이름: 속성값;

1
2
3
4
5
6
7
8
9
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

1
2
3
4
5
.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

1
2
3
4
5
6
7
8
.box1 {
  $color: #111;
  background: $color;
}
// Error
.box2 {
  background: $color;
}

1
2
3
4
5
6
7
8
9
10
$red: #FF0000;
$blue: #0000FF;

$color-primary: $blue;
$color-danger: $red;

.box {
  color: $color-primary;
  background: $color-danger;
}

1
2
3
4
.box {
  color: #0000FF;
  background: #FF0000;
}

1
2
3
4
5
6
7
8
9
10
11
12
$color: #000;
.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}
.box3 {
  $color: #222;
  background: $color;
}

1
2
3
4
5
6
7
8
9
.box1 {
  background: #111;
}
.box2 {
  background: #111;
}
.box3 {
  background: #222;
}

1
2
3
4
5
6
$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;
}

1
2
3
.box {
  background: red;
}

1
2
3
4
@use "sass:string";

$family: string.unquote("Noto+Sans+KR");
@import url("https://fonts.googleapis.com/css2?family=#{$family}");

1
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR");

1
2
3
4
5
6
7
Sass-App
  # ...
  ├─scss
  │  ├─_header.scss
  │  ├─_side-menu.scss
  │  └─main.scss
  # ...

1
npx sass scss:css

1
2
3
4
5
6
7
8
9
Sass-App
  # ...
  ├─css
  │  └─main.css  # main + header + side-menu
  ├─scss
  │  ├─_header.scss
  │  ├─_side-menu.scss
  │  └─main.scss
  # ...

1
2
3
4
5
@use "config" as c;

.btn {
  background: c.$primary;
}

1
2
3
4
5
@use "config" as *;

.btn {
  background: $primary;
}

1
2
3
@forward "config" show $primary, flex-center;
@forward "button" hide $btn-inner-gap;
@forward "config" as config-*;

1
2
// 지원이 중단된 방식
@import "header", "side-menu";

1
2
3
4
@import "hello.css";
@import "https://hello.com/hello";
@import url(hello);
@import "hello" screen;

1
@use "hello.css";

1
2
width: 50% - 20px;  // Error: 50% and 20px have incompatible units.
width: calc(50% - 20px);  // 브라우저에서 계산

1
2
3
4
5
6
7
8
9
@use "sass:math";

div {
  width: 20px + 20px;  // 더하기
  height: 40px - 10px;  // 빼기
  font-size: 10px * 2;  // 곱하기
  margin: math.div(30px, 2);  // 나누기
  padding: calc(30px / 2);  // 나누기
}

1
2
3
4
5
6
7
div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 15px;
  padding: 15px;
}

1
2
3
div {
  width: calc(var(--size) / 2);
}

1
2
3
div {
  width: calc(var(--size) / 2);
}

1
2
3
4
div::after {
  content: "Hello " + World;
  flex-flow: row + "-reverse" + " " + wrap
}

1
2
3
4
div::after {
  content: "Hello World";
  flex-flow: row-reverse wrap;
}

1
2
3
4
div {
  // Error: Undefined operation "#123456 + #345678".
  color: #123456 + #345678;
}

1
2
3
4
5
6
7
8
9
10
@use "sass:color";

$color: rgba(10, 20, 30, 0.5);

div {
  color: color.adjust($color, $alpha: 0.3);  // 30% 더 불투명하게 / 0.5 + 0.3
  background-color: color.adjust($color, $alpha: -0.2);  // 20% 더 투명하게 / 0.5 - 0.2
  border-color: color.scale(#336699, $lightness: 50%);  // 남은 밝기 범위의 50%만큼 더 밝게
  outline-color: color.mix(red, blue, 30%);  // 두 색을 3:7로 섞기
}

1
2
3
4
5
6
div {
  color: rgba(10, 20, 30, 0.8);
  background-color: rgba(10, 20, 30, 0.3);
  border-color: rgb(55%, 70%, 85%);
  outline-color: rgb(30%, 0%, 70%);
}

1
2
3
4
5
6
$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}

1
2
3
div {
  height: 300px;
}

1
2
3
@mixin 믹스인이름 {
  스타일;
}

1
2
=믹스인이름
  스타일

1
2
3
4
5
6
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

1
@include 믹스인이름;

1
+믹스인이름

1
2
3
4
5
6
h1 {
  @include large-text;
}
div {
  @include large-text;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
h1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
h1::after {
  content: "!!";
}
h1 span.icon {
  background: url("/images/icon.png");
}

div {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
div::after {
  content: "!!";
}
div span.icon {
  background: url("/images/icon.png");
}

1
2
3
4
@mixin 믹스인이름($매개변수) {
  스타일;
}
@include 믹스인이름(인수);

1
2
3
4
=믹스인이름($매개변수)
  스타일

+믹스인이름(인수)

1
2
3
4
5
6
@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }

1
2
3
4
5
6
.box1 {
  border: 1px dashed red;
}
.box2 {
  border: 4px dashed blue;
}

1
2
3
@mixin 믹스인이름($매개변수: 기본값) {
  스타일;
}

1
2
3
4
5
6
@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}

.box1 { @include dash-line; }
.box2 { @include dash-line(4px); }

1
2
3
4
5
6
.box1 {
  border: 1px dashed black;
}
.box2 {
  border: 4px dashed black;
}

1
2
3
4
5
@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) {
  스타일;
}

@include 믹스인이름($매개변수B: 인수);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@mixin position(
  $p: absolute,
  $t: null,
  $b: null,
  $l: null,
  $r: null
) {
  position: $p;
  top: $t;
  bottom: $b;
  left: $l;
  right: $r;
}

.absolute {
  // 키워드 인수로 설정할 값만 전달
  @include position($b: 10px, $r: 20px);
}
.fixed {
  // 인수가 많아짐에 따라 가독성을 확보하기 위해 줄바꿈
  @include position(
    fixed,
    $t: 30px,
    $r: 40px
  );
}

1
2
3
4
5
6
7
8
9
10
.absolute {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 30px;
  right: 40px;
}

1
2
3
4
5
@mixin 믹스인이름($매개변수...) {
  스타일;
}

@include 믹스인이름(인수A, 인수B, 인수C);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}

div {
  // 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달
  @include bg(
    100px,
    200px,
    url("/images/a.png") no-repeat 10px 20px,
    url("/images/b.png") no-repeat,
    url("/images/c.png")
  );
}

1
2
3
4
5
6
7
div {
  width: 100px;
  height: 200px;
  background: url("/images/a.png") no-repeat 10px 20px,
              url("/images/b.png") no-repeat,
              url("/images/c.png");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
}
span {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  font-family: sans-serif;
}
a {
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  font-family: monospace;
}

1
2
3
4
5
6
7
8
9
@mixin 믹스인이름() {
  스타일;
  @content;
}

@include 믹스인이름() {
  // 스타일 블록
  스타일;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

1
2
3
4
5
6
7
.icon1::after {
  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$color: red;

@mixin colors($color: blue) {
  // Mixin의 범위
  @content;
  background-color: $color;
  border-color: $color;
}

div {
  @include colors() {
    // 스타일 블록이 정의된 범위
    color: $color;
  }
}

1
2
3
4
5
div {
  color: red;
  background-color: blue;
  border-color: blue;
}

1
2
3
4
5
6
7
8
9
10
11
@mixin media($breakpoint) {
  @media (min-width: $breakpoint) {
    @content($breakpoint);
  }
}

.box {
  @include media(768px) using ($width) {
    max-width: $width;
  }
}

1
2
3
4
5
@media (min-width: 768px) {
  .box {
    max-width: 768px;
  }
}

1
@extend 선택자;

1
2
3
4
5
6
7
8
9
.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

1
2
3
4
5
6
7
8
.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
%btn-base {
  padding: 10px;
  margin: 10px;
}

.btn {
  @extend %btn-base;
  background: blue;
}
.btn-danger {
  @extend %btn-base;
  background: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
.btn-danger, .btn {
  padding: 10px;
  margin: 10px;
}

.btn {
  background: blue;
}

.btn-danger {
  background: red;
}

1
2
3
4
5
6
7
8
9
// Mixins
@mixin 믹스인이름($매개변수) {
  스타일;
}

// Functions
@function 함수이름($매개변수) {
  @return 값
}

1
2
3
4
5
// Mixin
@include 믹스인이름(인수);

// Functions
함수이름(인수)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@use "sass:math";

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return math.div($max-width * $number, $columns);
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns();  // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box_group {
  /* 총 너비 */
  width: 980px;
}
.box_group .box1 {
  /* 총 너비의 약 8.3% */
  width: 81.6666666667px;
}
.box_group .box2 {
  /* 총 너비의 약 66.7% */
  width: 653.3333333333px;
}
.box_group .box3 {
  /* 총 너비의 25% */
  width: 245px;
}

1
if(sass(조건): 표현식1; else: 표현식2)

1
2
3
4
$width: 555px;
div {
  width: if(sass($width > 300px): $width; else: null);
}

1
2
3
div {
  width: 555px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// @if
@if (조건) {
  /* 조건이 참일 때 구문 */
}

// @if @else
@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

1
2
3
4
5
6
$bg: true;
div {
  @if $bg {
    background: url("/images/a.jpg");
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
$color: orange;
div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else if $color == banana {
    color: #FFFF00;
  } @else {
    color: #2A1B0A;
  }
}

1
2
3
div {
  color: #FE9A2E;
}

1
2
3
4
5
6
7
8
9
10
11
12
@function limitSize($size) {
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else {
    @return 800px;
  }
}

div {
  width: limitSize(180px);
  height: limitSize(340px);
}

1
2
3
4
div {
  width: 200px;
  height: 800px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@use "sass:math";

@mixin pCenter($w, $h, $p: absolute) {
  @if
    $p == absolute
    or $p == fixed
    // or not $p == relative
    // or not $p == static
  {
    width: if(sass(math.is-unitless($w)): #{$w}px; else: $w);
    height: if(sass(math.is-unitless($h)): #{$h}px; else: $h);
    position: $p;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.box1 {
  @include pCenter(10px, 20px);
}
.box2 {
  @include pCenter(50, 50, fixed);
}
.box3 {
  @include pCenter(100, 200, relative);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box1 {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.box2 {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

1
2
3
4
5
6
7
8
9
10
11
// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

1
2
3
4
5
6
.through:nth-child(1) { width: 20px; }
.through:nth-child(2) { width: 40px; }
.through:nth-child(3) { width: 60px; }

.to:nth-child(1) { width: 20px; }
.to:nth-child(2) { width: 40px; }