YoonStudyNote

CSS 주석은 /* ... */ 이다. Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고, 중요한 것은 *의 라인을 맞춰줘야 한다. 사용방법 /* 컴파일되는 * 여러 줄 * 주석 */ // Error /* 컴파일되는 * 여러 줄 * 주석 */ 에스터리스크가 똑바로 한줄에 맞춰서 찍혀있지않고 중구난방으로 찍혀있으면 컴파일이 안된다.

Sass(SCSS)는 웹에서 직접 동작할 수 없다. 어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 한다. 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법을 소개하겠다. SassMeister 간단한 Sass 코드는 컴파일러를 설치하는게 부담될 경우 SassMeister를 사용 할 수 있다. 페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환된다. HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원하니 학습에 도움이 될 것이다. www.sassmeister.com/ SassMeister | The Sass Playground! SassMeis..

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다. 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다. 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다. /* SASS */ .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px /* SCSS */ .list { width: 100px; float: left; li { color: red; b..