はじめに
ｋ．ｓ．ロジャースの藤本です。
超初心者向けです。
社内でSCSSの話題が出たので今更だけどSCSSを触ってみました。
間違い・助言等があればコメントにてお知らせいただけたらと思います。
SCSSとは
CSSを効率的に書くための記法
- .sass (Ruby / Haml)
- .scss (CSS3) こちらが主流
コマンド例
sass scss/main.scss:css/main.css-
--style expandedを付けると通常のインデントになる -
sass --watch scss:cssで自動ビルド
実際に使ってみた機能
個人的に使ってみたいと思った機能を抜粋して触っています。
他にも色んな機能があるとは思いますが、割愛させていただきます。
初期（スタイルなし）
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css" media="all">
<body>
<div id="main">
<p>テキスト</p>
</div>
<div id="sub">
<p>テキスト</p>
</div>
</body>
</html>
この状態では特にスタイルも付けていないのでただの文字列ですね
ネスト
# main {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: #ccc;
p {
font-size: 2em;
}
}
簡単なスタイルを適用させました
ここから機能にあわせて、スタイルを付け加えていきます
&（アンパサンド）
# main {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: #ccc;
p {
font-size: 2em;
&:hover {
text-decoration: underline;
}
}
}
画像じゃ伝わらないですが、カーソルを文字にのせています
問題なくhoverイベントが発火していることが確認できました
変数
$defaultSize: 300px;
# main {
width: $defaultSize;
height: $defaultSize;
line-height: $defaultSize;
text-align: center;
background-color: #ccc;
p {
font-size: 2em;
&:hover {
text-decoration: underline;
}
}
}
見た目の変化はないので画像は割愛します。
300px が正しく展開されていることが確認できました。
演算
$defaultSize: 150 + 150px;
# main {
width: $defaultSize;
height: $defaultSize;
line-height: $defaultSize;
text-align: center;
background-color: #ccc;
p {
font-size: 2em;
&:hover {
text-decoration: underline;
}
}
}
こちらも見た目の変化はないので画像は割愛します。
正しく計算された結果が表示できていることが確認できました。
extend
$defaultSize: 150 + 150px;
# main {
width: $defaultSize;
height: $defaultSize;
line-height: $defaultSize;
text-align: center;
background-color: #ccc;
p {
font-size: 2em;
&:hover {
text-decoration: underline;
}
}
}
# sub {
@extend #main;
}
クラス名subが含まれていた下部の要素に
スタイルが継承されていることが確認できます
mixin
$defaultSize: 150 + 150px;
@mixin border($size) {
border-radius: $size * 1px;
}
# main {
width: $defaultSize;
height: $defaultSize;
line-height: $defaultSize;
text-align: center;
background-color: #ccc;
p {
font-size: 2em;
&:hover {
text-decoration: underline;
}
}
@include border(100);
}
# sub {
@extend #main;
@include border(50);
}
今回はこれで最後です
$size に与える値を変えています
ちなみに最後にビルドした結果、CSSはこうなってました
# main, #sub {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: #ccc;
border-radius: 100px;
}
# main p, #sub p {
font-size: 2em;
}
# main p:hover, #sub p:hover {
text-decoration: underline;
}
# sub {
border-radius: 50px;
}
おわりに
結構おもしろいですね。
確かに慣れたらコーディングが速くなるというのは間違いないかもしれない気がしました。
なんとなく「変数・継承・ネスト」辺りが使えるぐらいの知識はありましたけど
思っていたよりもプログラミングっぽく使えて楽しいです。
ビルドがちょっとだけめんどくさいところだけ気になりますが、
watchさせることもできるので少しは楽になりそうです。
あとは今回かなり小規模だったので速度的な部分は検証できませんでしたが
大型プロジェクトだったり、複数のSCSSファイルをビルドさせたりした場合の速度感は気になるところです。
今更感ですが、これから新規でCSSを書くことがあるときはSCSSで書いてみようかなと思うほどには良かったです。
Wantedlyでもブログ投稿してます
Techブログに加えて会社ブログなどもやっているので、気になった方はぜひ覗いてみてください。
https://www.wantedly.com/companies/ks-rogers