コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。

CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。

Index

1.Sassとは
2.インストール
3.SassファイルをCSSファイルに
4.実際に作る
5.参考文献

1.Sassとは

Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換（コンパイル）します。

コンパイルされたファイルはSCSSの記述に従い自動的に変換されるので、書き手による構文の違いが発生しません。また、CSSの記述では使うことのできない変数や定数、演算が使えたり、Sass独自のMixinsといったもの活用することで、より合理的に記述することが出来ます。

2.インストール

実際にインストールですが、環境を整えるのに幾つかやり方があります。今回は僕が実際にやった方法で記述しますがこれがオーソドックスというわけではありません。

まずSassを扱うにあったってRubyが必要ですのでこれをインストールします。MacOSX をお使いの方はすでにRubyがインストールされているとのことですが、windowsユーザー及び、Linuxユーザーはまずそれらをインストールする必要があります。

僕はwindows7ユーザーなのでまずRubyのインストールをするため、http://rubyinstaller.org/downloads/ からダウンロードしました。

インストールが終わったら「Start Command Prompt with Ruby」からSassのインストールを行います。インストールするにはコマンドを入力して実行を行いインストールするわけですが、コマンドそのものは簡単なので臆することはありません。

コマンド: gem install sass

自宅のPCだと問題はなかったのですが、会社のPCだとプロキシが邪魔をしてインストール出来ませんでした。どうすれば良いのか分からなかったんですが、ツイッターで@ryuoneさんにプロキシの設定を教えてもらいました。ありがとうございます

ryuone

インストールが終わったらひとまずScssファイルを作成してみます。ファイル名は何でも良いのですがオーソドックスにstyle.scssを作成します。中身はひとまず何でも構わないので

#main{
    width:800px;
    height:50px;
}

3.SassファイルをCSSファイルに

ひとまずSassのファイルが出来たのでCSSファイルにコンパイルしてみます。

コマンド: sass –watch style.scss:style.css

尚、このコマンドを実行してウィンドウを立ち上げておけばScssファイルに変更があったかどうかをウォッチ（監視）して自動的にコンパイルされます。なのでサクサクソースを書いて行くことができます。終了するときはCtrl+Cをキーボードから操作すれば終了できます。

4.実際に作る

CSSを実際にSassを使って書いてみます。少し書き方が違いますが、かなり似ていますし共通する部分が非常に多いです。なので思ってるよりもすんなり入れると思います。

ネスト

同じセレクタで何回も呼び出される子セレクタが複数あるときに親セレクタを一度宣言するだけで小セレクタを楽に指定できます。

#sidebar ul{
    width:800px;
}

#sidebar ul li{
    float:left;
}

#sidebar{
    ul{width:800px;}
    li{float:left;}
}

という書き方ができます。何度も#sidebarと記述しなくて済む上にソース上での管理もしやすいです。

親セレクタの参照「&」

:hoverのような疑似要素もネストして管理することができます。指定には&を使い、CSSにコンパイルされた時に親セレクタに書き換わります。

a{
    color:#06f;
}
a:hover{
    color:#88f;
}
a:visited{
    color:#d0d0ff;
}

a{
    color:#06f;
    &amp;amp;:hover{color:#88f;}
    &amp;amp;:visited{color:#d0d0ff;}
}

変数「$」

プログラムでは必須とも言える変数が使えます。変数は定義されるとそのスタイルシート全体で利用できます。指定には$マークを付けて宣言します。

$mainbox:1200px;


#sidebar{
    width:$mainbox/2;
}

このソースでは変数$mainboxに1200pxという値を入れ、実際には#sidebarの中で1200/2という計算式でwidth指定をしています。
#sidebar {
    width: 600px;
}

ミックスイン「Mixins」

よく使うプロパティやセレクタをまとめて定義しておいて、必要箇所で呼び出すことが出来る機能です。

@mixin radius-sample{
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
}


#demo{@include radius-sample;}
#sampleblock li{@include radius-sample;}

<p>@mixinでradius-sampleを定義したものを、再利用したい箇所で@includeを使って呼び出します。CSSにコンパイルされると以下のようになります。</p>

#demo{
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
}


#sampleblock li{
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
}

<p>さらにミックスインを使う際に変数を活用すると汎用性が上がり便利になります。</p>

@mixin radius-sample($radius:10px){
    -webkit-border-top-left-radius: $radius;
    -webkit-border-top-right-radius: $radius;
    -webkit-border-bottom-right-radius: $radius;
    -webkit-border-bottom-left-radius: $radius;
    -moz-border-radius-topleft: $radius;
    -moz-border-radius-topright: $radius;
    -moz-border-radius-bottomright: $radius;
    -moz-border-radius-bottomleft: $radius;
}


#demo{@include radius-sample;}
#sampleblock li{@include radius-sample(5px);}

#demo {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px; }


#sampleblock li {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px; }

値を変数にしておけば、要素によって値の変更が簡単にできます。

セレクタの継承「@extend」

一度利用したセレクタを継承して使うことができます。よく使うものを定義しておいて、それを元に拡張するときに便利です

.whitebox{
    width:120px;
    height:80px;
    background:#fff;
}

ul.sidemenu{
    @extend .whitebox;
    color:#06f;
}

.whitebox, ul.sidemenu {
    width: 120px;
    height: 80px;
    background: #fff; }

ul.sidemenu {
    color: #06f; }

参考文献
上記で紹介したのは一部で、環境を整える手段は他にもありますし、実際のコーディングでも出来ることはまだ他にもあります。

Sassって聞くと何それ？なんか難しそうって構えがちですけど、環境さえ整えてしまえば非常にスピーディーにコーディングが行えるようになるので

ホントおすすめです。プロジェクト単位で動いてる場合は関わる人全員がSassを使って書いて行く必要がありますけど、敷居自体はそれほど高くないので

検討してみるのも有りかもしれませんね。
今回記事を書く及び勉強に使わせていただ来ました

Sass – チュートリアル
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 – CSS HappyLife

特にCSS HappyLifeさんはSassに関する記事をシリーズ化して書いているので内容もボリューミーになっています。もっと知りたい方は是非チェックしてみてください。

		
			お役に立てたらお願いします🙇
			
		
		
			Ad




			


			

		

	Share