개인 공부용 블로그

switch / case 문은 sass에서 지원되지 않는다. @if / @else 조건식의 괄호는 필수가 아니라 상황에 따라 넣거나 넣지 않는다. @for문 SCSS 동일한 이미지와 클래스를 반복으로 나타나게 할때에도 for문은 유용하게 사용된다. @for $i from 1 through 6 { &.mv#{$i} { background-image: url(../img/mv#{$i}.jpg); } } CSS로 변환된 모습 .visual .visual_slider li.mv1 { background-image: url(../img/mv1.jpg); } .visual .visual_slider li.mv2 { background-image: url(../img/mv2.jpg); } .visual .visual..

https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com 간단한 scss를 css로 바로 변환해서 볼 수 있는 테스트기 (실시간으로 변환되어 편리하다) NESTING(중첩) 자식 선택자를 부모 선택자 블럭 안에 중첩하여 사용할 수 있는 확장된 문법 부모 선택자를 반복하지 않아도 되고 가독성이 뛰어나며, 구조화된 느낌의 코드를 작성할 수 있다. css로 변환하면 아래와 같다. BAD CASE 위처럼 3댑스의 중첩을 사용하는 것은 가독성면에서 좋지 않다. GOOD CASE &..

CSS Preprocessor SASS(Syntactically Awesome Style Sheets)란? 간결하고 격식을 갖춘 CSS 문법을 제공 별도의 컴파일 과정을 통해 기능을 확장하고 반복적 작업을 자동화하게 도와주는 툴 설치 및 준비작업 http://koala-app.com/ Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation. Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows..