📌 CSS & Sass(Scss)
📘 CSS (Cascading Style Sheets)
프론트 업무를 하면서 CSS는 항상 빠질 수 없는 언어이다.
하지만 프로젝트가 커지고 작업이 많아질수록 불편함이 많아진다.
예를들면
1. 선택자(Selector)의 비효율적인 반복
2. 모든 것을 수동으로 변경해야 함
3. 중복코드가 많아 유지보수에 마이너스 요소
등등.. 사용할수록 단점들이 보이기 시작했다.
이런 단점들을 보완하고 웹앱의 효율성을 더 높여줄 수 있다.
사실 이러함에도 Sass(Scss) 즉, CSS전처리기 언어 를 사용하지 않아도 웹이 보여지는건 문제가 없었기 때문에 그동안 외면하고 CSS를 계속 사용했던 것 같다.
(컴파일도 할 줄 몰랐음...)
자! 그럼 본격적으로 Sass(Scss)가 무엇이고 어떻게 사용하는지 알아보자!
📌 Sass(Scss)
📙 Sass(Scss) - Syntactically Awesome StyleSheet
코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고,
개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어 입니다.
CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 라고 보면 됩니다.
CSS 전처리기(Preprocessor) 언어
전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등등.. 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.
어떻게 사용하나요 ??
전처리기 언어는 웹은 반드시 CSS언어만 동작시킬 수 있기 때문에 Sass(Scss)를 사용 후엔
반드시 CSS 언어로 컴파일 한 후 동작시킬 수 있습니다.
정리하자면, 전처리기 언어 즉, Sass(Scss)는 CSS의 대체 언어가 아닙니다.
Sass(Scss) 는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.
Sass(Scss) 는 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass(Scss) 통해 스타일시트를 생산하는 절차인 것이다.
⭕ Sass(Scss)의 장점
- CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
- 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
- CSS의 여러가지 한계적 단점을 보완하기 위하여 여러기능과 도구들을 제공한다.
- 변수의 사용
- 조건문과 반복문
- Import (모듈화)
- Nesting (선택자 반복 작성 줄여주는 기능)
- Mixin (함수 개념)
- Extend/Inheritance (확장/상속)
- 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
- 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
- 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
- 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.
❌ Sass(Scss)의 단점
- 전처리기 도구 필요
- 컴파일 시 시간 소요
📌Sass & Scss
이 둘은 위와 같이 문법 생김새는 다르지만 사실 같은 파생 언어라고 봐도 무방하다.
👇 SASS
Sass라는 이름에는 사실 두 가지 의미가 담겨 있다.
하나는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 또 다른 하나는 문법(구문)으로써의 의미다.
Sass 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 CSS 파일을 만들어낼 수 있는 것이다(이 작업을 컴파일이라고 한다).
👇 SCSS
Scss는 Sass의 3버전에서 등장한 언어이다.
하나는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 또 다른 하나는 문법(구문)으로써의 의미다.
Sass 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 CSS 파일을 만들어낼 수 있는 것이다(이 작업을 컴파일이라고 한다).
기존의 문법 방식이 너무 불편하고 익숙치 않아 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.
- SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
- SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식
SCSS 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS로 빌드할 수 있다.
Sass 공식 레퍼런스 조차도 SASS보다 CSS와 더 비슷한 SCSS를 선호한다.
그리고 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 압도적으로 더 많다.
💥 Sass vs SCSS 차이
- 확장자
둘은 엄연히 다른 파일이다. (*.scss / *.sass)확장자에따라 Saas 문법으로 익힐지 SCSS 문법으로 익힐지 다르게 된다.
- 구문스타일
Sass : 중괄호가 아닌 파이썬 같이 들여 쓰기를 사용
SCSS : CSS처럼 중괄호 { }와 세미콜론 ;을 사용
- 믹스인(mixin) 문법
mixin (재사용 가능한 기능을 만드는 방식) 이 있다.
SASS : = 로 선언하고 + 로 적용시킨다.
SCSS : @mixin 으로 선언하고 @include 로 적용시킨다.
Sass 대신 Scss 쓰자 ...
📌 SCSS 설치 & 컴파일 방법
앞서 말했듯이 Sass(SCSS) 코드 자체로는 웹에서 돌아가지 않는다.
웹에서는 css만 동작하기 때문에 C언어나 자바와 같이 Sass를 컴파일 해주어야 한다.
컴파일의 방법은 다음과 같이 다양하다.
- SassMeister
따로 프로그램을 설치하는 것이 아닌 온라인에서 scss 컴파일을 적용시킬 수 있는 방법으로, Sass 버전 설정도 다양하게 할 수 있으며, 실시간 변환을 확인 할 수 있다.
빠르게 변환이 필요할때 유용히 사용 할수있다.
- node-sass
1. nodejs 설치
2. node-sass 를 설치
3. 터미널에 컴파일 명령어를 입력한다
( --watch or -w 를 입력해주면 파일을 감시하여 저장시 자동으로 변경 사항을 컴파일 )
이 외에 모듈번들러(Webpack), 자동화빌드시스템 task runner(Gulp) 등이 사용된다.
