SASS

지니씨·2023년 2월 27일

Sass scss

프론트엔드

목록 보기

60/85

Sass란?
CSS 전처리
CSS로 컴파일되는 스타일시트 언어

SASS 문법

미디어 쿼리

https://naradesign.github.io/media-query.html

@charset "utf-8";

/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet &amp; Desktop Device */
@media all and (min-width:768px) {
    사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
    사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px) {
    사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

mixin, function

https://velog.io/@nemo/scss-mixin-function

@mixin
지정한 스타일 반환

// 선언
@mixin 이름($매개변수) {
	스타일 지정
}

// 호출
@include 이름(인수)

@function
값을 반환

// 선언
@function 함수이름($매개변수) {
	@return 값;
}

// 호출
함수이름(인수);

extend/inheritance

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

operators

@use "sass:math"

.container
  display: flex

article[role="main"]
  width: math.div(600px, 960px) * 100%

aside[role="complementary"]
  width: math.div(300px, 960px) * 100%
  margin-left: auto

.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

node sass -> dart sass 전환

https://smartstudio.tech/node-sass-to-dart-sass/

// node-sass 제거 후, sass (Dart Sass)를 설치
$npm uninstall node-sass && npm install sass

webpack 환경에서 sass-loader를 사용하는 경우,
Dart Sass를 지원하는 버전인지 확인하고 옵션 변경 필요

gulp 환경에서 gulp-sass를 사용하는 경우,
Dart Sass를 지원하는 버전인지 확인하고 옵션 변경 필요

node-sass를 제거하더라도 Node.js 버전에 의존적인 node-sass를 참조하는 플러그인이 남아있을 수 있다. Dart Sass를 지원하는 버전으로 업데이트하는 것이 제일 간단하지만, 경우에 따라 플러그인을 교체해야 하거나 node-sass와 공존해야 하는 이슈가 있다.

node-sass (Node.js 환경에서 사용할 수 있는 LibSass) deprecated