🦠
29일차
Part 6. SCSS
Ch 1. SCSS
Ch 1. SCSS
SCSS의 중첩 기능을 통해 선택자 반복을 줄여준다!
SCSS를 CSS 전처리기를 통해 CSS로 변환(컴파일)한다.
Sass: Sass Basics
Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s
sass-lang.com
SassMeister | The Sass Playground!
SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...
www.sassmeister.com
<!-- 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
}
