🔥 SCSS

SCSS는 Sassy CSS(멋진 CSS)의 줄임말이고 SASS는 Syntactically Awesome Style Sheets (문법적으로 짱 멋진 스타일시트)의 줄임말이다.
https://velog.io/@jch9537/CSS-SCSS-SASS

SCSS는 CSS Preprocessor로 compile을 통해 css로 변환되며 그 css를 통해 html 스타일을 꾸미게 된다.
compiler는 node-sass, ruby-sass 등이 있다.

(마찬가지로 익숙하지 않은 것들에 대해서 정리하는 방향으로 작성한다.)

1. @extend

style들을 구분해서 사용할 수 있도록 하는 기능
(참고로 파일명 앞에 _를 붙이는 이유는 compile 대상에서 제외하려고 붙이는 것이다.)

// _buttons.scss

// %를 정의할 키워드 앞에 붙혀서 사용
%button {
  font-familiy: inherit;
  margin: 10px 5px;
  padding: 5px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background-color: black;
  text-transform: uppercase;
}

...

// main.scss
@import "_buttons";

a {
  @extend %button;
  text-decoration: none;
}

2. mixins @content

@content 기능을 통해 block을 얻을 수 있고, 그로 인해 responsive scss를 쉽게 적용할 수 있다.

// _mixins.scss
$minIphone: 500px;
$maxIphone: 690px;
$minTablet: $minIphone + 1;
$maxTablet: 1120px;

@mixin responsive($device) {
  @if $device == "iphone" {
    @media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
      @content;
    }
  } @else if $device == "tablet" {
    @media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
      @content;
    }
  } @else if $device == "iphone-l" {
    @media screen and (max-width: $minIphone) and (max-width: $maxIphone) and (orientation: landscape) {
      @content;
    }
  } @else if $device == "ipad-l" {
    @media screen and (min-width: $minTablet) and (max-width: $maxTablet) and (orientation: landscape) {
      @content;
    }
  }
}

...

// main.scss
@import "_mixins";
h1 {
  color: red;
  @include responsive("iphone") {
    color: yellow;
  }
  @include responsive("iphone-l") {
    font-size: 60px;
  }
  @include responsive("tablet") {
    color: green;
  }
}

유용한 mixins들을 찾아서 개발한다면 더 수월하게 개발이 가능할 것이다.

예를 들면,

• bourbon: https://www.bourbon.io/
• sass mediaqueries : https://github.com/rafalbromirski/sass-mediaqueries

등등...