SASS

지니씨·2023년 2월 27일
0

프론트엔드

목록 보기
61/87

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

SASS 문법

미디어 쿼리

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

@charset "utf-8";

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

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

/* Tablet & 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

dart sass

https://sass-lang.com/dart-sass

Sass 모듈 시스템

LibSass와 차별화된 Dart sass 의 대표적인 신규 기능
(https://github.com/sass/sass/blob/main/accepted/module-system.md)

전역적인 @import 규칙 대신 파일을 모듈로 로드하여 지역적으로 스타일을 설계할 수 있는 @use, @forward 등의 새로운 규칙들이 등장했습니다.

@import (deprecated)
모든 것들을 전역으로 가져오기 때문에 css파일이 꼬엿을 경우 오류를 찾기 어렵다.

@use
@import의 단점을 개선하고자 나온 문법
재사용하고자 하는 파일은 쓰고자하는 파일에서 계속 @use 로 불러야 한다. 여러군데에서 쓰이는 파일을 하나에 모아 @forward 선언해서 한 번에 사용 가능하게 처리하면 편리.

@forward
@use한 파일 에서 @use한 파일 안에 있는 @mixin 필요한 경우 사용

profile
하루 모아 평생 🧚🏻

0개의 댓글