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