sass 조각모음집

SWP·2022년 5월 4일

확장자 module.scss??

SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식
SCSS가 CSS와의 호환성이 더 좋고 사용자도 많음
코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 합니다.
+코드 중복(Nesting)을 줄일 수 있다.
+변수를 사용 할 수 있기 때문에 자주 쓰는 색상이나 포지션을 설정하면 된다.
+조건문과 반복문
+Import (모듈)
+Mixin
+Extend/Inheritance 상속 및 확장도 할 수 있다.

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다.
https://gareen.tistory.com/39

문법 scss

// styles/mixins/_position.scss
@use 'sass:list';

@mixin position($position, $box-edge-values) {
  position: $position;
  $box-edge-values: _unpack-shorthand($box-edge-values);
  $offsets: (
    top: list.nth($box-edge-values, 1),
    right: list.nth($box-edge-values, 2),
    bottom: list.nth($box-edge-values, 3),
    left: list.nth($box-edge-values, 4),
  );

  @each $offset, $value in $offsets {
    @if _is-length($value) {
      #{$offset}: $value;
    }
  }
}

// styles/mixins/_flexbox.scss
$FLEX_MAP: (
  'around': space-around,
  'between': space-between,
  'center': center,
  'end': flex-end,
  'start': flex-start,
  'stretch': stretch,
);

@function _getFlexValue($key) {
  @return map-get($FLEX_MAP, $key);
}

@mixin flexbox($jc: center, $ai: center) {
  display: flex;
  align-items: _getFlexValue($ai);
  justify-content: _getFlexValue($jc);
}

@mixin inlineFlexbox($jc: center, $ai: center) {
  display: inline-flex;
  align-items: _getFlexValue($ai);
  justify-content: _getFlexValue($jc);
}

키워드