Sass(SCSS) 기본 공부 1
*나나님의 아무튼 Sass 시리즈 + W3school 을 보고 공부합니다.
CSS 전처리기
- 자신만의 문법을 가지고, CSS 생성하도록 하는 프로그램
- CSS의 단점인 단순 반복 등을 보완하기 위해 생긴 프로그램
- 정규 CSS에 없는 다양한 내장함수를 갖고 있고, 변수/ 함수 생성도 가능하다.
- CSS 전처리기는 기본 브라우저에 탑재되어 있지 않으므로, 컴파일 과정을 통해 사용해야 한다.
결국, CSS 전처리기를 사용하려면
1) 우선 CSS 전처리기를 사용해 코드를 작성한다.
2) CSS 컴파일러를 이용해 CSS 전처리기를 CSS로 컴파일한다.
*컴파일러 설치 대신 컴파일만 하려면 사이트에서도 가능하다.
Sass 컴파일 사이트 : https://www.sassmeister.com/ (테스트 가능)
1. Sass 개념 (Syntactically Awesome Style Sheets)
Sass는 CSS의 확장 언어이자, 전처리기이다.
장점은 CSS와 완벽하게 호환되며, CSS 반복을 줄여, 시간을 절약해주고 유지보수가 좋다는 장점이 있다.
* Sass의 파일 확장자는 .scss이다"
* 표준 CSS의 주석을 지원한다.
2. Sass와 SCSS의 차이
Sass의 3버전에서 등장한 SCSS는 CSS 구문과 완전히 호환되고, Sass의 모든 기능을 지원하는 상위집합이다.
SCSS는 Sass와 달리 CSS 코드와 좀 더 유사하다. ({}중괄호와 ;세미콜론의 유무)
3. Sass/SCSS 설치 - npm 이용
사이트에 나와있음 : https://sass-lang.com/install
[npm이란 더보기]
*npm (Node Package Manager) 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자로
Node.js를 설치하면 같이 설치되어 사용할 수 있다. (Node.js의 기본 패키지 관리자)
npm에는 Node.js 환경에서 사용되는 각종 패키지를 갖고, 관리하며 해당 패키지를 다운받아 사용할 수 있다.
1. 최신 버전의 Node.js를 설치한다.
터미널을 열고, npm -v (버전 확인) 명령어를 입력해 잘 설치되었는지 확인한다.
node --version //Node.js 버전 확인
npm -v //npm 버전 확인2. Node.js가 설치되었으면, Sass를 설치해준다.
npm install -g sass //sass 설치
sass --version //sass 버전 확인, 출력: 1.58.3 compiled with dart2js 2.19.24. Sass/SCSS 사용하기
1. 폴더 하나를 만든다. 그 안에 index.html과 index(style이라 해도 됨).scss 파일을 만든다.
2. 스타일링 후 컴파일하기
- 컴파일을 하려면, 터미널을 연 뒤 경로가 위에서 만든 폴더가 맞다면, 아래 명령어를 입력해준다. 그러면, 해당 파일명으로 CSS파일이 컴파일된다. (*빌드 시에는 컴파일한 CSS파일을 사용한다.)
//sass <변환할 scss 파일명> <변환될 css 파일명>
sass index.scss index.css
- 위의 방법을 사용하면, 스타일링을 할 때마다 해당 명령어를 입력해 컴파일 해줘야된다는 번거로움이 있다. 그 대신 --watch 플래그와 함께 아래 명령어를 사용하면, Sass를 저장할 때마다 CSS로 컴파일을 해준다.
sass --watch input.scss output.css // 파일 기준으로 감시
sass --watch scss:css // 폴더 기준으로 감시
5. 컴파일 시 생기는 .map 파일의 존재
: 소스맵의 정보를 브라우저에게 제공하기 위한 파일
: 이 파일은 컴파일된 CSS 파일이 아닌, 원본 파일인 SCSS 코드에 접근할 수 있도록 해줌
👉 개발자들이 디버깅을 하기 위해 확인하고 분석하는 파일
👉 그러나 코드에 관한 보안상 문제 때문에 실무 시에는 setting.json에서 .map파일이 생성되지 않게 처리하는게 좋음
"liveSassCompile.settings.generateMap":false;
* .map 파일 자동 생성 안하는 법
1. 명령어로 처리하기 (--no-source-map)
sass --no-source-map style.scss style.css
2. setting.json 에서 변경하기
.map파일 생성을 false로 처리하려면 live sass complier가 필요함
- 다운받았으면, file - preferences - settings에 들어간다.
- 왼쪽 카테고리에 extensions에 보면 live sass complier가 있다. 그 중에서 settings : generate map의 edit in setting.json을 클릭한다.
- 기본값은 .map파일을 생성하며(true), 이게 싫은 경우 false로 바꿔주면 된다.
.map 파일에 대한 더 자세한 설명은 아래의 사이트를 참고하자!
https://velog.io/@a_in/Scss-map
[Sass] map 파일은 왜 생겨날까?
map 파일이 누구야 소스맵은 뭐야
velog.io
* 참고사이트
https://www.w3schools.com/sass/sass_installation.php
https://heropy.blog/2018/01/31/sass/
https://nm817.tistory.com/37?category=816930