SASS

CSS, SASS, SCSS는 서로 완벽호환되며, Ruby와 node에서 사용 할 수 있습니다.
SCSS는 { 코드블럭 }을 사용하지만,
SASS는 { 코드블럭 } 대신 tab을 사용하며, 세미콜론( ; )을 사용하지 않는다 - indented syntax사용

SASS 사용

1.  Variable  ::  $

SASS의 변수는 이미 변수에 값이 할당되었을 경우 재할당될 수 없습니다.
!default를 변수와 함께 할당할 경우 해당값이 변수에 기본으로 할당됩니다.

  $myval1: null;
  $myval1: "Sass was developed" !default;
  
  p:after {
    content: $myval1;   // content: "Sass was developed"
  }

2.  @use

  /* scss */
  @use 'foundation/code';
  @use 'foundation/lists';
  
  /* sass */
  @use 'foundation/code'
  @use 'foundation/lists'

3.  @forward

@use  로 스타일시트가 불러와졌을 때 Sass 스타일 시트를 불러와 mixins , functions  , variable 로 만들어주는 기능을 합니다.

4.  @import

  /* normal CSS */
  @import "themes/blackforest";
  @import "style.sass";
  
  /* Sass */
  @import themes/blackforest
  @import style.sass

5.  @extend

특정 클래스를 상속하도록 합니다.

  .first_para {
    color: green
  }
  .sec_para {
    @extend .first_para;
    font-size: 20px;
  }

6.  @mixin & @include

  @mixin reset-list 
    margin: 0;
    padding: 0;
    list-style: none;
  
  p 
    @include reset-list;

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

8.  @error

arguments를 받는 mixin / function 를 작성할 때, arguments들이 type과 formats를 확인하여 받는지 확실해야 합니다. 아니라면 error를 반환하게 멈추고 알림이 울리도록 해야합니다.

  @mixin reflexive-position($property, $value) {
    @if $property != left and $property != right {
      @error "Property #{$property} must be either left or right.";
    }
  }

9.  @warn

error  와 비슷하지만 알림이 울립니다.

  @mixin prefix($property, $value, $prefixes) {
    @each $prefix in $prefixes {
      @if not index($known-prefixes, $prefix) {
        @warn "Unknown prefix #{$prefix}.";
      }
    }
  }

10.   @debug

디버깅을 하며 file이름과 line위치의 값을 표시합니다.

  @mixin inset-divider-offset($offset, $padding) {
    $divider-offset: (2 * $padding) + $offset;
    @debug "divider offset: #{$divider-offset}";
  }

11.  @at-root

상속된 규칙의 모음 - 스타일 블럭을 문서의 가장 루트노드에 만들 수 있습니다.

  @media print {
    .style {
      height: 8px;
      @at root (without: media) {
        color: #808000;
      }
    }
  }
  
  // result => 
  // @media print {
  //    .style {
  //      height: 8px
  //    }
  // }
  // .style {
  //    color: #808000;
  // }

---

Data Type

Data type에는 Numbers, Booleans, Maps, Strings, Null, colors, Space and Comma 가 있습니다.
기본적 타입은 생략합니다.

1.  Maps

key/value로 이루어진 쌍 - 연결된 key로 value를 확인하기 쉽습니다.
pairs of keys and values, and make it easy to look up a value by its corresponding key

2.  Strings

문자의 집합. '', ""에 문자를 입력할 수 있습니다.
사용시 #{  }  안에 문자열 입력후 사용할 수 있습니다.

  $name: "tutorialspoint";
  p.#{name} {
    color: blue;
  }

---

Flow control

1.  @while

  @function scale-below($value, $base, $ratio: 1.618) {
    @while $value > $base {
      $value: $value / $ratio;
    }
    @return $value;
  }

2.  @if , @else

  @mixin theme-colors($light-theme: true) {
    @if $light-theme {
      background-color: $light-background;
      color: $light-text;
    } @else {
      background-color: $dark-background;
      color: $dark-text;
    }
  }

3.  @each

  $sizes: 40px, 50px, 80px;
  @each $size in $sizes {
    .icon-#{$size} {
      font-size: $size;
      height: $size;
      width: $size;
    }
  }
  
  // result => .icon-40px {...} .icon-50px {...} .icon-80px {...}

4.  @for

  $base-color: #036;

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