노마드코더 - CSS Layout 마스터클래스 강의를 정리한 내용입니다.
SCSS
는 CSS에 다양한 편의 기능을 추가한 확장 버전으로, nesting
, mixins
, modules
등의 문법을 제공한다. 그러나 이 문법을 브라우저가 해석하지 못하기 때문에 전처리 과정이 필요하다. SCSS
를 CSS
로 SASS
를 활요해 전처리한다.
Vite
환경에서는 npm add -D sass
로 전처리기를 추가한다.
CSS
에서는 변수를 선언할 때 :root
블록 안에 --
를 prefix
하여 선언한다. 변수의 사용은 var()
함수를 이용한다.
root: {
--bgColor: red;
}
body {
background-color: var(--bgColor);
}
SCSS
에서는 $
를 이용해 변수를 선언한다. CSS
와 다르게 변수를 그대로 사용한다.
$bgColor: red;
body {
background-color: $bgColor;
}
어떤 태그의 자식 요소에만 스타일을 적용한다면, CSS
에서는 태그 트리를 자세히 적어줘야 한다.
ul {
list-style-type: none;
padding: 0;
display: flex;
gap: 10px;
}
ul li {
background-color: tomato;
color: white;
padding: 5px 10px;
border-radius: 7px;
}
ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
여기에 hover
상태에 따라 li
의 opacity
와 a
의 color
가 변한다고 하자.
ul li:hover {
opacity: 0.8;
}
ul li:hover a {
color: gray;
}
이런 식으로 일일이 설정해야 한다.
SCSS
에서는 Nesting
기능을 제공해 태그 안에 &
를 이용하여 태그 안에 적을 수 있다.
ul {
list-style-type: none;
padding: 0;
display: flex;
gap: 10px;
li {
background-color: tomato;
color: white;
padding: 5px 10px;
border-radius: 7px;
a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
&:hover {
opacity: 0.8;
a {
color: gray;
}
}
}
}
@extend
는 공통 로직을 확장하는 키워드이다.
스타일은 같고 배경만 다른 3개의 컴포넌트를 만든다면, 먼저 %
를 이용해 공통 스타일을 작성한다.
컴포넌트마다 @extend %공통스타일
을 확장하고, 개별적인 스타일을 덧입히면 된다.
%alert {
margin: 10px;
padding: 10px 20px;
border-radius: 10px;
border: 1px dashed black;
}
.success {
@extend %alert;
background-color: green;
}
.error {
@extend %alert;
background-color: tomato;
}
.warning {
@extend %alert;
background-color: yellow;
}
@extend
는 유용한 기능이지만, 반복되는 코드가 보인다. 이를 좀더 관리하기 편하도록 함수처럼 만들 수 있다. @mixin
과 @include
를 사용한다.
@mixin alert($bgColor, $borderColor) {
background-color: $bgColor;
margin: 10px;
padding: 10px 20px;
border-radius: 10px;
border: 1px dashed $borderColor;
}
.success {
@include alert(green, blue);
}
.error {
@include alert(tomato, white);
}
.warning {
@include alert(yellow, black);
}
@mixin
으로 %alert
을 alert()
으로 변경해 반복되는 속성(background-color
)을 인자로 받았다. 이를 사용하는 컴포넌트에서는 @include
로 호출해 인자를 주입하면 된다.
만약 @include
로 호출한 함수에 속성을 추가하고 싶다면 중괄호({}
)를 열고 안에 속성을 적는다. 그 후 @mixin
에 @content
를 추가하면 된다.
@mixin alert($bgColor, $borderColor) {
/* ... */
@content;
}
.success {
@include alert(green, blue) {
font-size: 12px;
}
}
.error {
@include alert(tomato, white) {
text-decoration: underline;
}
}
.warning {
@include alert(yellow, black) {
text-transform: uppercase;
}
}
@mixin
을 이용해 반응형 속성을 쉽게 구현할 수 있다.
$breakpoint-sm: 480px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1200px;
@mixin smallDevice {
@media screen and (min-width: $breakpoint-sm) {
@content;
}
}
@mixin mediumDevice {
@media screen and (min-width: $breakpoint-md) {
@content;
}
}
@mixin largeDevice {
@media screen and (min-width: $breakpoint-lg) {
@content;
}
}
@mixin xlDevice {
@media screen and (min-width: $breakpoint-xl) {
@content;
}
}
mixin
안에 media querie
를 설정한다.
body {
@include smallDevice {
background-color: blue;
}
@include mediumDevice {
background-color: tomato;
}
@include largeDevice {
background-color: purple;
}
@include xlDevice {
background-color: brown;
}
}
필요한 곳에서 @include
를 호출하면 반응형으로 스타일링할 수 있다.