추적:

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- tech:sass [2021/08/13 22:34] – 108.162.245.125
+++ tech:sass [2021/08/31 19:12] (현재) – 이전 판으로 되돌림 (2021/08/13 22:21) 103.22.201.161
@@ 줄 1: / 줄 1: @@
-{{tag> sass Scss css 컴파일러}}
+{{tag> sass }}
-======  Sass (SCSS)  ======
+======  Sass  ======
-웹표준에서는 CSS만 동작함.
+웹에서는 CSS만 동작합니다.
-Sass 는 [[CSS]]의 확장이다.
+ 사스는 CSS의 확장이다. CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다.
+전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.
+단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다.
+전처리기로 작성하고 CSS로 컴파일해서 동작시킨다.
-SASS는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
-단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 [[#컴파일러|컴파일(Compile)]]함.
-> :!: Sass 로 작성하고 CSS로 컴파일해서 동작시킨다.
-=====SASS vs. SCSS=====
-Sass는 SASS 표기법(.sass)과 SCSS 표기법(.scss)이 있다. 이전 버전에서는 SASS 표기법이 기본 표기법이었으나 Sass 3.0부터 CSS 친화적인 SCSS（Sassy CSS） 표기법이 기본 표기법이 되었다.
 Sass와 SCSS의 기능은 동일하고 SCSS 문법만 다르다. [[https://heropy.blog/2018/01/31/sass/|문법 비교 참조]]
-=====특징=====
-CSS와 비교하여 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
-  * 변수의 사용
-  * 조건문과 반복문
-  * Import
-  * Nesting
-  * Mixin
-  * Extend/Inheritance
 =====컴파일러=====
   * [[https://github.com/sass/node-sass|node sass]] - 바탕이 되는 [[https://sass-lang.com/libsass|LibSass]] 가 개발중단됨.
   * [[https://sass-lang.com/dart-sass|Dart Sass]]
-=====문법=====
-[[https://velopert.com/1712|Sass 강좌 – 한 눈에 보기]]