とりあえずSCSSを使ってみたい人用 SCSSプレ入門

Ruby on Railsは、CSSの記述にSCSSの文法を取り入れているので、SCSSとはなんぞやという事の確認を兼ねて、Ruby on Rails組み込みとしてではなく、単体で使ってみた。

今回の記事の内容は、私がSCSSを初めて使用したのもあって、SCSSを使ってみたい人が、短時間でとりあえずSCSSを記述してコンパイルし、プロジェクトに組み込めるまでの内容を、必要最小限の情報でまとめてある。

SCSSとは

SCSSとは、CSS(Cascading Style Sheet)を、より見やすく、より冗長性無く記述するための、専用の文法のことだ。

 

そのため、SCSSの文法で記述した*.scssのファイルは、コンパイルして*.cssにする必要がある。

 

SCSSのコンパイルは、Sassという、Rubyのgemとして提供されているコマンドラインツールで行う。

そのため、SCSSを使用するためには、Rubyがインストールされている環境である必要がある。

Sassをインストール

SCSSはSassの一部(一文法)であるため、SCSSを使用するためには、Sassをインストールする必要がある。

>gem install sass
Successfully installed sass-3.2.3
1 gem installed
Installing ri documentation for sass-3.2.3…
Installing RDoc documentation for sass-3.2.3…

 

インストールすると、sassコマンドが使えるようになる。

習慣として、コマンドをインストールしたらバージョンを確認するといい。

>sass –version
Sass 3.2.3 (Media Mark)

SCSSファイルの作成

style.scssというファイルを作成して、SCSSを記述する。

コンパイル

SCSSをCSSにコンパイル

第一引数にSASSファイル、第二匹数にコンパイル後に作成したいCSSファイル名を指定する。

>sass style.scss style.css

 

コンパイルが完了すると、style.cssと.sass-cacheが出来上がる。

(.sass-cacheはゴミ)

>dir

<DIR> .sass-cache
193 style.css
164 style.scss

 

作成されたstyle.cssの中身は、もうそのままhtmlから使用できるCSSの内容にコンパイルされている。

あとはこれを

等として使用すればいい。

 

–watchオプションで監視コンパイル

sassコマンドに–watchオプションを付けて実行すると、sassファイル監視モードになり、ファイルの内容が変更される度に自動でsassからcssにコンパイルしてくれる。

単一ファイルを監視

style.scssファイルを監視し、ファイルの内容が更新されるとコンパイルを実行しstyle.cssファイルを作成する。

E:\home\tmp15>sass –watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: E:/home/tmp15/style.scss
overwrite style.css
>>> Change detected to: E:/home/tmp15/style.scss

(Ctrl-Cで監視モードを終了)

 

フォルダを監視

カレントディレクトリにある*.scssファイルを*.cssファイルにコンパイルする場合

E:\home\tmp15>sass –watch .:.
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: E:/home/tmp15/style.scss
overwrite ./style.css
>>> Change detected to: E:/home/tmp15/style.scss

 

scssファイルとcssファイルを別フォルダで管理している場合

scssフォルダに*.scssファイルをまとめ、cssフォルダの中に*.cssをまとめて作成する場合。

>tree /f
.
├─css

└─scss
    style.scss

 

sassコマンドを監視モードで実行。

(scssフォルダを監視し、コンパイル結果をcssフォルダに格納する場合)

>sass –watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: E:/home/tmp15/scss/style.scss
overwrite css/style.css
>>> Change detected to: E:/home/tmp15/scss/style.scss

 

*.scssファイルのコンパイル結果が、cssフォルダの中に、作成される。

>tree /f
.
├─.sass-cache
│ └─018efe0197cc53d0bfb3c5cc37b1249d9eee63bd
│ style.scssc

├─css
│ style.css

└─scss
    style.scss

圧縮コンパイル

コンパイル時に作成される.cssファイルのサイズを、極力圧縮したい場合や、第三者からの可読性を意図的に下げたい場合には、–styleオプションを使用する。

>sass –style compressed scss/style.scss css/style.css

 

–style compressedオプションを指定してコンパイルすると、CSSとして不要な空白文字が削除された状態でstyle.cssが作成される。

 

–styleオプションに指定できるスタイルは4タイプある。

【–styleオプションの種類】
–style nested 構造のネストに合わせてインデントされる
–style compact 1つの要素に対する定義に対し1行にまとめる
–style compressed 余分な空白文字が全て取り除かれる
–style expanded 構造のネストに合わせたインデントがされない

より詳細な情報

上述で紹介した内容は、とりあえずSCSSを扱えるようになるまでに必要と判断して紹介した部分であり、より詳細な情報は、他のリソースから収集してほしい。

 

sass –help

sassコマンドのヘルプ情報だけでも、かなり参考になる。

>sass –help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
Converts SCSS or Sass files to CSS.

Options:
(以下略…)

実際この記事も、sass –helpのオプション等を参照しながらまとめた部分が多かった。

 

公式ページ

公式ページには、SCSSの文法について、完結に網羅されている。

Sass – Syntactically Awesome Stylesheets

 

Ruby on RailsとSCSS

Ruby on Railsで、スタイルをSCSS形式で記述するなら読んでおきたい記事。

RailsGuides Asset Pipeline

コメントを残す

トラックバック: http://pgnote.net/wp-trackback.php?p=986