/sass와 scss의 차이점은?
기본적으로 안에 들어있는 내용은 같지만 작성하는 문법에서 약간의 차이가 있습니다.
scss는 css문법과 완벽하게 호환이 되는 그런 구문을 가지고 있습니다.
① 간단한 차이는 { } (중괄호)와 ; (세미콜론)의 유무입니다.
*sass는 중괄호와 세미콜론을 가지고 있지 않습니다.
② 또 다른 차이는 Mixins('믹스인'은 재사용 가능한 기능을 만드는 방식을 의미합니다.)
sass는 = 와 + 기호로 Mixins 기능을 사용했다면
scss는 @mixin과 @include로 기능을 사용했습니다.
컴파일 방법
scss는 웹에는 직접 동작할 수 없습니다.
최종으로는 표준 css로 동작해야 하며, 전처리기로 작성 후 css로 컴파일해야 합니다.
간단한 scss 코드는 컴파일러를 설치하는 것이 부담될 수 있기 때문에
https://www.sassmeister.com/를 추천드립니다.
페이지 접속 후 sass나 scss 문법으로 코딩하면 css문법으로 실시간으로 변환됩니다.
두 번째는 Parcel입니다.
번들러 Parcel은 굉장히 단순하게 컴파일할 수 있습니다.
1. 먼저 Parcel 설치
$ npm install -g parcel-bundler
2. 프로젝트에 sass 컴파일러(node-sass)를 설치
$ npm install --save-dev node-sass
3. html에 link로 scss파일을 연결해주세요.
<link rel="stylesheet" href="scss/main.scss">
$ parcel index.html
or
$ parcel build index.html
'웹 > HTML & CSS' 카테고리의 다른 글
[CSS] 간단하게 SVG 적용하는 법 (0) | 2020.05.27 |
---|---|
[CSS] clear 속성, float 속성, float 해제하는 방법(가상요소) (1) | 2020.04.19 |
[HTML] label/input 태그 정리 (웹 접근성) (2) | 2020.03.18 |
[HTML] form 태그 속성 정리 (0) | 2020.03.17 |
[HTML] 웹 표준, 웹 접근성, 웹 호환성 용어 정리 (0) | 2020.03.16 |