10. SCSS
SCSS์ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ ๋ํด์ ์์๋ณธ๋ค.
vite + react + typescript + swc + scss ์ค์น
npm create vite@latest my-app -- --template react-swc-ts
npm install -D sass
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
1. css file ์ ํ์ฅ์๋ฅผ .scss ๋ก ๋ณ๊ฒฝ
2. link ์ญ์ ๋ณ๊ฒฝ
<link rel="stylesheet" href="./index.scss" />
3. Nesting
ul {
list-style-type: none;
padding: 0;
display: flex;
gap: 10px;
padding: 10px;
li {
background-color: tomato;
color: white;
padding: 10px;
border-radius: 7px;
a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
&:hover {
opacity: 0.8;
a {
color: gray;
}
}
}
}
4. mixin
@mixin alert($bgColor) {
background-color: $bgColor;
margin: 10px;
padding: 10px 20px;
border-radius: 10px;
border: 1px dashed black;
}
.success {
@include alert(green);
}
.warning {
@include alert(tomato);
}
.error {
@include alert(yellow);
}
5. mixin with content
@mixin alert($bgColor, $borderColor) {
background-color: $bgColor;
margin: 10px;
padding: 10px 20px;
border-radius: 10px;
border: 1px dashed $borderColor;
@content;
}
.success {
@include alert(green, blue) {
font-size: 12px;
}
}
.warning {
@include alert(tomato, white) {
font-size: 10px;
text-decoration: underline;
}
}
.error {
@include alert(yellow, black) {
font-size: 15px;
text-transform: uppercase;
}
}
6. mixin with midea query
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
$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 xlargeDevice {
@media screen and (min-width: $breakpoint-xl) {
@content;
}
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@include smallDevice {
background-color: blue;
}
@include mediumDevice {
background-color: red;
}
@include largeDevice() {
background-color: purple;
}
@include xlargeDevice() {
background-color: black;
}
}
Last updated