一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

Sassを使ってみた

今日は、最近よく聞くCSSメタ言語「Sass」を実際に使った時の備忘録を書いてみたいと思います。

まずSassの特徴でざっと思いついたものを挙げてみると、、

コマンドライン or GUIツールコンパイルして使う。
・ネスト(入れ子)構造でCSSをより簡潔に書くことができる。
・変数やmixin、functionなど、プログラミング的な要素を取り入れてCSSを書くことができる。

などですかねー

使いこなせたら便利だろーなぁ。。と前々からチェックしておりました!!


ではこれらについて、実際に使ってみた時のことを書いてみたいと思います。


目次
 1,sassをインストールしてみた
 2,実際に書いてみた(ネスト構造、変数)
 3,コンパイルしてみた
 4,他の特徴も取り入れてみた(mixin, 継承)


1, sassをインストールしてみた

まずはsassを入れないと話にならないので、早速インストール。

とはいってもメッチャ簡単で
ターミナルでこのコマンド叩くだけで終了でした!!!

$sudo gem install sass


こんだけ。


ちなみにバージョンは

$sudo sass -v     //3.2.3でした。


あ、SassはRubyで書かれているのでほんとはまずRubyを入れないといけないのですが、Macにはもともと入ってるので今回はそのプロセスはナシです。あしからず。。


2, 実際に書いてみた(ネスト構造、変数)

Sassは.scssという拡張子がついたファイルに記述します。
(ほんとは.sassという拡張子のものもあるらしいのですが、こっちは僕が使ったことないので割愛します)

んで、そのファイルをコマンドラインGUIツールコンパイルして、吐き出されたCSSファイルを対象となるHTMLに適用するという流れになります。


まずネスト構造や変数を使用した例を書いてみました。

/よく使う値はあらかじめ変数に格納する
$content-width:500px;
$content-height:500px;

.content{
      width:$content-width; //変数を指定するだけで格納された値を適用してくれる
      height:$content-height;
      background-color:red;
      //わざわざ.content p{ }とかしなくても、ネスト構造で楽に記述できる。
      p{
          width:$content-width/2;//計算式を指定するとその結果を適用してくれる
          height:$content-height/2;
          background-color:blue;
          border:1px solid white;
          a{
             display:block;
             color:white;
             &:hover{ //:hoverなど擬似要素も&を使うだけで楽に書ける
              	color:yellow;
             } 
          }
      }

こんな感じでネスト構造でスタイルが簡潔に書けたり、擬似要素が&:でつなぐだけで書けたり、変数の中によく使う値を入れて使いまわせたりできるみたいです。

これは便利ですな!!


3, コンパイルしてみた

コンパイルはターミナルからやってみました。GUIツールを導入するほうがダルそうだったので…

まず以下のようなフォルダ構成をつくり、2で書いたscssファイルはstyle.scssとして保存しました。

sass_sample
|
|--scss--style.scss
|
|--css


次にターミナルでsass_sampleフォルダに移動します。

cd sass_sampleのあるとこ

んでコンパイルは、

sass --watch scss:css

これだけでOK!
無事にcssフォルダにstyle.cssが作成されてました。

中身をみてみると、

.content {
  width: 500px;
  height: 500px;
  background-color: red; }
  .content p {
    width: 250px;
    height: 250px;
    background-color: blue;
    border: 1px solid white; }
    .content p a {
      display: block;
      color: white; }
      .content p a:hover {
        color: yellow; }


…たしかにできとるけど、なんか見づらいorz


そこで調べてみると、どうやら--styleってのを付け加えてコンパイルすると綺麗に整えてくれるっぽい。
ひとまず--style expandedってやつを試してみる。

sass --style expanded --watch scss:css


でてきたのが、

.content {
  width: 500px;
  height: 500px;
  background-color: red;
}
.content p {
  width: 250px;
  height: 250px;
  background-color: blue;
  border: 1px solid white;
}
.content p a {
  display: block;
  color: white;
}
.content p a:hover {
  color: yellow;
}

うん、こっちのほうが綺麗で見やすい!!しばらくはこのやり方でやっていこうと思います。
あと、他にも--style compressed (たぶん圧縮した形式)とかもあるらしいので、また機会があれば試してみます!


4,他の特徴も取り入れてみた(mixin, 継承)

最後にSassの特徴であるmixinや継承を使ってみました。


こんな感じかな〜と恐る恐る書いてみたのがコレ。

//mixin

//引数渡すパターンのmixin。デフォルトで$color:redを指定。
@mixin border-style($color:red){ 
    border: 1px solid black;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    background-color: $color;
}

.content1{
//引数を指定しない場合はデフォルトのredが適用される。
	@include border-style(); 
}
.content2{
//引数を指定したら、デフォルトの指定を上書きして適用される。
        @include border-style(blue);

}


//継承

.link1{
	display:block;
	color:white;
	text-decoration:none;
}
.link2{
	@extend .link1;
	&:hover{
		color:yellow;
	}
}


で、3の要領でコンパイルしてみるとできたcssはこうなりました。

.content1 {
  border: 1px solid black;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: red;
}

.content2 {
  border: 1px solid black;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: blue;
}

.link1, .link2 {
  display: block;
  color: white;
  text-decoration: none;
}

.link2:hover {
  color: yellow;
}

こんな感じで、mixinにあらかじめスタイルをまとめておいて、@includeでそれを使いまわしたり、@extendで前に書いたスタイルを別のセレクタと共用できたり。
ほんとはmixinとかは_mixin.scssっていうファイル(partialっていうらしい)を作ってそれを@importしたほうが良いみたいやけど、今回はコード量も少ないので、ひとつのファイルにまとめました。

てかめっちゃ便利!!ハマる!これはもっと勉強して使いこなせるようにならねば!!


今後は他の機能も使ったり、さらにSassのフレームワークであるCompassを使ったりもしていきたいと思います。

小さなことからコツコツと。