SASS
Syntactically Awesome Style Sheet
Sass는 기존의 CSS를 보완해주기 위해 만든 스타일시트 언어이며 CSS의 전처리기이다. sass를 작성하여 바로 html의 링크로 들어가는 것이 아닌 sass가 css로 변환되어 html의 link로 들어가진다.
예를 들어 001.sass를 작성하면 001.sass가 001.css로 변환되고 html상에서 link에 href="/001.css/"로써 들어가게된다.
sass는 기본적으로 중괄호가 들어가지 않는다
$font-red: red
.one
color: $font-red
sass가 css를 보완해주기 위해 만들어진 것은 맞으나 기존의 중괄호를 사용하던 방식이 아니기에 다소 어려운 부분이 있어 좀더 css같은 sass를 개발하였다. 그것이 scss이다. 참고로 확장자 명은 각각 .sass / .scss 이다.
scss
scss는 sass와는 다르게 중괄호를 사용한다. 그로 인해 구분이 더 용이하다.
$font-red: red;
.one{
color: $font-red;
}
개인적으로 scss가 훨씬 편한거 같다. 중괄호가 들어감으로써 더욱 더 구분하기 편해졌다는 장점이 있다.
이런 sass/scss 에게도 단점은 존재하는데 우선 컴파일이 되기 위해 도구가 필요하다.
다루기에 앞서 내용이 많을꺼 같아 1/2장으로 나누어 정리하려한다.
sass/scss를 사용하려면 위에서 말했듯이 도구가 필요하다. vscode의 extensions 중 live sass compiler가 필요하다. 해당 프로그램을 설치하면
위의 사진과 같이 하단바에 Watch Sass가 생긴다. Watch Sass를 실행시키면
위와 같이 Watching...이 된다.
scss는 Nesting(중첩)을 사용 할 수 있는데, 이를 사용하면 html과 비슷한 시각적 효과를 줄 수 있어 보다 효과적이게 cssf를 작성할 수 있게 해준다.
// style.scss
div{
width: 100px;
height: 100px;
background-color: #333;
ul{
list-style: none;
li{
color: white;
font-size: 16px;
}
}
}를 입력하게 되면
// style.css
div {
width: 100px;
height: 100px;
background-color: #333;
}
div ul {
list-style: none;
}
div ul li {
color: white;
font-size: 16px;
}
/*# sourceMappingURL=style.css.map */위와 같은 style.css가 만들어 지게 되고,
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>Hello World</li>
<li>Hi Siri</li>
<li>Ok Google</li>
</ul>
</div>
</body>
</html>라는 HTML을 작성하게 되면
위와 같은 출력물이 나오게 된다.
이런식으로 css를 작성하지않아도 scss를 통해 html에서 작성하듯이 매끄러운 코딩을 할 수 있게된다. 아직 할 내용이 더 많지만 그것은 다시정리하여 내일 올려야겠다.
