2016.02.20　虎の穴 Vol.2

Sass入門

• SASS記法とSCSS記法

• CSSからSassにする

• Prepros導入＆コンパイル

• エディタでSassを認識させる（Syntax Highlight）

• 主な機能（ネスト、変数、etc…）

• インポートとパーシャル

• プロジェクトで利用するために（運用の話）

本日は導入メインで

SASS記法とSCSS記法

body color: red

body { color: red;}

SCSS記法SASS記法

拡張子 .scss CSSと同じ

拡張子 .sass インデント式

CSS to SCSS

style.css

style.scss

コンパイルしてみる

https://prepros.io/

今回はPrepros

定期的に出ます

1 - compile

フォルダごとドラッグ

ファイルを選択＆Process File

Compass チェック外す

エディターに認識させる

body { color: red;}

body { color: red;}

Syntax Highlight

Sublime Textの方は Package Install で ”SCSS”

http://book.scss.jp/about/c7/editor/

Sassの基本機能• ネスト

• &（アンパサンド）

• 変数

• 演算

• Mixins

ul.nav { padding-left: 10px;}ul.nav li { margin-bottom: 10px;}

ul.nav { padding-left: 10px; li { margin-bottom: 10px; }}

SCSS CSS

ネスト

.hoge.box1 { width: 10px;}.hoge.box2 { width: 20px;}.hoge.box3 {

.hoge { &.box1 { width: 10px; } &.box2 { width: 20px; } &.box3 { width: 30px; }}

SCSS CSS

&（アンパサンド）

.hoge { background: red; width: 100px;}

$bg-color: red;$width: 100px;

.hoge { background: $bg-color; width: $width;}

SCSS CSS

変数

.hoge { width: 200px;}

.hoge { width: 100 + 100px;}

SCSS CSS

演算

.radius { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}

.radius { @include border-radius(10px);}

SCSS CSS

Mixins

@ImportとPartials

CSSSCSS

SCSS

SCSS

SCSS

@import "hoge.scss";@import "fuga";

sassのファイルなら拡張子がなくてもOK

CSSの@importが書かれる（中身は展開されない）

@import url(reset.css);@import "reset.css";

SCSS CSS

SassでCSSを@importすると

通常、@importした.scssファイルもコンパイルされてしまう

style.css

hoge.css

fuga.css

style.scss

- @import hoge.scss

- @import fuga.scss

Partials

不要

不要

ファイル名の頭にアンダースコア（ _ ）を入れる

hoge.scss

_hoge.scss

Partial化されたファイルはコンパイルされなくなる

style.scss

- @import _hoge.scss

- @import _fuga.scss

style.css

プロジェクトで利用するために

上書き問題と対策

上書き問題

SCSS CSS

Frontend

上書き問題

SCSS CSS

Backend

Designer

DirectorFrontend

上書き問題

SCSS

CSS

Backend

Designer

DirectorFrontend

上書き問題

1. 別CSSファイル 2. 圧縮

他にいい方法があれば教えてください

上書き問題

<link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/temp.css">

直接編集が可能なCSS（temp.css）を用意する

上書き問題

さらに圧縮して、編集しようとする者を門前払い

body{color:red;}.hoge{width:100px;}.fuga{margin:10px;}...

body { color: red;}.hoge { width: 100px;}.fuga {

OUTPUT STYLE を Compressed にすると圧縮

参考になるリンク

• サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイトhttp://book.scss.jp/code/

• Sassオレオレリファレンス

http://tenderfeel.github.io/SassReference/

• ほんとに無料？なくらい高機能なGUIコンパイラーPrepros【Win･Mac】 | Sou-Lablog http://blog.sou-lab.com/prepros/

Preprosについて

なんでPrepros？（当日の質問）　→無料で高機能でWin, Mac対応

• Koala (Win, Mac)　※無料

http://koala-app.com/

• Codekit (Macのみ)　※有料

https://incident57.com/codekit/

他のコンパイラーについて

• Koala(Compass)がエラーを吐くので旧バージョンのCompassに入れ替えてみたhttp://blog.bagooon.com/?p=609

• SASSでCOMPASSのWINDOWS -31Jエラーが出たときの対応（RUBY 2.0向けかも）http://sssssn.com/archives/28

• 自動コンパイルツール「koala」の日本語コメントアウトについてhttp://blackpigtail.com/261

Koalaのエラーについて

日本語関係でエラーを吐くケースがあるので今回は不使用

• Responsive Web Design in Sass: Using media queries in Sass 3.2http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

• 現場で役立つ実践Sass（2）セレクタをもっと便利に書く | Adobe Creative Station

https://blogs.adobe.com/creativestation/web-practical-sass-02-selector-nesting

Media Queriesの書き方など

• Bootstraphttps://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap

• Foundationhttps://github.com/zurb/foundation-sites/tree/develop/scss

• Gumby（最近更新されていない。2年前に社内にSassを導入した際にこれを参考にした）

https://github.com/GumbyFramework/Gumby/tree/master/sass

フレームワークのファイルの分割例

THANK YOU