Dust

CSS Preprocessor

css 전(예비)처리기이며 sass, scss, less 등을 말한다

css가 동작하기 전 사용하는 기능으로 css의 불편함(불필요한 선택자, 연산 기능의 한계, 구문의 부재 외)을 전처리기로 상쇄한다

가독성과 재사용성을 높여주며 유지보수가 쉬움

선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산 등 표준 css 보다 많은 기능으로 편리하게 작성할 수 있음

css에는 없는 Mixin기능 사용

쉽게 말하면 css의 확장판 같은 느낌 !

사용방법

웹에서는 css만 동작

sass, less, stylus 외 전처리기는 직접 동작할 수 없기 때문에 전처리기로 코드 작성 후 css로 컴파일

컴파일방법

전처리기 종류마다 다르며 여러 방식을 제공함

컴파일러 사용

node.js

npm으로 설치

옵션 - 컴파일하려는 파일의 경로 - 컴파일 된 파일이 저장될 경로 순으로 입력해줌

위에 옵션 이라고 적었는데

옵션으로 --watch or -w 를 입력해주면 파일을 감시하여 저장시 자동으로 변경 사항을 컴파일 한다

저장 시 컴파일 확인 / css 파일에서도 확인할 수 있었다

다른 옵션 내용 확인

-w, --watch 디렉토리 또는 파일 감시
-r, --recursive 재귀적으로 디렉토리나 파일을 감시합니다.
-o, --output 출력 디렉토리
-x, --omit-source-map-url 출력에서 소스 맵 URL 주석 생략
-i, --indented-syntax stdin의 데이터를 sass 코드로 처리(scss와 비교)
-q, --quiet 오류가 발생한 경우를 제외하고 로그 출력을 억제합니다.
-v, --version 버전 정보를 출력합니다.
--output-style CSS 출력 스타일(중첩 | 확장 | 압축 | 압축)
들여 쓰기 --indent - 입력 유형  에 대한 출력 CSS를 (공간 | 탭)
--indent-width 들여쓰기 너비 ; 공백 또는 탭 수(최대값: 10)
--linefeed 줄바꿈 스타일(cr | crlf | lf | lfcr)
--source-코멘트 디버그 정보 포함 에서 출력을
--source-map 소스 맵을 내 보냅니다.
--source-지도-내용 퍼가기는 내용을 포함 에서 지도를
--source-map-embed sourceMappingUrl을 데이터 URI로 포함
--source-map-root 기본 경로, 있는 그대로 소스 맵 에서 내 보냅니다.
보기에 --include 경로 경로 에 대한 가져온 파일
--follow 심볼릭 링크된 디렉토리를 따릅니다.
--precision 십진수에 허용 되는 정밀도의 양
--error-bell 오류 발생 시 벨 문자 출력
--importer 사용자 지정 가져오기 도구가 포함된 .js 파일의 경로
--functions 사용자 정의 함수가 포함된 .js 파일의 경로
--help 사용 정보 인쇄

https://github.com/sass/node-sass#command-line-interface

Sass와 Scss의 차이점

Scss는 Sass의 3버전에서 css 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 css의 상위집합

Scss는 css와 거의 같은 문법으로 Sass 기능을 지원한다

sass

.main-tab
    background: white
    width: 100%
    height: 66px
    .main-tab ul
        display: flex
        width: 100%
        height: 100%
        .main-tab ul li
            width: 100%

- 선택자의 유효범위를 들여쓰기로 구분

- =와 + 기호로 Mixin 기능 사용(추가예정)

scss

.main-tab{
    background: white;
    width: 100%;
    height: 66px;
    .main-tab ul{
        display: flex;
        width: 100%;
        height: 100%;
        .main-tab ul li{
            width: 100%
        }
    }
}

- 선택자의 유효범위를 {}로 구분

- 가독성이 좋음(실무에서 많이 사용)

- 코드 한줄작성 가능

- css와 유사한 문법

- @Mixin와 @include 기능 사용(추가예정)

mixin 사용하기

/* 기본 */
@include mixin-name;
/* 인자가 있는 mixin */
@include mixin-name(value1, value2, value3, ..);

예시1

/* scss 작성시 */ 
@mixin red { 
  p { 
    color: red;
  }
} 
@include red;
/* css */
p {
  color: red;
}

예시2

/* scss 작성시 */ 
@mixin red {
  color: red; 
} 
p {
  @include red;
}
/* css */
p {
  color: red;
}

예시3

/* scss 작성시 */ 
@mixin space($margin, $padding) {
  margin: $margin; padding: $padding; 
} 
p {
  @include space(20px 0, 30px);
}
/* css */
p {
  margin: 20px 0; padding: 30px; 
}

예시4

/* scss 작성시 */
@mixin space($margin, $padding : 30px) {
  margin: $margin; padding: $padding; 
} 
p {
  @include space(20px 0);
  /* padding 고정값 */
}
/* css */
p {
  margin: 20px 0; 
  padding: 30px; 
  /* padding 고정값 */
}

참고

https://heropy.blog/2018/01/31/sass/