[웹키워드#1] HTML, CSS, SASS, SCSS

- SASS

"사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다."

 

SASS는 CSS를 만들어주는 언어로 Javascript처럼 특정 속성(ex. color, margin..)의 값(ex. #000, 3px...)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 기능을 가졌다. 

 

SASS는 Ruby언어로 만들어졌기에, 사용하기 위해서는 Ruby가 설치되어있어야한다. 아래 SASS 예제를 보면 더 쉽게 이해가 갈 것이다. (아래는 SASS 중 하나인 SCSS예제입니다. 자세한 설명은 이어서 하겠습니다.)

 

SCSS	CSS
$display-default:block; $color-point:#080; .lnk{       display:$display-default;       position:absolute;       left:5px;       color:$color-point; }	.lnk {       display: block;       position: absolute;       left: 5px;       color: #080; }

 

위와 같이 변수명으로 값을 설정해줄 수 있다. 또한 중첩, mixin (함수) 기능 등이 있어, 반복되는 것들이 있어도 더 이상 복사&붙여넣기를 할 필요가 없다. 

 

참고: 널리의 블로그 (http://wit.nts-corp.com/2015/01/09/2936)

 

- SCSS

 

SASS를 유지하는 사람들은 조금더 CSS에 친숙한 처리기를 만들기 위해, Sassy CSS라는 SCSS를 내놓았씁니다. 이들은 거의 동일한 기능을 가지고 있다. SASS는 중괄호, 세미콜론 같은 기호를 없애기 위해, 들여쓰기에 의존하며 이는 간결한 문장으로 이어진다.  하지만 이는 실제 CSS 문법과는 그 차이를 두고 있다. SCSS는 주로 CSS 올려진 작은 추가사항이므로, CSS에 친숙한 사람이라면 알아보기가 더 쉽다. 

 

아래는 SASS와 SCSS 각각의 장점이다. 

 

SASS	SCSS
More concise Easier to read Doesn't complain about missing semi-colons.	More expressive encourages proper nesting of rules More modular code with @extend Allow me to write better inline doc. Existing CSS tools often work with SCSS Integration with an existing SCSS codebase is much easier SCSS provided a much lower barrier to entry

 

참고: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

출처: https://fireburger.tistory.com/1 [불낙지버거의 블로그]