作業効率化のためSass（Scss)とGulpは必要！

こんにちは。新しい職場で心機一転な私です。以前からSass使えやら、なんやら言っていましたが、肝心のSassとは何ぞやという記事がなかったので、今回はその話題と、作業効率化のために必要な、Gulpについて書いていきたいと思います。

Sassとは？
1. Sassで何ができるか？
どうやったらSassが使えるの？
1. Prepros
Sassの書き方
Gulpとは？
1. Gulpで何ができるの？
2. 導入と参考サイト
最後に

Sassとは？

CSSを効率的に書く、言語の事で、SassとScssの2種類あります。多くはScssがよくつかわれていますが、便宜的にSassとして説明いたします。

Sassで何ができるか？

例えば、CSSの数値を計算出来たり、よく使いそうなCSSをパーツ化することができます。
スマホサイトを作るときはパーセンテージを出すとき電卓をよく使うと思いますが、それを使わなくても、言語で計算できるため、

どうやったらSassが使えるの？

まず、CSSとは違い、保存したらコンパイルという作業が必要になります。まずは、GUIのツールからご紹介します。

Prepros

インストールはこちらからできます。

Your Friendly Web Development Companion

使い方の参考サイトはこちらです。

SassのGUIコンパイラは「Prepros」がおすすめ！使い方と機能のまとめ | Web Design Trends

Sassに挑戦しようと思ったけどコンパイルのための環境構築が難しそうでやめてしまった方も多いのではないでしょうか。Sassのコンパイルにはコマンドラインを利用する方法が主流ですが、実はGUIコンパイラ...

Sassの書き方

ネスト

Sassの特徴として、子セレクタを親セレクタの下に書くような記述ができます。階層で書いていきます。これをネストと言います。

例えばこういうCSSは

.hoge .fuga .test{
   margin-top:30px;
}

Sassで書いてみると。。

.hoge{
  .fuga{
    .test{
      margin-top:30px;
    }
  }
}

ん？ちょっと長いんじゃないの？

たしかにこの単純なCSSだと効果がわからないかもしれません。
次にこういうCSSを書いていきましょう。

.hoge{
  width:200px;
  margin:0 auto;
}

.fuga{
  margin-top:20px;
}

.fuga p{
  font-size:16px;
}

.hoge .test{
   width:160px;
   margin:0 auto;
}

.hoge{
   width:200px;
  margin:0 auto;
  .fuga{
    margin-top:20px;
   p{
    font-size:16px;
    }
  }
  .test{
   width:160px;
   margin:0 auto;
  }
}

このように、fugaというクラスは、階層でまとめて書くことができます。

計算

例えばデザインデータが750pxのスマホで、コンテンツ幅が700pxのデザインだった場合、
コンテンツを計算するCSSは

.hoge{
  width:100%;
}
.hoge-inner{
  width:(電卓で計算）
  margin:0 auto;
}

といったように電卓でいちいち計算するため、電卓の操作ミスといったオペレーションで、たまに間違ったコードを書くことがあります。

.hoge{
  &-inner{
   width:persentage(700/750);
   margin:0 auto;
  }
}

Sassには関数という機能があり、これを使うと自動計算できます。また、加算は＋、減算は-、
掛け算は* 割り算は/　で計算もできます。この関数はpersentageというパーセントを割り出す関数です。また、関数は自分で作ることもできます。少々プログラミング的な考えが必要ですが作れると便利でしょう。

＆記法

先ほどの、Sassで見慣れない、&-innerという部分があったと思います。
これは、&記法と言い親の階層になくても、この書き方を使えば、一部分が共通であれば、
子の階層にScssを書くことができる記法です。また、「.hoge.fuga」といった、2つクラスがある場合にも「&.fuga」と書きますし、疑似要素を使うときにも使いますの。またBEMなどのCSS設計の手法を取り入れている場合、これは効果を発揮します。

変数

変数という概念もあります。変数とはある値を定義したもので、共通部分が多い場合、これを使うことが多いです。

$black:#333;
$red:#fd0000;
$width:96%;

body{
  color:$black;
}

.hoge{
  width:100%:
  .&-inner{
    width:$width;
    margin: 0 auto;
    p{
     color:$red;
    }
  }
}

このコードは、一番上の$black,$red,$widthを定義しており、それぞれの変数を使い、コンパイルすると、CSSでは、定義した値が入るようになります。使いまわしそうな値は変数化した方がいいでしょう。

また、mixin,extendなどの便利なものもあります。長くなるので今回は割愛しますが、
これも使えるとかなり便利になるでしょう。