SASS ( CSS with superpowers )
세계에서 가장 성숙하고, 확장가능하며 강력한 전문가급의 CSS 확장언어
CSS의 단점 : 프로젝트가 대형화 될수록 비효율적인 코드가 생기고 관리가 어려워짐
프리프로세서는 웹브라우저에서 해석되기 전에 css 로 변환되는 과정 필요
웹 브라우저가 해석할 수 있는 언어는 html, css, javascript 뿐임
< sass 설치 >
cd 폴더이름
폴더 안으로 들어가기
npm init -y
초기화, -y 는 모든 질문에 yes 라고 대답한다는 뜻
ls
package.json 나오면 됨
npm i sass
싸스 설치 -> node.modules 안에 sass 폴더가 생김, package.json 에서 버전 확인 가능
mkdir scss
scss 라는 폴더를 만듬
touch scss/style.scss
scss 라는 폴더 안에 style.scss 파일 생성
< CSS 파일 컴파일 시키는 방법 >
원톤 모드 ( 1:1로 컴파일 )
sass scss/style.scss css/style.css
싸스라는 명령과 함께 scss 폴더 내부의 style.scss 라는 원본파일 이름과
타겟 폴더인 css 폴더 하위의 style.css 라는 이름을 입력 -> scss 안에 파일 찾아서 css 로 변환해줘
화면상 - 변화 없음
CSS 폴더가 생성되고 style.css 파일 안에 style.scss 에서 작성한 것이 옮겨져있음.
- 매니투매니 방식 ( 여러개의 파일을 한꺼번에 컴파일 시키는 방법 )
sass scss:css
sass 라는 명령어와 함께 scss 폴더 콜론, 타겟 폴더인 css 폴더이름 입력
css 폴더 안에 있는 모든 파일이 컴파일 됨
< 스타일 옵션 >
- compressed : 선택자와 선언블럭이 모두 한 줄로 입력됨 - 배포모드에서 활용
sass --style=compressed scss:css
compressed 라는 스타일옵션을 주며 css 폴더 안에 있는 모든 파일을 scss 로 컴파일 시키는 명령값
( 디폴트는 익스텐디드 모드 : 주로 개발모드에서 활용 )
- sourcemap : 작성했던 sass 코드가 어떻게 css 에 컴파일 되었는지 원본 위치의 라인 넘버 제공
( 소스맵의 장점 : 유지보수, 수정시 위치 파악 용이 -> 개발에서만 필요, 배포 단계에서는 불필요 )
sass --no-source-map scss/style.css css/main.css
no source map 을 입력 후 scss안의 style.css를 css폴더 안의 main.css 라는 이름을 줘 컴파일
- watch : sass가 수정되면 자동으로 감지해 css 파일을 수정시켜주는 옵션
sass --watch scss:css
sass 명령어와 scss를 css로 컴파일 하면서 그 파일들을 지켜봐(watch)라는 명령
sass is watching for changes 이라는 메세지가 뜸
개발하는 상태에서 켜놓기
ctrl c 로 끌 수 있음
< 스크립트 명령 등록해 스타일 옵션 사용하기 >
매번 명령을 입력하는 것이 비효율적임 package.json 파일을 열어 등록시킬 것임
사스 버전이 나와있는 dependencied 위에 scripts 명령을 추가
"scripts":{
"sass": "sass scss:css"
}기본명령 줌
사스명령을 이용해서 scss 폴더 모든 파일을 css 폴더로 컴파일
npm run sass
npm run 명령어 이름 ( 내가 등록한 명령 이름인 sass )
scripts 명령을 사용해 scss 폴더 모든 파일을 css 폴더로 컴파일
"scripts":{
"sass" : "sass scss:css",
"sass-compressed" : "sass --style=compressed scss:css"
}npm run sass-compressed
"scripts":{
"sass" : "sass scss:css",
"sass-compressed" : "sass --style=compressed scss:css",
"sass-no-source-map" : "sass --no-source-map scss:css",
"sass-watch" : "sass --watch scss:css"
}npm run sass-no-source-map
npm sass-watch
theme 테마처럼 함수를 한다고 생각해도 좋을듯 !
* 제거 명령도 등록 해놓을 수 없을까? -> rimraf 라는 패키지 설치
설치
npm install rimraf
하면 dependencies 에 rimraf 가 추가된걸 볼 수 있음
명령어 사용을 위해 scripts 에 명령어 등록
"scripts":{
"sass" : "sass scss:css",
"sass-compressed" : "sass --style=compressed scss:css",
"sass-no-source-map" : "sass --no-source-map scss:css",
"sass-watch" : "sass --watch scss:css",
"clear" : "rimraf css"
}npm run clear
css 폴더가 삭제됨
라이브서버 등록
* 라이브서버 패키지설치
npm install live-server
라이브 서버 설치
하면 dependencies 에 라이브서버가 추가 된 것 확인 가능
명령어 사용 위해 scripts 에 명령어 등록
"scripts":{
"sass" : "sass scss:css",
"sass-compressed" : "sass --style=compressed scss:css",
"sass-no-source-map" : "sass --no-source-map scss:css",
"sass-watch" : "sass --watch scss:css",
"clear" : "rimraf css",
"server" : "live-server"
}npm run server
동시실행 npm run-all 패키지설치
npm install npm-run-all
설치 후 , dependencies 확인하면 npm-run-all 설치 확인가능
명령어 등록하기
"scripts":{
"start" : "run-p sass-watch server",
"sass" : "sass scss:css",
"sass-compressed" : "sass --style=compressed scss:css",
"sass-no-source-map" : "sass --no-source-map scss:css",
"sass-watch" : "sass --watch scss:css",
"clear" : "rimraf css",
"server" : "live-server"
}sass-watch 와 live server 구동을 동시에 실행하는 명령어
npm-run-all : 패키지 한꺼번에 실행
run-s : 순차적실행
run-p : 동시실행
npm start (run 명령 생략 가능) 로 실행시키기
< HTML 파일에 반영되도록 link rel 을 사용해 css 파일을 연결해주기 >
< 더 효율적으로 npm 명령 수정 >
"scripts":{
"start" : "run-p sass-watch server",
"sass" : "sass scss:css",
"sass-compressed" : "npm run sass -- --style=compressed",
"sass-no-source-map" : "npm run sass -- --no-source-map",
"sass-watch" : "npm run sass -- --watch",
"clear" : "rimraf css",
"server" : "live-server"
}"sass" 라는 값이 sass 명령을 통해 scss의 모든 파일을 css 파일로 빌드하라는 명령이 등록되어 있음
반복하고 있는 옵션들을 다르게 수정하기
npm 명령을 등록하기
해당 sass 명령에 compressed 라는 명령을 덧붙힐 예정 : -- 를 한 번 더 붙히기
-- 한 번 더 붙히는 이유 : npm 명령을 다른 npm 명령에 등록하기 위한 기본 규칙
폴더 이름이 바뀌더라도 일일히 세 가지의 명령어를 다 수정하는 것이 아닌,
한 문장의 폴더명만 바꿔줘도 모두 수정 가능함
라이브 서버 사용할 때 포트 번호를 다르게 사용하고 싶을 때 옵션 주기도 가능,
"server" : "live-server --port=8090" 포트 번호를 입력