SCSS(SASS) 정리 2-2

August 23, 2021

SCSS(SASS)는 어떤 기능들을 지원할까? 2-2

이전 포스팅에 이어 SCSS(SASS)에서 제공하는 기능 및 활용 방법에 대해 알아보겠습니다.

재활용(Mixins)

Mixins 란?

SASS Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 아주 훌륭한 기능입니다.
약간의 Mixin(믹스인)으로 다양한 스타일 만들기가 가능합니다.
쉽게 말해 스타일을 만들어서(@mixin), 사용 혹은 포함(@include)하는 것이라고 생각하면 됩니다.

@mixin

기본적인 Mixin 선언은 아주 간단합니다.
@mixin 지시어를 이용하여 스타일을 정의하는 것이 전부입니다.

SCSS :

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

@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

SASS :

=믹스인이름
  스타일;

=large-text
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;

선택자 포함이나 상위(부모) 요소 참조(&)도 가능합니다.

SCSS :

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;
  &::after {
    content: "!!";
  }

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

@include

선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요합니다.

SCSS :

@include 믹스인이름;

h1 {
  @include large-text;
}

div {
  @include large-text;
}

SASS :

+믹스인이름

h1
  +large-text
div
  +large-text

Compiled to:

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

div {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

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

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

인수(Arguments)

Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다.
때문에 하나의 Mixin으로 다양한 결과를 만들 수 있습니다.

SCSS :

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

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

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

SASS :

=믹스인이름($매개변수)
  스타일

+믹스인이름(인수)

Compiled to:

CSS :

.box1 {
  border: 1px dashed red;
}
.box2 {
  border: 4px dashed blue;
}

인수(Argument)는 기본값(default value)을 가질 수 있습니다.
@include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용됩니다.

SCSS :

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

@mixins dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}

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

Compiled to:

CSS :

.box1 {
  bolder: 1px dashed black;
}
.box2 {
  bolder: 4px dashed black;
}

키워드 인수(Keyword Arguments)

Mixin에 전달할 인수를 입력할 때 명시적으로 키워드(변수)를 입력하여 작성이 가능합니다.
별도의 인수 입력 순서를 필요로 하지 않아 편리하게 작성이 가능합니다.
단, 작성하지 않은 인수가 적용될 수 있도록 기본값을 설정해 주는 것이 좋습니다.

SCSS :

@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($p: fixed, $t: 30px, $r: 40px);
}

Compiled to:

CSS :

.absolute {
  position: absolute;
  bottom: 10px;
  right: 20px;
}

.fixed {
  position: fixed;
  top: 30px;
  right: 40px;
}

가변 인수(Variable Arguments)

입력할 인수의 개수가 불확실한 경우 사용합니다.
매개변수 뒤에 ...을 붙여줍니다.

SCSS :

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

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

// 인수를 순서대로 전달받다가, 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")
  );
}

Compiled to:

CSS :

div {
  width: 100px;
  height: 200px;
  background: url("/images/a.png") no-repeat 10px 20px;
  background: url("/images/a.png") no-repeat;
  background: url("/images/a.png");
}

위 예제는 인수를 받는 매개변수에 ...을 사용하여 가변인수를 활용했습니다.
반대로 가변인수를 전달할 값으로 사용이 가능합니다.

SCSS :

@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: 300, family: monospace)...);
}

Compiled to:

CSS :

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

@content

선언된 Mixin에 @content가 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달 할 수 있습니다.
@content를 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있습니다.

SCSS :

@mixin 믹스인이름() {
  스타일;
  @content;
}

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

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

Compiled to:

CSS :

.icon1::after {
  content: "/images/icon.png";
}

.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

Mixin에게 전달된 스타일 블록은 Mixin의 범위가 아닌 스타일 블록이 정의된 범위에서 평가됩니다.
즉, Mixin의 매개변수는 전달된 스타일 블록 안에서 사용되지 않고 전역 값으로 해석됩니다.
전역 변수(Global variables)와 지역 변수(Local variables)를 생각하면 조금 더 쉽게 이해할 수 있습니다.

SCSS :

$color: red;

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

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

Compiled to:

CSS :

div {
  color: red;
  background-color: blue;
  border-color: blue;
}

확장(Extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우 선택자의 확장 기능을 사용합니다.

SCSS :

@extend 선택자;

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}

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

Compiled to:

CSS :

.btn,
.btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}

.btn-danger {
  background: red;
}

예제의 결과를 보면 ,로 구분하는 다중 선택자(Multiple Selector)가 만들어집니다.
사실 @extend는 다음과 같은 문제를 고려해야 합니다.

내 현재 선택자(예제의 .btn-danger)가 어디에 첨부될 것인가?
원치 않는 부작용이 초래될 수도 있는가?
이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가?

결과적으로 확장(Extend) 기능은 무해하거나 유익할 수도 있지만 그만큼 부작용을 가지고 있습니다.
따라서 확장은 사용을 권장하지 않으며, Mixin을 대체 기능으로 사용하는 것이 좋습니다.

함수(Functions)

자신의 함수를 정의하여 사용할 수 있습니다.
함수와 Mixins는 거의 유사하지만 반환되는 내용이 다릅니다.
Mixin은 지정한 스타일(style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환합니다.

// Mixins
@mixin 믹스인이름($매개변수) {
  스타일;
}

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

사용하는 방법에도 차이가 있습니다.
Mixin은 @include 지시어를 사용하는 반면, 함수는 함수이름으로 바로 사용 가능합니다.

// Mixins
@include 믹스인이름(인수);

// Functions
함수이름(인수)

SCSS :

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

.box-group {
  width: $max-width:

  .box1 {
    width: colunms(); // 1
  }

  .box2 {
    width: colunms(8);
  }

  .box3 {
    width: colunms(3);
  }
}

Compiled to:

CSS :

.box-group {
  /* 총 너비 */
  width: 980px;
}

.box-group .box1 {
  /*총 너비의 약 8.3% */
  width: 81.66667px;
}

.box-group .box2 {
  /*총 너비의 약 66.7% */
  width: 653.33333px;
}

.box-group .box3 {
  /*총 너비의 약 25% */
  width: 245px;
}

함수는 @include같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in-Functions)의 이름이 충돌할 수 있습니다.
따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋습니다.

// 내가 정의한 함수
@function extract-red($color) {
  // 내장 함수
  @return rgb(red($color), 0, 0);
}

div {
  color: extract-red(#d55a93);
}

if(함수)

조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환합니다.
조건부 삼항 연산자(conditional ternary operator)와 비슷합니다.

조건의 값이 true이면 표현식1을, 조건의 값이 false이면 표현식2를 실행합니다.

if(조건, 표현식1, 표현식2)

SCSS :

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

Compiled to:

CSS :

div {
  width: 555px;
}

@if 지시어

@if 지시어는 조건에 따른 분기 처리가 가능하며, if문(if statements)과 유사합니다.
같이 사용할 수 있는 지시어는 @else @else if가 있습니다.
추가 지시어를 사용하면 좀 더 복잡한 조건문 작성이 가능합니다.

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

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

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

조건에 ()는 생략이 가능합니다.

$bg: true;
div {
  @if $bg {
    background: url("/images/a.jpg");
  }
}

SCSS :

$color: orange;
div {
  @if $color == strawberry {
    color: #fe2e2e;
  } @else if $color == orange {
    color: #fe9a2e;
  } @else if $color == banana {
    color: #ffff00;
  } @else {
    color: #2a1b0a;
  }
}

Compiled to:

CSS :

div {
  color: #fe9a2e;
}

조건에는 논리 연산자 and, or, not을 사용할 수 있습니다.

SCSS :

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

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

Compiled to:

CSS :

div {
  width: 200px;
  height: 800px;
}

Sass의 내장 함수 unitless()는 숫자에 단위가 있는지 여부를 반환합니다.

SCSS :

@mixin pCenter($w, $h, $p: absolute) {
  @if $p ==
    absolute or
    $p ==
    fixed
    // or not $p == relative
    // or not $p == static

  {
    width: if(unitless($w), #{$w}px, $w);
    height: if(unitless($h), #{$h}px, $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);
}

Compiled to:

CSS :

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

@if는 반응형 웹을 제작할 경우에도 활용할 수 있습니다.

$breakpoints: (
  "mobile": (
    min-width: 320px,
  ),
  "tablet": (
    min-width: 768px,
  ),
  "tablet-big": (
    min-width: 970px,
  ),
  "desktop": (
    min-width: 1024px,
  ),
  "desktop-medium": (
    min-width: 1200px,
  ),
  "desktop-large": (
    min-width: 1440px,
  ),
  "desktop-extra-large": (
    min-width: 1920px,
  ),
  "portrait": portrait // 세로 모드
  "landscape": landscape // 가로 모드,
) !default;

@mixin respond-to($name) {
  @if map-has-key($breakpoints, $name) {
    @media only all and #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  } @else if {
    @if map-has-key("portrait") {
      @media (orientation: portrait) {
        @content;
      }
    }
  } @else if {
    @if map-has-key("landscape") {
      @media (orientation: landscape) {
        @content;
      }
    }
  } @else {
    @warn "`#{$breakpoint}`에서 값을 검색할 수 없습니다. `$breakpoints` 맵에 정의되어 있는지 확인하십시오.";
  }
}

if를 사용하여 breakpoints에 해당 name이 있는지 없는지 확인한다.
만약 있으면 @media~ 부분을 실행하고 없으면 @warn으로 경고 메시지를 보여준다.
inspect 함수를 사용하면 따옴표("")가 없는 값을 반환받을 수 있다.
map-get은 $breakpoints map에서 원하는 key를 매개변수로 입력하고 값을 반환받는다.
@content는 mixin을 사용할 때 안에 넣은 css 코드들이 그대로 적용된다.

실행하면 아래 예제와 같은 결과를 얻을 수 있습니다.

SCSS :

@include respond-to("tablet") {
  font-weight: 900;
  font-size: 28px;
}

Compiled to:

CSS :

@media only all and (max-width: 768px) {
  font-weight: 900;
  font-size: 28px;
}

@for

@for는 스타일을 반복적으로 출력합니다.
for 문과 유사합니다.

@for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다.
두 형식은 종료 조건이 해석되는 방식이 다릅니다.

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

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

SCSS :

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

Compiled to:

CSS :

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

to는 주어진 값 직전까지만 반복해야할 경우 유용할 수 있습니다.
그러나 :nth-child()에서 특히 유용하게 사용되는 @for는 일반적으로 through를 사용하길 권장합니다.

@each

@each는 List와 Map 데이터를 반복할 때 사용합니다. for in 문과 유사합니다.

@each $변수 in 데이터 {
  // 반복 내용
}

SCSS :

// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

Compiled to:

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

Index 값이 필요하다면 다음과 같이 index() 내장 함수를 사용할 수 있습니다.

SCSS :

$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    $i: index($fruits, $fruit);
    li:nth-child(#{$i}) {
      left: 50px * $i;
    }
  }
}

Compiled to:

CSS :

.fruits li:nth-child(1) {
  left: 50px;
}
.fruits li:nth-child(2) {
  left: 100px;
}
.fruits li:nth-child(3) {
  left: 150px;
}
.fruits li:nth-child(4) {
  left: 200px;
}

동시에 여러 개의 List 데이터를 반복 처리할 수도 있습니다.
단, 각 데이터의 Length가 같아야 합니다.

SCSS :

$apple: (apple, korea);
$orange: (orange, china);
$banana: (banana, japan);

@each $fruit, $country in $apple, $orange, $banana {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

Compiled to:

CSS :

.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

Map 데이터를 반복할 경우 하나의 데이터에 두 개의 변수가 필요합니다.

@each $key변수, $value변수 in 데이터 {
  // 반복 내용
}

SCSS :

$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan,
);

@each $fruit, $country in $fruits-data {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

Compiled to:

CSS :

.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

@while

@while은 조건이 false로 평가될 때까지 내용을 반복합니다.
while 문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있습니다.
사용을 권장하지 않습니다.

@while 조건 {
  // 반복 내용
}

SCSS :

$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 2px * $i;
  }
  $i: $i - 2;
}

Compiled to:

CSS :

.item-6 {
  width: 12px;
}
.item-4 {
  width: 8px;
}
.item-2 {
  width: 4px;
}

내장 함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다.
모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다.

Sass Built-in Modules에서 모든 내장 함수를 확인할 수 있습니다.

[]는 선택 가능한 인수(argument)입니다.
Zero-based numbering을 사용하지 않습니다.

색상(RGB / HSL / Opacity) 함수

mix($color1, $color2) : 두 개의 색을 섞습니다.
lighten($color, $amount) : 더 밝은색을 만듭니다.
darken($color, $amount) : 더 어두운색을 만듭니다.
saturate($color, $amount) : 색상의 채도를 올립니다.
desaturate($color, $amount) : 색상의 채도를 낮춥니다.
grayscale($color) : 색상을 회색으로 변환합니다.
invert($color) : 색상을 반전시킵니다.
rgba($color, $alpha) : 색상의 투명도를 변경합니다.
opacify($color, $amount) / fade-in($color, $amount) : 색상을 더 불투명하게 만듭니다.
transparentize($color, $amount) / fade-out($color, $amount) : 색상을 더 투명하게 만듭니다.

문자(String) 함수

unquote($string) : 문자에서 따옴표를 제거합니다.
quote($string) : 문자에 따옴표를 추가합니다.
str-insert($string, $insert, $index) : 문자의 index번째에 특정 문자를 삽입합니다.
str-index($string, $substring) : 문자에서 특정 문자의 첫 index를 반환합니다.
str-slice($string, $start-at, [$end-at]) : 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출합니다.
to-upper-case($string) : 문자를 대문자를 변환합니다.
to-lower-case($string) : 문자를 소문자로 변환합니다.

숫자(Number) 함수

percentage($number) : 숫자(단위 무시)를 백분율로 변환합니다.
round($number) : 정수로 반올림합니다.
ceil($number) : 정수로 올림합니다.
floor($number) : 정수로 내림(버림)합니다.
abs($number) : 숫자의 절대 값을 반환합니다.
min($numbers…) : 숫자 중 최소 값을 찾습니다.
max($numbers…) : 숫자 중 최대 값을 찾습니다.
random() : 0 부터 1 사이의 난수를 반환합니다.

List 함수

모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환합니다.
모든 List 내장 함수는 Map 데이터에서도 사용할 수 있습니다.

length($list) : List의 개수를 반환합니다.
nth($list, $n) : List에서 n번째 값을 반환합니다.
set-nth($list, $n, $value) : List에서 n번째 값을 다른 값으로 변경합니다.
join($list1, $list2, [$separator]) : 두 개의 List를 하나로 결합합니다.
zip($lists…) : 여러 List들을 하나의 다차원 List로 결합합니다.
index($list, $value) : List에서 특정 값의 index를 반환합니다.

Map 함수

모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환합니다.

map-get($map, $key) : Map에서 특정 key의 value를 반환합니다.
map-merge($map1, $map2) : 두 개의 Map을 병합하여 새로운 Map를 만듭니다.
map-keys($map) : Map에서 모든 key를 List로 반환합니다.
map-values($map) : Map에서 모든 value를 List로 반환합니다.

관리(Introspection) 함수

variable-exists(name) : 변수가 현재 범위에 존재하는지 여부를 반환합니다.(인수는 $없이 변수의 이름만 사용합니다.)
unit($number) : 숫자의 단위를 반환합니다.
unitless($number) : 숫자에 단위가 있는지 여부를 반환합니다.
comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.

참고 자료(References)

http://sass-lang.com/documentation
https://www.sitepoint.com/sass-basics-operators/
https://sass-guidelin.es/ko/
http://www.thesassway.com/
https://heropy.blog/2018/01/31/sass/

SCSS(SASS)