Sass についてゼロから解説

Ticklecode.Yoshinori Kobayashi1

第 14 回ゼロから始める WordPress 勉強会　 14.09.17

- 基本の理解だけでも効率アップ -

小林由憲（こばやしよしのり）

Twitter: @AsbyuKobayashi

ブログ : In Advance Only

生まれは　奈良県　です。

2

3

デモで全体的にご説明。

4

Sass を使えるようにする

5

SASS

Syntactically Awesome Stylesheets

http://sass-lang.com/

6

ファイルの拡張子は .scss

Sass と呼ばれているが、 .scss ファイルに記述していく。

7

コンパイル（変換）して.css ファイルをつくる。

.scss をコンパイルして .css を作る。

コンパイルには、Ruby が必要。

8

http://cappee.net/coding/sublime-scss-compass-emmet

Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ

http://ozpa-h4.com/2013/03/05/compass-sass-scss-sublime-text/

http://liginc.co.jp/web/html-css/css/56599

これから Sass を始めたい人へ！導入手順をまとめてみた (Dreamweaver 対応 )

「 Sublime Text 」のみで Compass と Sass （ Scss ）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ

Sass 、 Compass の設定手順まとめ

9

なぜ、 Sass なのか

10

CSS の限界

11

複数人での共同作業がデフォルトに。

環境の変化

回線が早くなり、よりインタラクティブな環境へ。そのため、 Web サイトが高度化して、 CSS 記述量が増える。

様々なデバイスの登場により、直接の CSS への記述ではコントロールが難しい。

12

CSS3 の難易度が高い。

同じ記述を繰り返し、書かなければならない。

クラスブラウザの対応の記述が難しい

直接、 CSS を書くことへの抵抗が大きくなった

マルチデバイスの対応の記述が難しい

13

Sass の My メリット

14

プログラムとして記述できる。

Compass などの強化ライブラリがあるので、圧倒的に効率はあがる。

⇒HTML と CSS だけプログラムでない。　そこだけ、考え方が異なっていた。

通常の CSS が使える。⇒ そのまま移行して、修正を開始できる。⇒ コンパイルで文法チェックをしてくれる。

15

最初に覚えておきたい、 Sass の６つ便利機能

16

構文の階層化

.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded{ background: #333;}.hentry .mejs-controls .mejs-time-rail .mejs-time { background: #fff;} CSS.hentry { .mejs-controls { .mejs-time-rail { .mejs-time-loaded { background: #333; } .mejs-time{ background: #fff; } } }} Sass

同様の class や id の記述の回数がへる。

変更が容易 !

17

変数（一時的になにかを記憶） $ 変数名 : （コロン）

$font_color: white;

.navbar-default { color: $font_color;} Sass

.navbar-default { color: white;} CSS

カラーコードmargin 値padding 値font-family 値

変数を変更するだけで書き換えができる。

18

親セレクタ参照 　 & （アンパサンド）

.container ul li a{ color: white; &:hover{ color: black; }} Sass

.container ul li a{ color: white;}.container ul li a:hover{ color: black;} CSS

親セレクタの変更だけで、まとめて変更される。

19

関数（なにかをもらって、なにかを返す）

$font_color: white;

.navbar-default{ color: darken($font_color,30%)} Sass

.navbar-default{ color: #b3b3b3} CSS

たくさんの関数が用意されている。以下の URL の「 Method List 」参照

便利な関数があらかじめ、用意されているため、効率がよい。

http://sass-lang.com/documentation/　

20

四則演算　＋、－、 × 、 ÷

$mwidth: 980px;$mpadding: 5px;

article { width: $mwidth - $mpadding * 2; padding: $mpadding;} Sass

article { width: 970px; padding: 5px;} CSS

色コードの加減算文字の連結（加算）もできる。

表現の幅が広がって、柔軟になる。

21

インターポレーション（差し込む、補間）

$imgRootPath: ‘../images/’;

#main{ background: url(#{$imgRootPath}bg.png);} Sass#main { background: url(../images/bg.png);} CSS

通常は、変数が展開できないが、強制的に変数の中身が評価される

22

Windows の場合は日本語に注意

http://cappee.net/coding/sublime-scss-compass-emmet

[Decode error - output not utf-8] 　のエラーがでた場合

フォルダ名、ファイル名で日本語は NG

Invalid Windows-31J character “\xE3” 　のエラーがでた場合http://frmmpgit.blog.fc2.com/blog-entry-34.html

23

参考図書

Web 制作者のための Sass の教科書 これからの Web デザインの現場で必須のCSS メタ言語

初級者から中級者向けの書籍です。非常に見やすく、文章も丁寧でわかりやすいです。後半は難易度が高いですが、前半部分だけを実施するだけでもかなり効率化されます。

24

まとめ

・初級者のときは、 Sass で通常の CSS を書いてみる。　慣れたころに、 Sass の機能を使いだす。

・通常の Web サイト制作であれば、今回紹介した　機能を使うだけでもかなり効率的になる。

25

ご清聴、ありがとうございました。