그럼에도 불구하고

조건문을 이용하여 반응형 웹을 만들어보자 [ _responsive.scss ] @mixin responsive($device){ @if $device == "maxDesktop" { @media screen and (min-width: 1024px){ @content; } } @else if $device == "minDesktop" { @media screen and (min-width: 768px) and (max-width: 1023px){ @content; } } @else if $device == "tablet" { @media screen and (min-width: 480px) and (max-width: 767px){ @content; } } @else if $device == "phone..

mixin, extend, 모듈화(import/use)에 대해 알아보자 [ @ 문법 ] Sass는 작업을 편하게 해 줄 @으로 시작하는 At-Rules라는 문법이 있다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있다. (@font-face 또는 @counter-style, @media 등) Sass에서는 여기에 더해 추가적인 기능들을 제공하는 at-rules 들이 추가된다. 예를 들면 @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다. @extend : 여러 선택자가 스타일을 상속받도록 할 수 있다. @import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있다. @function : SassScript에서 사용할 수 ..

Sass의 기본 문법을 익혀보자 [ 중첩 ] 우리가 사용하는 CSS는 ( Cascading Style Sheet )로 가장 큰 특징은 "Cascading" 위에서 아래로 흐르는 특징을 갖고 있다. 그래서 CSS는 .grand-parent > .parent > .child와 같이 부모에서 자식 순서로 작성한다. 아래의 예시를 보자 .container-grand-parent { color: red; } .container-grand-parent .container-parent { color : orange; } .container-grand-parent .container-parent .container-child { color : yellow; } 부모에서 자식으로 내려가면서 CSS를 적용하고 있지만, 길..

Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 ..