반응형

개발/CSS, SCSS 2

SCSS(Sass 상위 호환) 사용하기 2편

1편을 안보신 분은 이거부터... SCSS(Sass 상위 호환) 사용하기 Sass는 Syntatically Awesome Style Sheets 의 약어로, 해석하면 "문법적으로 간지나는 스타일 시트" 정도가 된다. SCSS는 Sass의 상위 호환이라고 보면 되는데, Sass 출시 이후에 문제점을 더 보완해서 나온 언. duknock.tistory.com 1편에 이어서 2편에서는 SCSS의 다양한 기능을 알아보려고 한다. mixin, extend 등 편한(?) 기능들이 있으니 한번 보자. 믹스인(mixin)과 include @mixin은 함수 비스무리한거다. 반복적으로 사용할 CSS 문을 그룹으로 묶어서 하나로 정의해놓은거 라고 보면된다. (함수 선언식이랑 비슷함) @include 는 @mixin과 함께..

개발/CSS, SCSS 2022.09.14

SCSS(Sass 상위 호환) 사용하기

Sass는 Syntatically Awesome Style Sheets 의 약어로, 해석하면 "문법적으로 간지나는 스타일 시트" 정도가 된다. SCSS는 Sass의 상위 호환이라고 보면 되는데, Sass 출시 이후에 문제점을 더 보완해서 나온 언어이다. (Sassy CSS : 개쩌는 CSS) 그래서 얘네가 하는 역할이 뭐냐 얘네는 CSS Preprocessor, 즉, CSS 전처리기이다. CSS를 더 편하게 만들 수 있도록 도와주는 컴파일 언어인것이다. Sass(SCSS) 언어로 스타일시트를 작성하여 컴파일하면 CSS 파일이 생성된다. /*SCSS*/ div{ width : 100%; height : 500px; ul{ padding : 10px; li{ width : 100px; height : 100..

개발/CSS, SCSS 2022.09.08
반응형