개념 지난 글에서 SCSS의 스타일 변수를 사용하는 방법에 대해서 배웠었다. '$'를 이용하여 자주 사용되거나 특정한 값을 변수로 선언하여 나중에 수정할 때 한 번에 쉽게 하기 위해 변수를 사용했었다. 하지만, 변수는 오직 한 가지 값만 담을 수 있다는 한계가 있다. 한 가지 값이 아닌 그냥 스타일 그룹 전체를 변수로 담을 수 있는 방법은 없을까? @mixin과 @include를 이용하여 스타일 그룹 전체를 변수로 담고 불러올 수 있다. 코드 예시를 보면서 이해해보자. 방법 기본 /* SCSS */ @mixin default { margin: 0; padding: 0; color: #333; display: block; width: 100px; height: 50px; } body { @include d..

파일 불러오기 /* style.scss */ import "header"; import "footer"; /* style.css */ header { margin: 0; } footer { margin: 0; } SCSS에서 @import는 같은 .scss 파일을 불러오는 역할을 하며, css 파일로 컴파일될 때 @import 자체가 컴파일되는 게 아닌 import된 파일의 스타일 코드가 .css 파일 안으로 들어오게 된다. 예를 들어, style.scss 파일 안에 @import로만 파일을 불러오고 아무 코드도 입력하지 않았다고 할 때, 컴파일된 style.css 파일 안에는 import된 scss 파일의 코드들이 css로 컴파일되어 있게 된다. 따라서, 만약 규모가 큰 프로젝트의 경우 scss를 각 ..

SCSS의 변수 선언 /* SCSS */ $color-black: #000; $color-grey: #666; $item-w: 300px; $item-h: 300px; $img-url: "images/" .item { width: $item-w; height: $item-h; color: $color-black; background-color: $color-grey; } 자바스크립트의 변수 선언처럼 CSS에서도 변수를 사용하여 스타일링할 수 있는 방법이 있다. 자바스크립트의 var, let, const의 변수 선언 역할을 하는 '$'를 앞에 붙이고 '변수명: 값'을 넣어주면 된다. 참고로, 자바스크립트처럼 변수 값이 문자일 때는 따옴표("")로 감싸줘야 한다. (단, 속성값이나 px은 제외) CSS의 변..

가상클래스 :is /* CSS */ .container header h1 {} .container section h1 {} .container footer h1 {} :is(header, section, footer) h1 {} header :is(h1, h2, h3) {} /* SCSS */ .container { :is(header, section, footer) h1 { } } 가상클래스 :is는 중복되는 요소들를 한 꺼번에 묶어서 쓸 수 있게 만들어주는 선택자로, 서로 다른 부모/자식 요소가 있고 선택하려는 각 요소가 같을 때 사용하면 좋은 선택자이다. 예를 들어, h1이라는 태그가 header, section, footer에 각각 있다고 할 때 header h1, section h1, foote..

선택자 중첩 Hello! Shawn. Large Medium Small /* 기존 CSS */ .wrap { background-color: #eee; } .wrap h1 { color: red; } .wrap .font { text-align: center; } .wrap .font li { list-style: none; } /* SCSS */ .wrap { background-color: #eee; h1 { color: red; } .font { text-align: center; li { list-style: none; } } } 선택자 중첩이란, 기존의 CSS에서처럼 일일이 부모 선택자를 앞에 입력하는 형태가 아닌 부모 선택자가 자식 선택자를 품고 있는 형태를 말한다. 위의 예시 코드를 보면 확..