⭐️ SCSS ⭐️

CSS 문법에 선택자 중첩, 조건문, 반복문, 단위 연산 등의 기능을 사용하여 스타일링 작성.
웹에서는 직접 동작하지 않는다 -> 웹에서 동작 가능하도록 표준의 CSS 로 컴파일하는 과정이 필요하다.
전처리기로 작성 >> CSS 로 컴파일 >> 웹에서 동작

🔥 SASS 와 SCSS 의 차이점 🔥

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새로 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.
-> SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다

차이 1

{}(중괄호)와 ;(세미콜론)의 유무

Sass

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

Sass는 선택자의 유효범위 (자식 요소) 를 '들여쓰기'로 구분하고, SCSS 는 {} 로 구분한다.

SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

차이 2

Mixins (재사용 가능한 방식) 사용법

Sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

compile...
CSS

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

사용하는 Data Types

• Numbers 👉🏻 1, 10px, 2em etc ...
• Strings 👉🏻 bold, "/img/me.png", center etc ...
• Colors 👉🏻 red, #FFFFFF, rgba(240, 240, 80, .5) etc ...
• Booleans 👉🏻 true, false
• Nulls 👉🏻 null
• Lists 👉🏻 (apple, tomato), teal red 👉🏻 () 선택
• Maps 👉🏻 (apple: a, orange: o) 👉🏻 () 필수

🔥 사용법 🔥

🌈 중첩 선택 🌈

SCSS

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

compiled to CSS

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

🌈 상위 선택자 참조 🌈

SCSS

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

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

compiled to CSS

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

SCSS

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

compiled to CSS

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

🌈 중첩 속성 🌈

font-(weight, size, color ... etc), margin-(top, right ... etc) 와 같이 동일한 이름 뒤에 오는 속성들 통일

SCSS

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
}

compiled to CSS

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
}

🌈 변수 사용 🌈

반복하여 사용할 값을 변수로 저장 $변수명: 값

SCSS

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

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

compiled to CSS

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

🌈 import (가져오기) 🌈

외부파일을 @import 로 가져오면 모두 단일 CSS 파일로 병합된다.
가져온 파일에서 정의된 모든 변수, Mixins 등을 사용 가능하다

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);

@import "hi.scss", "mainLayout.css";

🌈 매개변수 🌈

SCSS

@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}
>
.box1 { @include dash-line(2px, gray); }
.box2 { @include dash-line(4px); }

compiled to CSS

.box1 {
  border: 2px dashed gray;
}
.box2 {
  border: 4px dashed black;
}

매개변수로 값을 전달하지 않을 경우 기본값 적용

🌈 확장 🌈

특정 선택자가 다른 선택자의 모든 스타일을 공유할 경우
❗️ 현재 선택자가 어디에 첨부될지 주의 ❗️

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

🌈 기본 연산 🌈

• +
• -
• * ❗️ 하나 이상 값이 Number 인 경우 사용 가능
• \/ ❗️ 분모가 Number, 값이나 그 일부가 변수로 사용되는경우, /연산 값이 () 로 묶여있는 경우, 값이 다른 연산식에 포함되어있는 경우 사용 가능
• \%
• 비교연산 ==, !=, <, >, <=, >=
• 논리연산 and, or, not

👉🏻 상대적 연산

width: 50% - 20px;

단위 에러

width: calc(50% - 20px);

연산 가능

출처 : heropy 님