Sassについて最低限知っておきたい５つの基本機能

はじめに

先日からSassについて実践で使えるようになっておくために本を購入し、実際にコーディングしながらアウトプットしました。正直、これからもどんどん使っていく機能だと思うので自分の備忘録としてSassの基本機能を残しておこうと思います。Sassの基本機能に関してはたくさんネット上に転がり落ちてますが、初心者中の初心者はこちらの本を見ながら手を動かしたほうが習得は早いかと思われます。それぐらい丁寧に解説されていました。node.jsのインストールの仕方などはこちらの本を参考にして、Sassの大まかな機能などは下記でまとめたことを参考にしてもらえると幸いです。

そもそも"Sass"ってなに？

SassはCSSを拡張したメタ言語。CSSをより便利に効率的に書けるようにした言語。
使えるよになるためにはNode.jsのインストールやgulpが使えるようになる必要があるのですが今回は省略・・・

目次

[1.基本のネスト](#1 基本のネスト)
[2.親セレクタの参照](#2 親セレクタの参照)
[3.変数](#3 変数)
[4.演算](#4 演算)
[5.ミックスイン](#5 ミックスイン)

1.基本のネスト

この機能が一番使う代表的な機能な気がする。使ってみた実感としてはCSSがHTMLのようにツリー構造になっているため可読性が秀でている。見やすい、書きやすい。
以下は実際に自分が書いた時の例です。

HTML

HTML
    <header>
      <h1 class="corp_logo">
        <a href="#">CITY<span class="logo_last">Lab</span></a>
      </h1>
    </header>

　ナビゲーションを作るHTMLがあって、通常のCSSで書くと下記

CSS

CSS

header {
  width: 100%;
  height: 80px;
  text-align: center;
}

header h1{
  font: normal 28px/10px "Helvetica Neue";
  color: #029ae2;
  float: left;
  margin: 30px;
}

headerの近接セレクタであるh1を記述していますが、Sassで書くと・・・

Sass

Sass

header {
  width: 100%;
  height: 80px;
  text-align: center;
  h1{
    font: normal 28px/10px "Helvetica Neue";
    color: #029ae2;
    float: left;
    margin: 30px;
　}
}

こういう感じで入れ子構造にできるわけですね。ネスト機能は見やすい！！

2.親セレクタの参照

&(アンパサイド)を使うやつですね。疑似要素とかと組み合せたり。
いままで親セレクタをコピペしてたけどこれは一文字で済むやつ

CSS

CSS

a{
 text-decoration: none:
}
a:hover{
 text-decoration: underline;
}

Sass

Sass

a{
 	text-decoration: none:
 	&:hover{
 	text-decoration: underline;
    }
}

3.変数

マークアップ言語で変数とか使えるんだって驚きました。要は定義してあげて、呼び出すことができる機能でして背景色や文字のサイズとか何ページにも渡って使い回すときとか便利ですね。プラモデルで例えると、色が付いた腕とか足とかのパーツをいろんなところで使い回す感じ。

Sass

例えばよく使うカラーコードを定義してあげて

$sky-blue: #019bdf;

  .news_title_wrapper {
    width: auto;
    h2 {
      color: $sky-blue;
    }

	.news_tag {
        background-color: $sky-blue;
        color: #ffffff;
        text-align: center;
    }
    
*定義した変数を呼び出せる範囲があるので気をつけるように ！！   

4.演算

widthからpaddingの値を引くと行った計算が必要なとき効果を発揮します。
面倒な計算を処理してくれるのって地味に嬉しいですね。
例えばさっきの変数と演算機能をかけ合わせると

Sass

Sass
$news_contents_width: 570px;

.news_items{
	$padding: 20px;
	width: $news_contents_width -$padding *2:
    padding: 100px $padding:
}

CSSに変換(コンパイル)

CSS

.news_items{
	width: 530px:
    padding: 100px 20px:
}

5.ミックスイン

ミックスイン(@mixin)とは

スタイルの集まりを定義して、いろんなところで使い回せる機能。
引数も指定できるためSassの中でも強力な機能。ボタンのスタイルとかに使う。
プラモデルで例えると、着色とかはしていないが大方完成されたガンダムみたいな。引数の指定で好きな色とかポーズのカスタマイズができる。とにかくすごい。
@mixinで定義、@include[定義名] で呼び出し

Sass

Sass

//定義
@mixin news_items($value){
	-moz-border-radius: $value;
    -webkit-border-radius: $value;
    border-radius: $value;
}
//呼び出し
.news_wrapper{
	@include news_items(30px);
    background-color: #333:
}
.item{
	@include news_items(100px 200px);
}

CSSに変換(コンパイル)

CSS

.news_wrapper{
	-moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    background-color: #333:
}
.item{
	-moz-border-radius: 100px 200px;
    -webkit-border-radius: 100px 200px;
    border-radius: 100px 200px;
}

まとめ

1.基本のネスト
（HTMLのようなツリー構造）
2.親セレクタの参照
（&,疑似要素とかに使う）
3.変数
（ex/ $sky-blue: #019bdfV:）
4.演算
（ex/ - + * /）
5.ミックスイン
（@mixin [定義名], @include [定義名]）

どれも強力な機能で、しかも後からの変更に強い
CSSは１から組むこともあるけど、過去に作ったものからパーツを借りてくることもあるから長期的に考えてとても効率的な書き方ですね。
これからどんどん使っていきたいですね！