SCSSを学んでいく前に、必要となる基礎知識と開発環境の構築をしていきます。

SASS/SCSSとは

SASS/SCSSとは「Syntactically Awesome Style Sheets」の略で直訳すると、構文上素晴らしいCSS となります。どのへんが素晴らしいかについてはこれから学んでいくうちに分かると思いますが、ここではCSSが 楽に便利に 書けるようになるんだなぁと思っておいてください。

SASSとSCSSの違い

.a {
  color: red;
}
.a .b {
  color: blue;
}

例えば、このようなCSSを書くとき、SASS/SCSS ではどのように書くことができるでしょうか。

.a
  color: red;
  .b
    color: blue;

.a {
  color: red;
  .b {
    color: blue;
  }
}

SCSSは ネスト することができるので、このように 階層化 したCSSを記述することができます。また、それぞれの記法の違いとして、SASS記法では中かっこを省略できる ことが挙げられます。確かに中かっこを省略することでより簡潔なコードを書くことができますが、階層が増えてくると見づらいという点から、本講座では基本的には SCSS記法 で進めていくことにします。

<style>
.a {
  color: red;
  .b {
    color: blue;
  }
}
</style>

さて、早速SCSSを使っていきたい訳ですが、このように書いたCSSを ブラウザは認識してくれません。SCSSとはあくまで外部ツールであってブラウザの機能ではないのです。ブラウザが認識してくれるようにするためには、SCSSを普通のCSSに変換（コンパイル）する必要があります。

コンパイルするためのツールはいくつかの種類がありますが、ここでは Node.js の node-sass というツールをつかっていきます。

node-sassの導入

node-sass を導入していく前に、Node.js のインストールをしていない場合は、以下の記事を参考に Node.js をインストールしてください。

• WindowsとMacそれぞれでNode.jsをインストールする方法 | SPYWEB

npm i node-sass -g

Windowsなら コマンドプロンプト、Macなら ターミナル を起動しコマンドを入力します。

node-sass -v

node-sass       4.7.2   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

node-sass -v コマンドでバージョンが表示されればインストール完了です。

フォルダの作成

実際にコンパイルしていくために、適当な フォルダ とその中に SCSSファイル を作成していきます。

まず、デスクトップに sample フォルダを作成します。

その中に sample.scss ファイルを作成します。

.a {
  color: red;
  .b {
    color: blue;
  }
}

sample.scss には動作確認用として、このように記述しておきましょう。

sampleフォルダに移動する（Windows編）

コマンドを使う

まずは コマンドプロンプト を起動します。

dir

2017/11/10  18:38    <DIR>          .
2017/11/10  18:38    <DIR>          ..
2017/11/10  18:36    <DIR>          3D Objects
2017/11/10  18:36    <DIR>          Contacts
2017/11/10  18:36    <DIR>          Desktop
2017/11/10  18:36    <DIR>          Documents
2017/09/29  22:46    <DIR>          Downloads
2017/11/10  18:36    <DIR>          Favorites
2017/11/10  18:40    <DIR>          Links
2017/09/29  22:46    <DIR>          Music
2017/11/10  18:40    <DIR>          OneDrive
2017/09/29  22:46    <DIR>          Pictures
2017/11/10  18:36    <DIR>          Saved Games
2017/11/10  18:37    <DIR>          Searches
2017/09/29  22:46    <DIR>          Videos
               0 個のファイル                   0 バイト
              15 個のディレクトリ  257,700,896,768 バイトの空き領域

dir コマンドを入力してみると、このようにずらーっと 現在の階層にあるフォルダやファイル が一覧で表示されます。sample フォルダは Desktop に作ったので、まずは Desktop に移動してみます。

cd Desktop

cd で対象のフォルダに移動することができます。

cd sample

デスクトップにフォルダを作成したので、sample フォルダに移動することができます。

より簡単な方法

コマンドは慣れれば便利ではありますが、初めて触れる人には少し難しいかもしれません。実は、もっと簡単に一発で起動する方法があります。

まずは sample フォルダを開きます。

Shift キーを押しながら右クリックします。メニューが表示されるので、 [PowerShell ウィンドウをここで開く(S)] をクリックすると、PowerShellが開きます。コマンドプロンプトと同じように使うことができます。

sampleフォルダに移動する（Mac編）

コマンドを使う

ls

AndroidStudioProjects		OneDrive
Applications			Pictures
Applications (Parallels)	Public
Creative Cloud Files		genymotion-log.zip
Desktop				mbox
Documents			output.txt
Downloads			style.css
Library				tail
Movies				tesseract
Music

ターミナル を起動し、ls コマンドを入力すると、現在の階層にあるフォルダ一覧が表示されます。

cd Desktop

cd で対象となるフォルダに移動することができます。 sample フォルダはデスクトップに作ったのでまずは、デスクトップに移動します。

cd sample

その後、sample フォルダに移動します。

より簡単な方法

フォルダをターミナルへ ドラッグ&ドロップ します。

すると、自動的にパスが入力されるので、そのまま cd コマンドで移動することができます。

SCSSをコンパイル

ターミナルやコマンドプロンプト上から sample フォルダに移動することができたので、いよいよSCSSをコンパイルしてみます。

node-sass sample.scss sample.css

node-sass <SCSSファイルのパス> という感じでコマンドを入力すると、sample.css というファイルが生成されると思います。

.a {
  color: red; }
  .a .b {
    color: blue; }

sample.css の中身を見てみると、コンパイルされていることが確認できます。たった1行のコマンドを入力するだけで、簡単にコンパイルすることができました。他にも、コンパイルする際に色々なオプションがあるのでよく使いそうなものを見てみましょう。

色々なオプション

自動でコンパイル

node-sass sample.scss sample.css -w

-w オプションをつけると、SCSSファイルが変更された際に 自動でコンパイル してくれるようになります。終了したいときは Ctrl + C を入力します。

出力形式の変更

--output-style でCSSの出力形式を指定することができます。

node-sass sample.scss sample.css --output-style=nested

.a {
  color: red; }
  .a .b {
    color: blue; }

--output-style=nested はデフォルトの出力形式です。

node-sass sample.scss sample.css --output-style=expanded

.a {
  color: red;
}

.a .b {
  color: blue;
}

--output-style=expanded は普通にCSSを書くときと同じような感じです。

node-sass sample.scss sample.css --output-style=compact

.a { color: red; }

.a .b { color: blue; }

--output-style=compact はセレクタごとに1行にまとめてくれます。

node-sass sample.scss sample.css --output-style=compressed

.a{color:red}.a .b{color:blue}

--output-style=compressed はCSSを圧縮してくれます。

他にも

• node-sass – Node.js bindings to libsass | Github

他にも様々なオプションがあるので、一度目を通しておくといいと思います。

次回は、いよいよ SCSSの文法 について学んでいきます。