개인 공부용 블로그

동일한 ui를 복사해서 붙여넣어야 할때 @extend 를 사용하면 css변환시 오른쪽 처럼 바꿔준다. 레이아웃, 버튼 같은게 동일하고 색깔만 다를경우 extend를 써주면 코드도 줄어들고 효율적일듯싶다.

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..

Number 1, 1.5, 10px Sass에서는 단위까지 number로 포함된다. string "foo", 'bar', baz 쌍따옴표, 홑따옴표가 없는 경우도 문자열로 인식한다. color CSS와 동일 blue, #000, rgba(0,0,0,0.5); Boolean ttrue, false Null list 1.5em, 1em, Arial, sans-serif map (key1: value1, key2: value2) function 참조 round(1.5)

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..