【初心者】 Sassを使ってみよう！

Sassについて勉強会を行ったのでここにもまとめておきます。
今回はインストール方法はMac限定でまとめていきます。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#インストールしよう！
##Sassって何？
インストールする前にSassの説明から。
Sassとは、Syntactically Awesome Stylesheets」の略で、直訳すれば「構文的に優れたスタイルシート」という意味になります。簡単に言うと、CSSを効率良く書くための拡張機能！

##Sassをインストールしよう！
Sassをインストールするためにはrubyがインストールされていなければならないので、ターミナル上で下記コマンドを打ち、rubyがインストールされているか確認します。まあ、Macならデフォルトであるので確認するまでもないですが。。

$ ruby -v

下記コマンドを打ってSassをインストールします。

$ sudo gem install sass --version “3.4.25”

##compassって何？
Sassをインストールしたならついでにcompassもインストールしてしまいましょう！
Compassとは、Sassを元に開発されたCSS記述を効率化するツール。
例えば、ベンダープリフィックス（-webkit-や-moz-など）を自動で付けてくれる！

##compassをインストールしよう！

$ sudo gem install compass

このコマンドでインストールできます。

#準備しよう！
style.scssファイルを作成し、compassを使えるように@import "compass;"とscssファイルに書きます。

##補足・・・
Sassには2種類の書き方があります。

• Sass（インデント）記法
• scss記法
  この２つです。今回紹介するのはscss記法なので拡張子は.scssです！Sass記法を使いたければ、拡張子を.sassにすればいいだけです！

##コンパイル方法
Web上ではHTML/CSS/JavaScriptしか読み込んでくれないのでscssファイルをCSSファイルに変換しなければなりません！下記コマンドでCSSファイルに変換されます。

$ sass --compass --watch style.scss:style.css

この--watchというのは、もしこれがなかったらいちいちscssファイルの更新があるたびにコマンドを打ってcssファイルに変換しなければなりませんが、--watchがあることでscssファイルに変更があるたびに自動でcssファイルに変換してくれるという機能です！ちなみに、style.scssとstyle.cssのstyleの部分はファイル名なので任意で大丈夫です。

##コンパイル結果

write style.css
write style.css.map

コンパイルした結果、ターミナルに上記のような結果が表示されると思います。また、ファイルにもstyle.cssファイルとstyle.css.mapファイルが生成されたと思います。この.mapファイルはcssとscssファイルを結びつける役割を持つファイルで、デベロッパーツールを確認してもらったら分かると思いますが、記述されているcssの位置がscssファイルのどこに記述せれているか表示されていることが分かると思います。web上ではscssファイルを読み込まないため.mapファイルでweb上で読み込んだcssファイルをscssファイルと結び付けているってことです。

#基礎編

##セレクタのネスト
HTMLと同じ構造になっていることがわかります！入れ子構造ですね。

.scss

.menu{
   width: 250px;
   ul{
      list-style-type: none;
   }
}

.css

.menu{
   width: 250px;
}
.menu ul{
    list-style-type: none;
}

##プロパティのネスト
font-size や font-weight など-（ハイフン）で繋がっているプロパティも
font: {　としてネストすることができる！

.scss

.menu{
   font:{
     size: 20px;
     weight: bold;
   }
}

.css

.menu{
   font-size: 20px;
   font-weight: bold;
}

##&セレクタ

&を使えば親セレクタ（ここではa）を指定することができる！

.scss

a{
  &:hover{
     color: blue;
  }
}

.css

a:hover{
    color: blue;
}

##変数
$変数: 値; で設定し、$変数名 で設定値を取り出します。

.scss

$baseColor: #32cd32;

.menu{
   background-color: $baseColor;
}

.css

.menu{
   background-color: #32cd32;
}

##文字列の場合の変数

文字列の場合には、$変数名: “文字列”; で囲み、#{$変数名} で値を取り出します。

.scss

$large: "(min-width: 1025px)";

@meida#{$large}{
    .menu{
       background-color: red;
    }
}

.css

@media(min-width: 1025px){
    .menu{
       background-color: red;
    }
}

#発展編

##Mixin
@mixin 変数名($変数名: 値){...} でmixinを作成し、@include 変数名; で使うことができます。

.scss

@mixin btn($color: blue) {
  width: 100px;
  background-color: $color;
}

.btn1 {
  @include button;
}
.btn2 {
  @include button(red);
}

.css

.btn1 {
  width: 100px;
  background-color: blue;
}

.btn2 {
  width: 100px;
  background-color: red;
}

##Extend
@extend セレクタ名; でそのセレクタで使用されているスタイルをコピーする！

.scss

.btn1 {
  width: 100px;
  background-color: blue;
}

.btn2 {
  @extend .btn1;  
  font-size: 10px;
}

css;.css

.btn1, .btn2 {
  width: 100px;
  background-color: blue;
}

.btn2 {
  font-size: 10px;
}

#まとめ
他にも便利な機能が色々あります。例えば四則演算や関数も使えたりします！しかし、大体は上記にあげたようなことが使えれば十分便利です！生産性爆上がりだと思います！基本ネストと変数が使えるだけでももうcssで書きたくないと感じると思います（笑）この機会にscss記法を使いこなしてみましょう。