SASS 컴파일러 설치, 비쥬얼스튜디오코드 설치하기

Sass(Syntactically Awesome Stylesheets)

sass는 css 전처리기 언어이다. sass로 우선 작성한 후 css로 변환하여 사용한다.

어썸이 들어갈 정도면 엄청나게 멋진 언어겠지,,,,,,

sass는 변수, 함수, 중첩(부모자손) 등등을 css임에도 사용할 수 있게 해준다.

또한 변수와 mixin,  extend등의 활용으로  코드의 재사용이 용이하다.

sass를 배우는데 참고한 영상들

생활코딩 : https://opentutorials.org/module/237/2490

인프런 : css에 날개를 달아주는 sass  

문서 참고 : http://sass-lang.com/guide

[ sass -> css로 변환 ]

sass는 css로 변환해주는 컴파일러라는 도구가 꼭 필요하다.

  1-1 ) 윈도우에서는 ruby를 깔아준다. 맥은 이미 ruby가 깔려있음.

  1-2 ) 윈도우에서는 cmd창, 맥은 터미널을 열어서 gem install sass 를 입력해서 sass 컴파일러를 설치해준다.

  1-3 ) sass --watch style.scss:style.css 를 작성해주면 변환이 됨

css에 날개를 달아주는 sass 강의에서는 vscode의 확장 프로그램을 활용하여  컴파일을 할수있게 알려준다.

((이쪽 방법이 훨씬 편함, 강의보는게 이해가 더 빠름))

 

   2-1) vscode를 설치한다.   -> https://code.visualstudio.com/

   2-2) extension을 설치한다.

- colorize

- prettier - code fomatter

- one dark pro(스킨 테마)

- sass

- sass Lint

- live sass compiler

- live server

- html snippets

- es6 code snippet

- debugger for chrome

- auto close tag

- auto rename tag

 

   2-3) vscode 하단의 표시줄에 watch sass를 클릭해주면 sass 파일이 css 파일로 변환된다.

   2-4) live sass compiler 작업영역 setting에 아래 내용 붙여넣기

{

"liveSassCompile.settings.formats":[

{

"format": "expanded",

"extensionName": ".css",

"savePath": "~/../css"

}

],

"liveSassCompile.settings.excludeList": [

"**/node_modules/**",

".vscode/**"

],

"liveSassCompile.settings.generateMap":

true,

"liveSassCompile.settings.autoprefix": [

"> 1%",

"last 2 versions"

]

}

- savepath가 css가 저장될 폴더명을 지정하는 곳

**user setting(개인적으로 저장,  vscode setting 검색해서 설정 추가해서 쓰세요!)

{

"editor.fontSize": 18,

"editor.renderWhitespace": "all",

"editor.wordWrap": "on",

"emmet.triggerExpansionOnTab": true,

"editor.tabCompletion": "on"

}

**Vscode 단축키

  -  모든명령표시 ctrl + <shift> + P

  -  파일열기  ctrl + o

  -  폴더열기  1) ctrl + k -> 2) ctrl + o

  -  최근파일열기 ctrl + R

  -  터미널 설정/해제 ctrl + `

**emmet 사용키

 tab - 태그 자동완성

 ! + tab - html 문서 태그 완성(파일을 html로 미리 저장해준다.)

태그*숫자 + tab - 해당 태그를 숫자만큼 완성

태그.클래스명 + tab - 클래스명을 가진 태그 완성

ul>li - >은 자손 태그 완성

태그 여러개 선택 -> alt 클릭 후 다른 줄 선택 (여러 줄 선택 가능, 다중선택)

한줄 이동 - 커서 선택된 줄에서 alt 클릭후 방향키로 위치이동 가능

ctrl + / - 주석 생성