Sass/Scssを使ってみる
cssについてはHTMLを多少学習した人であるなら、おそらくみんな最低限名前くらいは知っていると思う。しかし、Sassというものの存在は知らない人も多いのではないか。（私もその一人だった）
今回はSassの記述方法と特徴をまとめてみようと思う。
事前準備
Visual Studio CodeにLive Sass Compilerを追加しておく
サンプル用HTML
<html>
<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="style.css">
</head>
<body>
<div id="container">
<button class="btn">Button</button>
</div>
</body>
</html>
※linkタグの参照先はファイル名.cssにしておきます。（ファイル名.scssをcssにコンパイルする為）
Sass
$cWhite: white;
$cBlack: black;
.btn{
background-color:$cWhite;
color:$cBlack;
border: 1px solid $cBlack;
padding: 10px 40px;
font-weight: 600;
cursor: pointer;
margin: 50px 0;
transition: all 0.5s;
&:hover {
background-color: $cBlack;
color: $cWhite;
}
}
入れ子の中の&(アンパサンド)は親セレクタを意味する。
(今回だとclassがbtnである要素がマウスオーバされた時のスタイルを指定)
通常のCSS（コンパイル後）
.btn {
background-color: white;
color: black;
border: 1px solid black;
padding: 10px 40px;
font-weight: 600;
cursor: pointer;
margin: 50px 0;
transition: all 0.5s;
}
.btn:hover {
background-color: black;
color: white;
}
従来のcssだと、どのタグやclassに属しているかをそれぞれ分けて記載する必要があり、第三者には読みずらい点がある。一方Sassの場合、入れ子構造（ネスト）で記述出来る為、プロパティの記述されている箇所が一目瞭然。変なところでスタイルが重複したりしにくくなる。
感想
今回、初めてSass方式での記述をしてみたが、確かにこれはイケてる。
(サンプルの量が少なかったので、これだけだとメリットを感じずらいかもしれないが…)
自分と同じように初めて知ったという人は是非使ってみてほしい。
↧