React style) SCSS

REFERENCE
SCSS 가이드

SCSS

• SASS는 CSS pre-processor로서, 복잡한 잡업을 쉽게 해주고 코드의 재활용성을 높여줌. (유지보수 용이)

변수

Variable 선언

• CSS에 변수 개념을 도입해줌.
• 변수 사용시 $기호를 사용.

$primary-color: #333;

body {
  background: $primary-color;
}

Variable Scope

• 특정 선택자에서 변수 선언시, 해당 선택자 안에서만 접근 가능.

플래그 (flag)

• 전역 변수 설정시 : !global
• 기본 값 설정시 (변수가 undefined나 null일때) : !default

플래그는 mixin 작성시 유용하게 사용됨.

body {
  $primary-color: #eee !global;
  $sub-color: #666 !default;
}

---

수학 연산자

+, -, /, *, % (사칙연산) 연산자와
==, != (비교) 연산자가 있음.

+, - 연산자의 경우에는 단위를 반드시 통일시켜야 함. (px, % 등)

만약 100% - 20px과 같은 연산을 해야할 때는 calc()함수를 이용함.

---

내장 함수

• darken() 함수 예시](https://codepen.io/velopert/pen/MewQvp)

---

중첩 (Nesting)

• 선언 중첩시킬 수 있음.
• 부모 선택자를 레퍼런스하려면 & 문자를 사용함.

  a {
  color: black;
  &:hover {
    color: gray;
  }
  &:visited {
    color: purple;
  }
  }

+) 중첩에서 벗어나려면 - 부모 선택자 밖에서도 사용하려면
@at-root 리텍티브를 사용.

.container {
  .child {
    color: blue;
  }
  @at-root .child {
    color: gray;
}

---

import

• @import 를 해서 특정 scss파일 을 불러올 수 있음.
• 참고로, 확장자를 붙이지 않아도 괜찮음.

partial 기능

• .scss 파일의 이름을 _(언더스코어)로 시작하면, css파일로 따로 컴파일 되지 않음.
• html에서 불러오지 않고, import만 되는 경우 이 기능을 사용.

---

extend

특정 선택자를 상속할 때 @extend 선택자 를 사용함.

.box {
  border: 1px solid gray;
}

.child-box {
  @extend .box;
  border: 1px solid green;
}

---

믹스인 (Mixin)

• extend와 비슷하지만, 함수처럼 argument(인수)를 받을 수 있음.
• 선언시 @mixin을 이용함.
• 사용할 때는 @include 를 이용함.

@mixin headline ($color, $size) {
  // 선언시 @mixin
  color: $color;
  font-size: $size;
}

h1 {
  // 사용시 @include 
  @include headline(green, 12px);
}

참고 - Mixin 응용 ver.

@mixin media($queryString){
      // 반응형 조건 받아옴
    @media #{$queryString} {
      // @content는 해당 선택자 내부의 내용을 받아옴
      @content;
    }
}

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

---

Function

• 빌트인 함수 뿐만 아니라, 임의 함수를 사용 가능.

• mixin은 style markup을 반환하고,
• function은 @return을 통해 값을 반환함.

ex>

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}