๐ฆ
29์ผ์ฐจ
Part 6. SCSS
Ch 1. SCSS
Ch 1. SCSS
SCSS์ ์ค์ฒฉ ๊ธฐ๋ฅ์ ํตํด ์ ํ์ ๋ฐ๋ณต์ ์ค์ฌ์ค๋ค!
SCSS๋ฅผ CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ํตํด CSS๋ก ๋ณํ(์ปดํ์ผ)ํ๋ค.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.scss" />
</head>
<body>
<body>
<div class="container">
<h1>Hello SCSS!</h1>
</div>
</body>
</body>
</html>
/* main.scss */
$color: royalblue;
.container {
h1 {
color: $color;
}
}
๋ค์์คํ์ด์ค๋ ์ด๋ฆ์ ํตํด ๊ตฌ๋ถ ๊ฐ๋ฅํ ๋ฒ์๋ฅผ ๋ง๋ค์ด๋ด๋ ๊ฒ์ผ๋ก ์ผ์ข ์ ์ ํจ๋ฒ์๋ฅผ ์ง์ ํ๋ ๋ฐฉ๋ฒ์ ๋งํ๋ค.
/* ๊ฐ์ ธ์ค๊ธฐ */
@import "./sub", "./sub2.scss";
$color: royalblue;
.container {
h1 {
color: $color;
}
}
/* ๋ฐ์ดํฐ ์ข
๋ฅ */
$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // ๋ฐฐ์ด
$map: ( // ๊ฐ์ฒด
o: orange,
r: royalblue,
y: yellow
);
.box{
width: 100px; // number
color: red; // color
position: relative; // string
}