scss: scss의 개념과 특징, 환경 설정

Sass(Syntactically Awesome Style Sheets)

Scss(sassy css)

: css의 확장언어

SCSS와 Sass는 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재들 프로젝트가 복잡해지면서 Css의 가독성과 재사용성이 떨어지는 단점을 보완하고, 유지보수가 쉬워지도록 만들어준다.

 

SASS의 추가기능

1. 변수의 사용

2. 조건문과 반복문

3. Import

4. Nesting

5. Mixin

6. Extend/Inheritance

​

SASS 특징

1. CSS의 모든 문법을 지원하는 CSS 완전 호환성

2. 변수, 중첩, 믹스인 등 사용으로 언어 확장

3. 색상 등 값을 처리하는 다수의 유용한 함수

4. 라이브러리를 위한 제어 지시문과 같은 고급 기능

5. 형식을 잘 갖춘 4가지 CSS 출력 스타일

​

SASS 장점

1. css 보다 심플한 표기법으로 구조화하여 표현

2. 스킬 레벨이 다른 팀원들과의 작업시 발생하는 구문 수준 차이를 평준화

3. Mixin 기능으로 유지보수 편의성이 높아졌음

​

SASS와 SCSS 차이

SASS보다 SCSS가 뒤에 나왔고, SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장

SASS는 코딩을 간략화할 수 있는 장점이 있지만, CSS 친화적인 SCSS를 사용하는 경우가 더 많음

	SCSS	SASS	CSS
중괄호 {}	필요	불필요（공백 2문자 들여쓰기가 코드 블록을 의미)	필요
세미콜론 ;	필요	불필요	필요
: 뒤의 공백	불필요	필요	불필요
Mixin	@mixin	=	없음
Include	@include	+	없음
확장자	.scss	.sass	.css SASS 표기법은 보다 코딩을 간략화할 수 있는 장점이 있지만 CSS 친화적인 SCSS 표기법를 사용하는 경우가 더 많다. ​ ​
주석문	/* 여러줄 주석*/ // 한줄 주석	/* 한줄주석 // 여러줄 주석	/* */ scss의 // 은 css로 컴파일링 하면 삭제됨

 

 

환경설정

 

에디터 : visual studio

확장기능 : live server, material icon theme, scss to css, night owl(스킨)

설정 : mouse wheel zoom, multi cursor modifier- ctrlcmd

 

node-sass

1. node.js 설치

2. 컴파일

- 1. command

npm install -g node-sass (node-sass 설치)

node-sass scss/ --output css/ (scss → css 파일 변경)

node-sass --watch scss/ --output css/ (지속적 변경 업뎃)

node-sass --output-style expanded scss/ --output css/ (스타일 지정)

      nested 기본, expanded 브라켓형식, compact 엔터/띄어쓰기 생략, compressed 한줄에 압축

 

 

- 2 . application

prepros, 코알라 등