Written by JJoo
on May 11, 2023

scss 주요 문법-1

scss의 주요 문법을 정리해봅니다.

1. 변수

scss는 변수를 사용할 수 있습니다.

사실 사용해본적은 없지만 css에서도 변수 사용이 가능 합니다. 하지만 IE에서 지원을 하고 있지 않아서 크로스브라우징에 문제가 있었고 scss는 IE에서의 css 변수 사용을 위한 좋은 방법이었어요.

but, IE 지원 종료로 Microsoft Edge를 이용해야 하는 데 Edge에서는 css의 변수 사용이 가능하기에 크로스브라우징을 위한 용도로의 scss 장점은 약해졌네요.

각설하고 scss의 변수는 $를 앞에 붙여 사용해주며 $변수명: value;로 선언해서 사용합니다.

value에는 문자, 숫자, 불린, 배열 등 다양하게 넣어줄 수 있습니다.

ex.

$font-size : 30px;
$white : #fff;
$dark-mode : true; 

$theme-map-light: (
  $--theme-primary: #9b3dca,
)

2.1 중첩

css는 기본적으로 선택자로 자식을 찾아 들어갈 수 있습니다.

ex.

.nav{ ... }
.nav ul{...}
.nav ul li {...}
.nav ul li a {...}

이런식으로 부모 -> 자식순으로 선택자를 작성하는 데요.

이게 점점 길어지면 … 가독성도 …

scss의 중첩을 이용하면 상위 선택자의 반복을 줄일 수 있고 가독성도 높일 수 있습니다.

ex.

.nav {
  ...
  ul {
    ...
    li {
      ...
     a {
      ...
     }
    }
  }
}

이건 styled-components에서도 마찬가지이죠.

이렇게 선택자 안의 선택자를 넣는 식으로 작성하면 부모 선택자부터 자식 선택자까지 어떻게 얽혀있는 지 해당 구조를 한눈에 파악할 수 있습니다.

하지만 중첩도 너무 깊게 사용한다면 가독성이 떨어지니 주의해야 합니다.

2.2 부모선택자 &

위의 중첩 기능에서 매우 유용하게 사용되는 기능이 하나 있습니다.

바로 &를 사용해 중첩안에서 부모 선택자를 선택할 수 있는 기능이에요.

특히 가상선택자를 지정할때에는 &를 활용해줘야 합니다.

또 &를 이용해서 부모 선택자와 연관된 외부 선택자를 지정할 수 도 있어요

ex.

li {
  &:hover { 
    ...
  }
}

ex.

// scss
li {
  ...
  &:hover { 
    ...
  }
  &--selected { 
    ...
  }
  & + button {
    ...
  }
}

// css
li { ... }
li:hover { ... }
li--selected { ... }
li + button { ... }

이 부모 선택자 &는 중첩안에서 맨 처음에만 붙여 사용할 수 있습니다.

&.li , & span (O), li&, a & (X)

보간

scss는 변수를 사용할 수가 있습니다. 이 변수를 css 문장 사이나 class명 사이에 넣어 가변적인 값을 넣어줄 수 있습니다.

이 변수를 .nav_$list 처럼 그냥 넣어주게 되면 변수의 값이 제대로 적용되지 않고 컴파일 에러까지 나게 됩니다.

이렇게 변수를 그대로 때려넣지 말고 보간을 사용해서 넣어워야 합니다. 보간을 사용하는 방법은 간단해요. #{} 사이에 변수를 넣어주면 됩니다.

.nav_#{$list} { ... } 

#{}로 이게 변수라고 인식시켜주는 것 같습니다.

주의할 점은 보간법을 사용해서 value로 넣어주면 #{}에 들어간 변수값은 string으로 들어갑니다. 변수안에 number를 넣어 연산을 시켜도 원하는 값을 얻을 수 없어요

$width1 : 12;
$width2 : 34; 

.box_1 {
  width: $width1 + $width2 + px;
}
.box_2 {
  width: #{$width1} + #{$width2} + px;
}
// 결과
// .box_1 { width: 46px; }
// .box_2 { width: 1234px; } 

referance

Discussion and feedback

← → Top