TIL 2022-02-22 SCSS

SCSS

 

CSS 전처리기인 SCSS에 대해서 찾아보니 자꾸 SASS 관련 페이지가 떠서 왜 그런지 의문이 들었는데,

 

SCSS와 SASS는 사실 구문의 표현방식만 다르지 동일한 기능을 지원해주는 것이었다!

 

SCSS

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

SASS

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

이렇게 SCSS는 기존의 Css를 작성하는 방식과 동일하고 SASS는 파이썬처럼 indent로 구분하고 세미콜론을 뒤에 붙이지 않는 것이 특징이다.

 

나는 SCSS 기준으로 공부하였다.(사실 동일함)

 

@use

 

@use는 다른 스타일시트에 있는 mixin, function, variable 등을 로드할떄 사용하는 rule이다.

@use 'foundation/code';
@use 'foundation/lists';

foundation/_lists.scss, foundation/_code.scss의 파일을 이런 식으로 불러올수 있으며

 

 

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}
/////////////////////////////////////////////
// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}
/////////////////////////////////////////////
// style.scss
@use "src/corners" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}

위처럼 use로 불러온 파일의 variable, mixin등을 '.'을 통해서 가져올수 있고 as 구문을 통해서 namespace를 정할수도 있고 *를 통해 전역 네임스페이스로 지정도 가능하다.(기본 namespace는 URL의 마지막 부분)

 

그러나 -나 _가 앞에 붙은($-radius) private variable은 밖에서 접근이 불가능하다.

 

 

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

변수들은 !default를 통해 기본 값을 설정할수 있고

 

@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

use를 with와 함께 사용하여 값을 바꿀수도 있다.

 

 

use... with를 쓰는건 매우 편하지만 유연하지 않아 복잡하게 use를 사용할때는 따로 configure하는 mixin과 실제 주입할 style mixin을 별도로 사용하는 것을 고려해봐야한다.

 

 

// _library.scss
$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {
  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}

@mixin configure($black: null, $border-radius: null, $box-shadow: null) {
  @if $black {
    $-black: $black !global;
  }
  @if $border-radius {
    $-border-radius: $border-radius !global;
  }
  @if $box-shadow {
    $-box-shadow: $box-shadow !global;
  }
}

@mixin styles {
  code {
    border-radius: $-border-radius;
    box-shadow: -box-shadow();
  }
}

@use 'library';

@include library.configure(
  $black: #222,
  $border-radius: 0.1rem
);

@include library.styles;

 

@forward

 

스타일시트를 load하는 것이 @use와 별반 차이가 없어보이는데, 차이점은 forward로 불러온 member들은 해당 모듈에서 못 불러옴!

 

SCSS SYNTAX

// src/_list.scss
@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// bootstrap.scss
@forward "src/list";

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

이렇게 있다고 할때 bootstrap 모듈에서는 list-reset이 접근이 불가능함! 접근하고 싶으면 use 다시 써줘야함

 

 

// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;

또한 hide를 통해 특정 멤버를 숨길수도, show를 통해 특정 멤버만 forward할수도 있다.

 

 

@mixin

믹스인은 재사용할 스타일들을 정의하게 해준다.

 

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

이렇게 mixin 스타일과 include를 통해서 스타일을 정의할수 있고

 

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

위와 같이 인자를 받을수도 있다.

 

마치 함수인데 리턴값으로 css 스타일을 내놓는 느낌

 

@function

 

@function은 말 그대로 함수다.

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

@extend

extend는 그대로 css를 확장해준다.

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

이렇게 작성해야되는걸

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

이렇게 줄일수 있다.

 

mixin+include와의 차이점이라면

extend만으로 해결할수 있을떄의 성능차이가 존재한다.

 

또한 실제 css에 mixin을 넣는 등의 불필요한 반복도 존재한다.

 

동적으로 스타일을 생성할 것이 아니라면 extend를 쓰는것이 바람직하다

 

https://csswizardry.com/2016/02/mixins-better-for-performance/

Mixins Better for Performance – CSS Wizardry – Web Performance Optimisation