Compile

<link rel="stylesheet" href="/dist/style.css" />

>npm i -g sass


>$sass --watch src/style.scss dist/style.css

watch : scss 파일 변화 자동으로 감지
src폴더의 style.scss의 변화를 감지하여 dist/style.css로 컴파일 

폴더 단위로 감시하고 컴파일 하는 법
>$sass --watch app:public

app폴더안의 모든 scss파일 변화를 감지하여 public폴더에 css파일을 생성하여 컴파일
컴파일을 원하지 않는 scss파일은 이름앞에 _를 붙여줄 것 ex)_flex.scss

@use

css의 @import와 겹치는 문제를 해결

@use 'style' // style.scss 파일을 가져옴
@use "sass:math" // 내장모듈 가져오기 

.list {
  width: style.$width // 어느 모듈에서 가져온 변수인지 확실하게 지정 가능.
  height: style.getHeight(true) // 함수, mixin의 경우도 가능.
  font-size: math.round(15.4px); // 함수 호출 시 내장 함수 겹침 방지.
}

개인 변수는 모듈 불가능 : $_variable : 100px;

내장모듈 가져오기

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

& : 참조한 상위 선택자로 치환

//scss
.fs {
&-small {font-size: 12px;}
&-medium {font-size: 12px;}
&-large {font-size: 12px;}
}
// css
.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

@at-root : 중첩 벗어나기

// scss
.list {
  $w: 100px;
  $h: 50px;
@at-root .box {
  width: $w;
  height: $h;
}}
// css
.list {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

동일한 네임스페이스 처리

// scss
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
}}
// css
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  }

!default

!default 할당된 변수가 없다면 변수로 사용 스코프가 겹치지 않아도 해당
특히 import로 라이브러리 사용시에 변수가 겹치지 않기 위해 사용
$color: red;
.box {
  $color: blue !default;
  bacground: $color // red;
}

quote, unquote, #{}

quote(str) : 인수에 quote 삽입 // "str"
unpuote("str") : str의 quote 제거 // str
#{$variable} : $varialble을 어디서든 삽입 가능하게 함 ex) "#{$variable}"  

Partials

scss 파일 앞에 를 붙인 파일은 css파일로 컴파일 되지 않는다.
@import하여 사용할 파일은 를 붙여 파일 생성할 것 import시에는 _를 빼고 import

연산

단위가 맞지 않는 연산 calc(50% -30px);
나누기 연산 / 사용시에는 /가 숫자분리 구분점으로 인식될 수 있어 다음 규칙을 지켜 사용

div {
  $x: 100px;
  width: $x / 2; // 변수에 저장된 값을 나누기
  height: (100px / 2); // 괄호로 묶어서 나누기
  font-size: 10px + 12px / 3; // 더하기 연산과 같이 사용
}

string 연산 : 첫번째 피연산자를 기준으로 연산 결과 인식
div::after {
  content: 'Hello ' + World;
  flex-flow: row + '-reverse' + ' ' + wrap;
}
// CSS
div::after {
  content: 'Hello World';
  flex-flow: row-reverse wrap;
}

// 색상 연산
$color: rgba(10, 20, 30, 0.5);

div {
  color: opacity($color, 0.3); //0.5 + 0.3
  background-color: transparentize($color, 0.2); // 20% 더 투명하게 / 0.5 - 0.2
}

@if @else if @else and or not

$width: 90px;
div {
  @if not($width >= 100px) {
    height: 300px;
  } @else if () {
}}
// css
div {
  height: 300px;
}

@Mixin(선언하기), @include(사용하기), @content

재 사용할 css 선언 그륩 
@mixin large-text {
  font : {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  &::after {
    content: "!!"
  }
  span.icon {
    background: url("/images/icon.png");
  }
}

h1 {
  @include large-text;
}
// css
h1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
h1::after {
  content: '!!';
}
h1 span.icon {
  background: url('/images/icon.png');
}

함수 스타일로 사용하기
// @mixin 믹스인이름($매개변수) {
//   스타일;
// }
// @include 믹스인이름(인수);

@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

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

믹스인 키워드 인수 : 인수 순서 상관없이 매개변수 연결 가능
@mixin postion($p: absolute, $t: null, $b: null, $l:null, $r: null) {
 position: $p;
 top: $t;
 bottom: $b;
 left: $l;
 right: $r;
}
.fixed {
  // 인수 순서 없이 매개변수 연결 가능
  @include position(fixed, $t: 3px, $r: 5px);
}
// css
.fixed {
  position: fixed;
  top: 3px;
  right: 5px;
}

가변인수
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}

div {
  @include bg(
    10px,
    20px,
    url('/images/a.png') no-repeat 10px 20px,
    url('/images/b.png') no-repeat,
    url('/images/c.png')
  );
}
// css
div {
  width: 10px;
  height: 20px;
  background: url('/images/a.png') no-repeat 10px 20px;
    		  url('/images/b.png') no-repeat;
    		  url('/images/c.png');
}

@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 {
  // 필요한 값만 줄 때
  @include font((weight: 900, family: monospace)...);
}

@content : mixin에 스타일 블록을 추가해서 사용 가능
@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}

.icon2 {
  @include icon('/images/icon.png') {
    position: absolute; // 스타일 추가해서 사용
  }
}
// css
.icon::after {
  content: "/images/icon.png";
  position: absolute;
}

// 스타일 블록이 정의 된 범위
$color: red;

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

div {
  @include colors() {
    // 스타일 블록이 정의된 범위
    color: $color; // red 사용 매개변수값이 사용되지 않음
  }
}

@function

@function limitSize($size) {
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else {
    @return 800px;
  }
}

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

if(조건, true, false)

$width: 555px;
div {
  width: if($width > 300px, $width, null)
}
// css
div {
  width: 555px;
}

@for 반복문

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

@for $i from 1 through 3 {  
  .through:nth-child(#{$i}) {
    width: 20px * $i;
  }
}
// css
.through:nth-child(1) {
  width: 20px;
}
.through:nth-child(2) {
  width: 40px;
}
.through:nth-child(3) {
  width: 60px;
}

@each $변수 in 데이터

$fruits: (apple, orange, banana, mango) // list 데이터

.fruits {
  @each $fruit in $fruits {
    li.#{fruit} {
      background: url('/images/#{$fruit}.png');
    }
  }
}
// css
.fruits li.apple {
  background: url('/images/apple.png');
}
.fruits li.orange {
  background: url('/images/orange.png');
}
.fruits li.banana {
  background: url('/images/banana.png');
}
.fruits li.mango {
  background: url('/images/mango.png');
}

Map 데이터 형식
// @each $key변수, $value변수 in 데이터{}
$fruit-data; (
  apple: korea,
  banana: china,
  orange: japan,
);
@each $fruit, $country in $fruit-data {
  .box-#{fruit} {
    background: url("/images/#{$country}.png")
  }
}
// css
.box-apple {
  background: url('/images/korea.png');
}
.box-orange {
  background: url('/images/china.png');
}
.box-banana {
  background: url('/images/japan.png');
}

참고

https://heropy.blog/2018/01/31/sass/
https://blueshw.github.io/2019/10/27/scss-module-system/