Menu

[css]Sassの便利な点をまとめてみた 〜Sassのコンパイルと出力形式〜

2019.04.18

Sassの便利な点をまとめてみた 〜Sassのコンパイルと出力形式編〜

 

ども、むったんです！

 

超大型連休なGWが目前に迫ってきて、ソワソワし初めている人もいるのではないでしょうか？
ちなみに私のGWは前半戦にキラフェス2Daysが控えてるので、ソワソワレベルではありませんww
今年1月から10年分の曲とコール＆レスポンス、振付けを毎日少しずつ復習しています←余念がない

 

 

そんなフワッフワフーッ↑↑気分のむったんが書く、「Sassの便利な点をまとめてみた」最終回です。
あ、真面目に書いてきますよ 笑

 

Sassの便利な点をまとめてみた

 

 

さて、前回は便利な機能としてmixinやextend等をご紹介しました。
しかし…style.scssファイルを作ってSCSS記法でSassを書いたはいいが…CSSファイルにならないじゃん！って？
そりゃそうだ、コンパイルしてないもの。

 

ということでご紹介するのが、style.scssで書いたSassをCSSファイルにコンパイルします…っていうのが今回のお話です٩(ˊᗜˋ*)و

 

コンパイルできる環境を作ろう

やり方はいくつかありますが、私はPreprosを経てAtomのsass-autocompileにたどり着きました。
どちらも使いやすくて良いですが、私はAtomのsass-autocompileをオススメします。
なぜなら、コーディングするAtomを立ち上げれば、ファイルを保存する度にコンパイルしてくれる優れもの！
ひとつ難点をあげるなら、nodeをインストールしなければいけない…ことですかね。（出でよ、黒い画面！！！

 

なので、黒い画面恐怖症の方のためにPreprosとsass-autocompileの2つのやり方をご紹介するおっ！（ ＾ω＾）

 

まずは、Prepros。
基本的に無料で使用できます（2019年4月現在）。
ただし、ライセンスを取ってねー！ってしつこくでてきます 笑

 

Prepros（https://prepros.io/）
では、サイトに行ったら「Download Free Unlimited Trial」を選択し、使用OSを選択してください。
DLできたら、インストーラーを実行して、インストール完了！

 

preprossの使用方法

 

Continue Trialして、いざ！

 

pregros設定

 

PROJECTに作業フォルダをドラッグ&ドロップすると、Filesに作業ファイルだの中身が表示されます。
さらに、コンパイルしたいscssファイルを選択すると、画像のように詳細設定画面が出てきます。
ひとまず「Process File」ボタンをポチッとすると、cssファイルが生成されます！

 

Output Styleの設定内容については、下で紹介しています。

 

 

では、お待ちかね。
Atomのsass-autocompileでのコンパイル方法です。

 

Atom sass-autocompile（https://atom.io/packages/sass-autocompile）

 

まず、sass-autocompileをインストールする前にnode.jsをインストールしましょう！
ちなみに、node.jsはサーバーサイドで動作するJavaScriptです。
（みんなが大好きJavaScriptはブラウザサイドね）

 

なぜ、node.jsをインストールしなくてはいけないかというと…
node.jsのモジュールでscssファイルをcssファイルにコンパイルしてくれるからです！ヽ(。ゝω·。)ﾉ
だからこの手順を吹っ飛ばすと…「コンパイルできないよー」ってエラーに悩まされますw

 

1.node.jsをインストールする

公式サイトからインストールしてください。

 

2.ターミナルを立ち上げ、node.jsがインストールされているか確認する

1
node -v

 

バージョンが表示されればOK！

 

3.npmもインストールされているか確認

1
npm -v

 

ちなみにnpmはnode.jsのライブラリやパッケージを管理することができるツールで、node.jsをインストールすると自動で一緒にインストールされるはず…なのですが、確認！
こちらもバージョンが表示されればOKです。

 

4.node-sassのインストール

node-sassをインストールするために下記をターミナルに打ち込みます。

 

1
npm install -g node-sass

 

グローバルではなくて、ローカルで使うよ！って方は「-g」はつけなくてもOKです。

 

5.node-sassがインストールされているか確認

1
node-sass -v

 

6.atomでパッケージをインストール

Atomを立ち上げたら設定→インストールで、「sass-autocompile」で検索してインストールしてください。

 

sass-autocompileのインストール

 

さて、環境は整いまして…早速いじった方はネストやmixinの感動を味わっていると思います。
最後に、コンパイルの出力形式をご紹介しますね。

 

コンパイルの出力形式

例えば、こんなscssコードがあったとします。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul {
  color: #62a2ef;
  border: dashed 1px #62a2ef;
  background: #f1f8ff;
  padding: 10px;

  li {
    line-height: 1.5;
    padding: 0.5rem 0;

    a {
      text-decoration: none;

      &:hover {
        color: #fff;
        background: #62a2ef;
      }
    }
  }
}

 

それぞれ。コンパイルしていくとどうなるか見ていきましょう！

 

nested

 

1
2
3
4
5
6
7
8
9
10
11
12
13
ul {
    color: #62a2ef;
    border: dashed 1px #62a2ef;
    background: #f1f8ff;
    padding: 10px; }
    ul li {
        line-height: 1.5;
        padding: 0.5rem 0; }
        ul li a {
            text-decoration: none; }
            ul li a:hover {
                color: #fff;
                background: #62a2ef; }

 

おそらく、デフォルトのままだとnestedになっていると思います。
入れ子状態になってますね。

 

expanded

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul {
    color: #62a2ef;
    border: dashed 1px #62a2ef;
    background: #f1f8ff;
    padding: 10px;
}

ul li {
    line-height: 1.5;
    padding: 0.5rem 0;
}

ul li a {
    text-decoration: none;
}

ul li a:hover {
    color: #fff;
    background: #62a2ef;
}

 

入れ子状態になっていない出力ですね。
これが一番馴染みの形式で、私もよく使用しています。

 

compact

 

1
2
3
4
5
6
7
ul { color: #62a2ef; border: dashed 1px #62a2ef; background: #f1f8ff; padding: 10px; }

ul li { line-height: 1.5; padding: 0.5rem 0; }

ul li a { text-decoration: none; }

ul li a:hover { color: #fff; background: #62a2ef; }

 

一行ごとにまとめてくれます。

 

Compressed

 

1
ul{color:#62a2ef;border:dashed 1px #62a2ef;background:#f1f8ff;padding:10px}ul li{line-height:1.5;padding:0.5rem 0}ul li a{text-decoration:none}ul li a:hover{color:#fff;background:#62a2ef}

 

全内容を一行にまとめてくれ、ファイルサイズを圧縮する際などに使用します。
これをしないとPageSpeed Insightsで怒られて、圧縮しろ！って言われます←

 

 

ちなみに、Atomのsass-autocompileは希望の形式にチェックをつけて、以下のようにすればcssファイルが生成されます。

デフォルト：./$1.css
.scssファイルと同階層に出力されます。

 

一階層上：../$1.css
.scssファイルから見てひとつ上の階層に出力されます。
scssファイルから参照してディレクトリ名を指定したり、自由にできますね！( ﾟ∀ ﾟ)

 

 

番外編　partialでファイル管理

上記ではscssからcssにコンパイルする、ということを説明したのですが…
1つ1つcssを生成すると、今度はブラウザの読み込み時間問題が出てくるんですよ(*｀·з·)ﾑｯ

 

そんな時に便利なのがpartial（パーシャル）！
partialは、ファイルを機能ごとに分割管理して、コンパイルするときに指定した順序で生成してくれます。
しかも、 CSSファイルが生成されないため、最終的にCSSファイルとして変換したいSassファイルをimportファイルに読み込めばOKというツワモノ！

 

どんなふうになっているかというと…。

style.scss

1
2
3
4
@charset 'utf-8';

@import 'variable.scss';
@import 'common.scss';

 

_variable.scss

1
2
3
4
// main: ./style.scss;

$navy: #0b305b;
$white: #fff;

 

_common.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
// main: ./style.scss;

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "游ゴシック体", YuGothic, sans-serif;
    line-height: 1.4;
    color: $navy;
  background: $white;
}

 

style.css

1
2
3
4
5
6
7
8
9
10
11
12
@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "游ゴシック体", YuGothic, sans-serif;
    line-height: 1.4;
    color: #0b305b;
    background: #fff;
}

 

というようになっています。
cssにコンパイルしないファイルに関しては、ファイル名の前にアンダーバー「_」を入れると、コンパイルされません。

 

上記でいうと、style.scss, _variable.scss, _common.scssがコンパイルされて、style.cssが生成されたことになります。

 

これで出力形式がCompressedになってりゃ、PageSpeed Insightsさんも文句ないやろ！！って最近コーディングするときは一人でドヤってます。
ちなみにjsファイルはgzipに圧縮してるんで、ファイル周りの文句は言われません(+･`ー･)ﾄﾞﾔ
cssもgzip化したいんですが、更新頻度等を考えると都度作成するのは面倒だな…でやってませんが、怒られません。

 

 

いかがでしたでしょうか。
シリーズの最後の最後で情報を詰め込みすぎたかな…と思ったのですが、cssについて語り出したら止まらないのでしょうがない 笑

 

ではっ！

↓↓↓ぜひチェックしてください

～提供中のヒューマンセンシング技術～

◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io

◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io

◆生体判定技術
eKYC・顔認証のなりすまし対策を！
https://bio-check.pas-ta.io

◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io

◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io

◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io

< Back

Top