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

コーディング

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

Sassとは?

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

Sassで何ができるか?

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

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

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

Prepros

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

Your Friendly Web Development Companion

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

SassのGUIコンパイラは「Prepros」がおすすめ!使い方と機能のまとめ
Sassに挑戦しようと思ったけどコンパイルのための環境構築が難しそうでやめてしまった方も多いのではないでしょう…

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などの便利なものもあります。長くなるので今回は割愛しますが、
これも使えるとかなり便利になるでしょう。

参考になる本

Web制作者のためのSassの教科書

この本は私も持っています。今回説明したもの以上のものが、ほぼ載っております。

【初心者向け】ここから始める「Sass」の使い方まとめ
CSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。 対象の方は…

こちらのサイトも参考になりそうです。

Gulpとは?

タスクランナーと呼ばれる、Web制作の処理を自動化するツールです。
こちらは、今回は参考情報程度にまとめておきます。

Gulpで何ができるの?

  • Sassのコンパイル
  • 画像の圧縮
  • ファイルの整理
  • CSSの整理
  • JSの整理

など、いろいろ塵も積もれば山となりそうな細かな作業を自動化できるツールです。

導入と参考サイト

必要なのは

  • Node.jsのインストール
  • Gulpのインストール
  • gulpfile.jsという環境設定のjavascriptの作成

また、ics.mediaさんのサイトに、最新のGulpの導入方法が書いていますので、このページはブックマーク必須と言えるでしょう。

絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう...

最後に

うまくまとめきれませんでしたが、SassとGulpを組み合わせることにより、コーディングというフローが早くなります。検討してしてみてはいかがでしょうか。

コメント

タイトルとURLをコピーしました