최고의 개발자 (목표)

💡 How to use

1 . Variables

• 파일 내에서 변수 선언 후, 사용 가능
• $변수
• 예제 코드

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

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

2 . Nesting

• 계층 구조에 따라 중첩해서 사용 가능
• {} 사용
• 중첩 내부에서 &키워드는 상위(부모) 선택자로 치환됨
• 예제 코드(scss ⇒ css)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

    &.active {
        color: red;
    }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
nav.active {
    color: red;
}

3 . Partials

• 보통 @use 규칙과 같이 사용
• 다른 scss 파일의 부분으로 들어가는 scss 코드
• 파일 이름을 작성할 때 맨 앞에 _(밑줄)을 추가하여 css로 컴파일하지 않아도 됨을 명시
• 예시 코드

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

4 . Modules

• @use 키워드는 scss 파일 제일 위에 선언해야함
• 아래 예시처럼 base에 있는 변수도 접근할 수 있음
• 예시 코드

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

5 . Mixins

• 재사용하려는 코드를 @mixin 키워드를 이용해 선언
• @mixin 변수($type: x){}
• 변수를 받음
• 선언된 코드는 @include 키워드를 이용해 사용할 수 있음
• @include 변수 or @include 변수(값)
• 예시 코드

@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);
}

6 . Extends/Inheritance

• Mixin과 비슷하지만 변수를 따로 받지 않음
• 재사용하려는 css 코드 앞에 %를 붙임
• @extend 키워드를 이용해 사용가능
• 예시 코드

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

7 . Operators

• +
• -
• *
• /
• %
  
  
  

💡 Property Declarations

1 . Interpolation

• 속성을 동적으로 생성할 수 있음
• #{변수} 을 이용해 값 넣음

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

💡 At-Rules

1 . @use

• 다른 scss 파일을 가져옴과 동시에 override도 가능함

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

2 . @forward

• 재사용할 코드의 path를 저장함
• @use @forward 파일의 이름 으로 사용

// bootstrap.scss
@forward "src/list";

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

3 . @function

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

4 . Flow Control Rules

• @if & @else & @else if

@use "sass:math";

@mixintriangle($size, $color, $direction) {
height: 0;
width: 0;

border-color: transparent;
border-style: solid;
border-width: math.div($size, 2);
@if $direction== up {
border-bottom-color: $color;
  }@else if $direction== right {
border-left-color: $color;
  }@else if $direction== down {
border-top-color: $color;
  }@else if $direction== left {
border-right-color: $color;
  }@else {
@error "Unknown direction #{$direction}.";
  }
}

.next {
@includetriangle(5px, black, right);
}

• @each

$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}

• @for

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

• @while

@use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

🍎 참고 문헌

1 . https://sass-lang.com/guide
2 . https://sass-lang.com/documentation/at-rules/control/while
3 . https://sass-lang.com/documentation/syntax/structure

* display 

https://d2.naver.com/helloworld/8540176