01. Sass의 소개, 설치와 간단한 명령어 사용법

https://poiemaweb.com/sass-basics

Sass - Basics | PoiemaWeb

 

1. 소개

 

CSS pre-processor로서 CSS의 한계와 단점을 보완하여, 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

 

기능

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

 

장점

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

---

2. 설치

 

브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다. 따라서 Sass 환경의 설치가 필요하다.

 

bash

 

$ npm install -g sass

 

---

3. 명령어

 

bash

 

$ sass --version

 

 

---

트랜스파일링(컴파일)

 

sass-project 디렉터리를 생성하고 트랜스파일링할 foo.scss 파일을 아래와 같이 생성하자.

 

foo.scss

$site_max_width: 960px;

$font_color: #333;

$link_color: #00c;

$font_family: Arial, sans-serif;

$font_size: 16px;

$line_height: percentage(20px / $font_size);

body {

  color: $font_color;

  // Property Nesting

  font: {

    size: $font_size;

    family: $font_family;

  }

  line-height: $line_height;

}

#main {

  width: 100%;

  max-width: $site_max_width;

}

 

트랜스파일링할 SCSS 파일의 경로와 트랜스파일링 후 생성될 css 파일의 경로를 지정한다.

 

bash

## 해당 SCSS 파일 위치로 이동

$ cd sass

## foo.scss를 트랜스파일링해서 foo.css를 생성

$ sass foo.scss:foo.css

 

foo.scss 파일이 트랜스파일링되어 다음과 같이 foo.css 파일이 생성된다.

 

---

 

사용 중인 '/' 연산자는 calc() 함수 외부에서의 사용이 deprecate 됨, Dart Sass 2.0.0부터는 제거될 예정

대신 math.div(20px, $font_size) 또는 calc(20px / $font_size)와 같은 방식을 사용하는 것이 권장

 

다음과 같이 수정

$line_height: percentage(calc(20px / $font_size));

 

 

다시 사용하면 오류가 발생하지 않음

$ sass foo.scss:foo.css

---

 

특정 디렉터리 내의 모든 scss 파일을 css 파일로 일괄 트랜스파일링해서 지정한 디렉터리에 저장하려면 다음과 같이 인풋 디렉터리와 아웃풋 디렉터리를 지정한다.

## sass input-directory-path:output-directory-path

$ sass src/sass:dist/css

 

예를 들어 다음과 같은 구조에 대해

project/

├── src/

│   └── sass/

│       ├── main.scss

│       ├── variables.scss

│       └── components/

│           ├── button.scss

│           └── form.scss

└── dist/

    └── css/

 

4개의 scss 가 존재할때

// main.scss

@import 'variables';

@import 'components/button';

@import 'components/form';

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

}

// variables.scss

$primary-color: #3498db;

$secondary-color: #2ecc71;

// components/button.scss

.button {

    background-color: $primary-color;

    color: white;

    padding: 10px 20px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

// components/form.scss

.form-input {

    width: 100%;

    padding: 8px;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    border-radius: 3px;

    box-sizing: border-box;

}

 

 

bash

$ sass src/sass:dist/css

 

 

다음과 같이 찾지를 못해서

 

button.scss 를 수정해주었다. 

// components/button.scss

@import '../variables.scss';

.button {

    background-color: $primary-color;

    color: white;

    padding: 10px 20px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

 

main : 메인 css 

variables : 변수 저장

button : 버튼 css

form : 폼 css

 

로 나누어, 각각 작성 할 수 있고 생성된 main.css 를 보게되면

 

.button {

  background-color: #3498db;

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 5px;

  cursor: pointer;

}

.form-input {

  width: 100%;

  padding: 8px;

  margin-bottom: 10px;

  border: 1px solid #ccc;

  border-radius: 3px;

  box-sizing: border-box;

}

body {

  font-family: Arial, sans-serif;

  background-color: #f0f0f0;

}

/*# sourceMappingURL=main.css.map */

 

main.scss 에는 body 밖에 없었지만 button 과 form 의 scss 내용이 합쳐져서 main.css 에 통합된 것을 알 수 있음!! 

---

 

npm scripts를 사용하면 좀 더 간단히 명령어를 사용할 수 있다.

프로젝트 디럭터리에 아직 package.json이 없다면 다음 명령으로 package.json을 생성한다.

$ npm init -y

 

생성된 package.json을 다음과 같이 수정한다.

{

    "name": "sass-project",

    "version": "1.0.0",

    "description": "",

    "main": "index.js",

    "scripts": {

      "build:sass": "sass src/sass:dist/css"

    },

    "keywords": [],

    "author": "",

    "license": "ISC"

  }

 

실행

$ npm run build:sass

 

---

 

3.3. style 

scss 파일을 트랜스파일링하여 css 파일을 생성할 때 2가지 스타일 중 하나를 선택할 수 있다.

 

expanded

표준적인 스타일의 css 파일이 생성된다. 기본값

$ sass --style expanded src/sass:dist/css

# 위와 같은 결과가 만들어진다.

$ sass src/sass:dist/css

 

compressed

가능한 빈공간이 없는 압축된 스타일의 css 파일이 생성된다.

$ sass --style compressed src/sass:dist/css

 

파일 크기 감소 / 로딩 속도 향상 / SEO 개선 / 보안? / 최적화

---

3.4. watch 

watch 옵션은 scss 파일의 변경을 감지하여 변경될 때마다 scss 파일을 트랜스파일링하여 css 파일을 자동 업데이트한다.

## watch src/sass -> dist/css

$ sass --watch src/sass:dist/css

 

---

 

4. SASS vs SCSS 

 

Sass 3.0부터 CSS 친화적인 SCSS（Sassy CSS） 표기법이 기본 표기법이 되었다.

 

 

 

 

https://chatgpt.com/