rustandbone Developer

SASS

19 Jun 2023

230619 월 회고

인트로
오늘 SASS 입문을 시작했다. 관련 npm 설치하고 명령어 익히고 문법 익히는 시간 가졌다. 프로젝트 사이즈가 커지면 커질수록 아주 유용해질 듯 하다. 초반에 잘 잡고 가는 것도 좋을 듯 하다.

npm 설치

add-gitignore
git에 추가되면 안되는 파일들 자동 설정.

npm i -g add-gitignore
add-gitignore node,windows,osx,visualstuiocode

live-server

npm i live-server
npx live-server

rimraf
폴더 삭제

npm i rimraf
rimraf css build

npm-run-all
한 번에 여러 개 명령어 설정

npm i npm-run-all
run-p watch server

SASS 명령어

npm init -y
npm i sass
touch scss/style.scss

<!-- 지정 파일 컴파일 -->
npx sass scss/style.scss css/style.css

<!-- scss 폴더 전체를 컴파일 -->
npx sass scss:css

<!-- 압축 버전으로 생성(배포 시) -->
npx sass scss:css --style=compressed

<!-- source-map 미생성 -->
npx sass scss:css --no-source-map

<!-- 수정 사항 실시간 컴파일 -->
npx sass scss:css --watch

<!-- package.json -->
  "scripts": {
    "start": "run-p watch server",
    "sass": "sass scss:css",
    "compact": "npm run sass -- --style=compressed",
    "nomap": "npm run sass -- --no-source-map",
    "watch": "npm run sass -- --watch",
    "watch-compact": "npm run sass -- --watch --style=compressed",
    "clean": "rimraf css build",
    "server": "live-server --port=8080"
  },
// npm start => start 명령어에는 run 생략 가능
// npm run sass

SASS 변수 설정

@use "./themes/themes" as *;
@use "./themes/spacing" as *;
/* as로 별칭 줄 수 있음
*는 전역 변수 설정 */
@use "./utils/mixins" as mix;

/* 같은 변수명이 있을 경우 명시를 해줘야 함 */
body {
  background: $purple;
  color: mix.$purple;
}

/* themes 폴더 안에
_index.css 파일 있고, @forward 설정하면
폴더 이름만 적어도 됨*/
@use "./themes" as t;
@use "./utils" as u;

/* _index.scss */
@forward "themes";
@forward "spacing";

SASS mixin 설정(매개변수 설정 및 초기값 주기)

/* $jc, $fd 같이 매개변수 설정할 수 있음
: 으로 초기값 줄 수 있음 
@include 값 포함 가능 */
@mixin flexbox($jc: flex-start, $fd: row) {
  display: flex;
  flex-flow: $fd nowrap;
  justify-content: $jc;
  align-items: center;

  @include autoMargin;
}

@mixin autoMargin {
  margin-left: auto;
  margin-right: auto;
}

@mixin resetList {
  list-style-type: none;
  padding-left: 0;
}

SASS include

/* index.scss */
ul {
  @include resetList;
  /* 속성만 기입 시, 매개변수 순서대로 적용, 
  부분만 원할 시 변수 이름 추가하고 속성 적용 */
  @include flexbox($fd: column);
}

section {
  @include flexbox(center, column);
}

SASS 연산자

@use "sass:math";

@mixin container($context, $total) {
  width: $context;
  &--fluid {
    /* 연산자 나눗셈 적용 주의 */
    width: math.div($context, $total) * 100%;
  }
}

.wrapper {
  @include container(840px, 1200px);
}

.container {
  @include container(800px, 1000px);
}

Related posts