Sass(SCSS) Sass - 웹은 css만 동작하기에 전처리기(Less, Sass(SCSS), Stylus)라고 부름(컴파일하면 css로 나옴) Sass와 SCSS는 차이점 - Sass(Syntactically Awesome Stylus Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합, SCSS는 CSS와 거의 같은 문접으로 Sass 기능을 지원한다는 뜻, 가장 간단한 차이는 {}와 ;의 유무(Sass는 안씀, SCSS는 사용), Sass는 mixins 기능을 =,+로 사용하고 SCSS는 @mixin, @include로 사용 주석 - 컴파일되지 않는 주석(//)은 css로 변환되지 않음, 기본 주석(/* */)은 css로 변환이 됨 // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ //Sass *줄이 잘 맞아야함 - SCSS상관 없음 /* 컴파일되는 * 여러 줄 * 주석 */ 데이터 종류 - null이 사용되면 컴파일하지 않음, Maps는 ()를 꼭 붙여야 함 중첩(Nesting) - 중첩 기능을 통하여 상위 선택자의 반복을 피하고 복잡한 구조를 편리하게 작성 가능 & Ampersand(상위 선택자 참조) - 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환 .btn { position : absolute ; & .active { color : red ; } } //&.active의 의미는 .btn.active { color : red ; } @at-root(중첩 벗어나기) - 중첩안에서 생성하되 중첩 밖에서 사용해야 할 경우 .list { $w : 100 px ; $h : 50 px ; li { width : $w ; height : $h ; } @at-root .box { width : $w ; height...