2016.02.20 虎の穴 Vol.2

Sass入門
2016.02.20 虎の穴 Vol.2
•
SASS記法とSCSS記法
•
CSSからSassにする
•
Prepros導入＆コンパイル
•
エディタでSassを認識させる（Syntax Highlight）
•
主な機能（ネスト、変数、etc…）
•
インポートとパーシャル
•
プロジェクトで利用するために（運用の話）
本日は導入メインで
SASS記法とSCSS記法
SASS記法
body
color: red
拡張子 .sass
インデント式
SCSS記法
body {
color: red;
}
拡張子 .scss
CSSと同じ
CSS to SCSS
style.css
style.scss
コンパイルしてみる
今回はPrepros
https://prepros.io/
定期的に出ます
1 - compile
フォルダごとドラッグ
Compass
チェック外す
ファイルを選択＆Process File
エディターに認識させる
body {
color: red;
}
body {
color: red;
}
Syntax Highlight
Sublime Textの方は Package Install で ”SCSS”
http://book.scss.jp/about/c7/editor/
Sassの基本機能
•
ネスト
•
&（アンパサンド）
•
変数
•
演算
•
Mixins
ネスト
SCSS
ul.nav {
padding-left: 10px;
li {
margin-bottom: 10px;
}
}
CSS
ul.nav {
padding-left: 10px;
}
ul.nav li {
margin-bottom: 10px;
}
&（アンパサンド）
SCSS
.hoge {
&.box1 { width: 10px; }
&.box2 { width: 20px; }
&.box3 { width: 30px; }
}
CSS
.hoge.box1 {
width: 10px;
}
.hoge.box2 {
width: 20px;
}
.hoge.box3 {
変数
SCSS
$bg-color: red;
$width: 100px;
.hoge {
background: $bg-color;
width: $width;
}
CSS
.hoge {
background: red;
width: 100px;
}
演算
SCSS
.hoge {
width: 100 + 100px;
}
CSS
.hoge {
width: 200px;
}
Mixins
SCSS
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.radius {
@include border-radius(10px);
}
CSS
.radius {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
@ImportとPartials
SCSS
SCSS
SCSS
SCSS
CSS
@import "hoge.scss";
@import "fuga";
sassのファイルなら拡張子がなくてもOK
SassでCSSを@importすると
SCSS
@import "reset.css";
CSS
@import url(reset.css);
CSSの@importが書かれる（中身は展開されない）
Partials
style.scss
style.css
-
@import
hoge.scss
hoge.css
不要
-
@import
fuga.scss
fuga.css
不要
通常、@importした.scssファイルもコンパイルされてしまう
hoge.scss
_hoge.scss
ファイル名の頭にアンダースコア（ _ ）を入れる
style.scss
-
@import
_hoge.scss
-
@import
_fuga.scss
style.css
Partial化されたファイルはコンパイルされなくなる
プロジェクトで利用するために
上書き問題と対策
上書き問題
SCSS
CSS
Frontend
上書き問題
Backend
SCSS
CSS
Designer
Frontend
Director
上書き問題
Backend
SCSS
CSS
Designer
Frontend
Director
上書き問題
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 {
body{color:red;}.hoge{widt
h:100px;}.fuga{margin:
10px;}...
さらに圧縮して、編集しようとする者を門前払い
OUTPUT STYLE を Compressed にすると圧縮
参考になるリンク
•
サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイト http://book.scss.jp/code/
•
Sassオレオレリファレンス http://tenderfeel.github.io/SassReference/
Preprosについて
•
ほんとに無料？なくらい高機能なGUIコンパイラーPrepros【Win･Mac】 | Sou-Lablog http://blog.sou-lab.com/prepros/
なんでPrepros？（当日の質問） →無料で高機能でWin, Mac対応
他のコンパイラーについて
•
Koala (Win, Mac) ※無料 http://koala-app.com/
•
Codekit (Macのみ) ※有料 https://incident57.com/codekit/
Koalaのエラーについて
•
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
日本語関係でエラーを吐くケースがあるので今回は不使用
Media Queriesの書き方など
•
Responsive Web Design in Sass: Using media queries in Sass 3.2 http://thesassway.com/intermediate/responsive-web-design-insass-using-media-queries-in-sass-32
•
現場で役立つ実践Sass（2）セレクタをもっと便利に書く | Adobe Creative Station https://blogs.adobe.com/creativestation/web-practical-sass-02selector-nesting
フレームワークのファイルの分割例
•
Bootstrap https://github.com/twbs/bootstrap-sass/tree/master/assets/
stylesheets/bootstrap
•
Foundation https://github.com/zurb/foundation-sites/tree/develop/scss
•
Gumby（最近更新されていない。2年前に社内にSassを導入した際にこれを参考にした） https://github.com/GumbyFramework/Gumby/tree/master/sass
THANK YOU

Download Report