scss

CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다.

이에 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.

SCSS 설치 및 컴파일

컴파일러 설치는 이 블로그를 참고했습니다.

출처: https://inpa.tistory.com/entry/SCSS-💎-SassSCSS-란-설치-및-컴파일 [👨‍💻 Dev Scroll]

SCSS 파일을 만들때 _을 넣는건 css로 변환되지 않길 원하는 것들을 저장함

&

변수 선언(var, const, let) 과 같은 개념이라고 할 수 있다.

// _variables.scss
$bg: #e7473c;
$title: 32px;

h2 {
  color: $bg;
}

@mixin

일종의 함수와 같은 기능을 한다.

// _mixins.scss
@mixin sexyTitle {
  color: blue;
  font-size: 30px;
  margin-bottom: 12px;
}

@mixin link($color) {
  text-decoration: none;
  display: block;
  @if $color == 'odd' {
    color: blue;
  } @else {
    color: red;
  }
}

// styles.scss
@import '_mixins';
h1 {
  @include sexyTitle();
}

a {
  @include link($linkColor);
}

a:nth-child(odd) {
  @include link('odd');
}

a:nth-child(even) {
  @include link('even');
}

extends

//_buttons.scss
%button {
  font-family: inherit;
  border-radius: 7px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 10px;
  background-color: peru;
  color: white;
  font-weight: 500;
}

// styles.scss
@import '_buttons';
a {
  @extend %button;
}

button {
  @extend %button;
  border: none;
}

Awesome Mixins and Conclusions

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

@mixin sexyTitle {
  color: blue;
  font-size: 30px;
  margin-bottom: 12px;
}
@mixin link($color) {
  text-decoration: none;
  display: block;
  @if $color == 'odd' {
    color: blue;
  } @else {
    color: red;
  }
}
@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;
    }
  }
}

// styles.scss
@import '_mixins';
a {
  @include responsive {
    text-decoration: none;
  }
}

여기에서 @content는 @include responsive에 적은 코드들입니다.