CSS

SCSS | 네스팅과 참조연산자

2023.02.02

네스팅이란 무엇일까? 우선 CSS를 예로 들어보겠습니다. 아래의 코드에서 보이듯이 CSS에서는 sub-items라는 클래스에 접근하기 위해서는 상위에 있는 모든 클래스를 작성해야합니다. 그렇기 때문에 코드에 중복이 많이 발생하고, 만약 .items클래스의 이름이 변경된다면 .items라는 이름이 쓰인 모든 클래스 선택자의 이름을 변경해야 합니다. .items {} .items .item {} .items .item .title {} .items .item .desc {} 하지만 SCSS는 Nesting을 통해 CSS의 이러한 문제점을 해결할 수 있습니다. SCSS로 작성한 코드는 CSS의 문제점이었던 똑같은 코드의 중복작성을 줄이고, 클래스의 이름을 변경했을 때 모든 하위 클래스의 부모 클래스이름을 바꿔..

프로그래밍/SCSS

SCSS란 무엇일까?

2023.02.01

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

SCSS | 네스팅과 참조연산자

SCSS란 무엇일까?

티스토리툴바