모든 스타일들을 하나의 SCSS파일안에 담을 필요는 없습니다. 연관되어 있는 스타일들을 여러 SCSS파일로 분할하여 사용할 수 있습니다. 분리할 스타일들을 별도의 SCSS파일로 만들고, @import키워드를 사용하여 스타일을 불러올 수 있습니다. SCSS파일끼리는 확장자를 붙이거나 생략할 수 있습니다. /* variables.scss */ $item-bg: #fff; $item-mg: 10px; /* style.scss */ @import "variables"; .item { background-color: $item-bg; margin: $item-mg; } @minxin을 사용하면 SCSS파일 자체를 분할 하는것이 아닌 스타일을 함수처럼 만들어 재사용할 수 있습니다. @include로 선언된 @min..
앞의 포스트에서 잠깐 보았던 변수에 대해 설명하겠습니다. 변수는 SCSS에만 있는 기능이 아니라 CSS에도 변수가 있고, 아래의 코드와 같이 선언 및 사용할 수 있습니다. CSS에서는 :root 또는 특정선택자 내에서만 변수를 생성하고 사용할 수 있습니다. :root { --main-bg-color: #fff; } div { background-color: var(--main-bg-color); } SCSS에서의 변수는 $기호를 사용하여 변수를 만들 수 있습니다. 다른 프로그래밍 언어들과 마찬가지로 변수명은 숫자로 시작할 수 없고, -, _외에는 특수기호를 사용할 수가 없습니다. SCSS에서는 다음과 같이 변수를 선언하고 사용할 수 있습니다. 변수에는 모든 속성들의 값이 들어갈 수 있습니다. 변수는 자신..
네스팅이란 무엇일까? 우선 CSS를 예로 들어보겠습니다. 아래의 코드에서 보이듯이 CSS에서는 sub-items라는 클래스에 접근하기 위해서는 상위에 있는 모든 클래스를 작성해야합니다. 그렇기 때문에 코드에 중복이 많이 발생하고, 만약 .items클래스의 이름이 변경된다면 .items라는 이름이 쓰인 모든 클래스 선택자의 이름을 변경해야 합니다. .items {} .items .item {} .items .item .title {} .items .item .desc {} 하지만 SCSS는 Nesting을 통해 CSS의 이러한 문제점을 해결할 수 있습니다. SCSS로 작성한 코드는 CSS의 문제점이었던 똑같은 코드의 중복작성을 줄이고, 클래스의 이름을 변경했을 때 모든 하위 클래스의 부모 클래스이름을 바꿔..
SCSS란 CSS를 위한 전처리언어 입니다. CSS는 웹사이트가 커질수록 코드가 복잡해지고, 유지하기가 더 어려워지게 되는데 이 문제를 해결해 줄 수 있는 것이 SCSS입니다. SCSS를 사용하면 변수, 연산자, 상속, 믹스인, 네스팅 등을 사용해 코드를 효율적으로 관리하고, 작성할 수 있게 도와줍니다. 예를 들어 CSS에서는 아래와 같이 코드를 작성해야했다면, .items .main-item > a { } .items .main-item > a:after { } .items .main-item .sub-items { } .items .main-item .sub-items a { } SCSS에서는 이렇게 작성할 수 있습니다. 이걸 네스팅이라고 합니다. .items { .main-item { > a:aft..
