scss
.frame {
padding : 20px;
.items {
font-weight: bold;
color: crimson;
.item {
margin: 20px;
font-size: 18px;
border: 1px solid #000;
}
}
}
css
.frame {
padding : 20px;
}
.frame .items {
font-weight: bold;
color: crimson;
}
.frame .items .item {
margin: 20px;
font-size: 18px;
border: 1px solid #000;
}
{} 중괄호
와 ; 세미콜론
의 유무에 따라 사용방식이 아주 조금 다름.sass
이고 SCSS는 .scss
scss
.frame {
padding : 20px;
.items {
font-weight: bold;
color: crimson;
.item {
margin: 20px;
font-size: 18px;
border: 1px solid #000;
}
}
}
sass
.frame
padding : 20px
.items
font-weight: bold
color: crimson
.item
margin: 20px
font-size: 18px
border: 1px solid #000
.sass
파일과 .scss
파일은 브라우저가 인식하지 못함.css
.sass
파일과 .scss
파일을 .css
로 변환(compile) 해야 함.css
파일이 실시간으로 갱신되어야 함ctrl
+,
)에서 sass 검색 후 Livs Sass Compiler 클릭Settings : Formats
의 settings.json
클릭"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": null,
"savePathReplacementPairs": null
}
]
참고
"savePath": null
.scss
파일이 있는 위치에 .css
파일이 저장됨"savePath": /
.scss
파일이 있는 위치와 관계 없이 .css
파일이 루트(root) 폴더의 가장 상단에 저장"savePath": /css
.scss
파일이 있는 위치와 관계 없이 .css
파일이 루트(root) 폴더안에 css 폴더를 만들고 이 폴더 안에 저장됨이제 .scss
파일을 만들면 하단에 Watching.. 이라는 표시와 함께 자동으로 .css
파일이 생성된다.
.css
파일을 html
에 link 하여 사용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>SCSS start</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="red-color">Start SCSS Study!</h1>
</body>
</html>
style.scss
$main-color : crimson;
.red-color {
color: $main-color;
}