![Page 1: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/1.jpg)
2016.02.20 虎の穴 Vol.2
Sass入門
![Page 2: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/2.jpg)
• SASS記法とSCSS記法
• CSSからSassにする
• Prepros導入&コンパイル
• エディタでSassを認識させる(Syntax Highlight)
• 主な機能(ネスト、変数、etc…)
• インポートとパーシャル
• プロジェクトで利用するために(運用の話)
![Page 3: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/3.jpg)
本日は導入メインで
![Page 4: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/4.jpg)
SASS記法とSCSS記法
body color: red
body { color: red;}
SCSS記法SASS記法
拡張子 .scss CSSと同じ
拡張子 .sass インデント式
![Page 5: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/5.jpg)
CSS to SCSS
style.css
style.scss
![Page 6: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/6.jpg)
コンパイルしてみる
https://prepros.io/
今回はPrepros
![Page 7: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/7.jpg)
定期的に出ます
![Page 8: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/8.jpg)
1 - compile
フォルダごとドラッグ
![Page 9: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/9.jpg)
ファイルを選択&Process File
Compass チェック外す
![Page 10: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/10.jpg)
エディターに認識させる
body { color: red;}
body { color: red;}
Syntax Highlight
![Page 11: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/11.jpg)
Sublime Textの方は Package Install で ”SCSS”
http://book.scss.jp/about/c7/editor/
![Page 12: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/12.jpg)
Sassの基本機能• ネスト
• &(アンパサンド)
• 変数
• 演算
• Mixins
![Page 13: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/13.jpg)
ul.nav { padding-left: 10px;}ul.nav li { margin-bottom: 10px;}
ul.nav { padding-left: 10px; li { margin-bottom: 10px; }}
SCSS CSS
ネスト
![Page 14: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/14.jpg)
.hoge.box1 { width: 10px;}.hoge.box2 { width: 20px;}.hoge.box3 {
.hoge { &.box1 { width: 10px; } &.box2 { width: 20px; } &.box3 { width: 30px; }}
SCSS CSS
&(アンパサンド)
![Page 15: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/15.jpg)
.hoge { background: red; width: 100px;}
$bg-color: red;$width: 100px;
.hoge { background: $bg-color; width: $width;}
SCSS CSS
変数
![Page 16: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/16.jpg)
.hoge { width: 200px;}
.hoge { width: 100 + 100px;}
SCSS CSS
演算
![Page 17: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/17.jpg)
.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
![Page 18: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/18.jpg)
@ImportとPartials
CSSSCSS
SCSS
SCSS
SCSS
![Page 19: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/19.jpg)
@import "hoge.scss";@import "fuga";
sassのファイルなら拡張子がなくてもOK
![Page 20: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/20.jpg)
CSSの@importが書かれる(中身は展開されない)
@import url(reset.css);@import "reset.css";
SCSS CSS
SassでCSSを@importすると
![Page 21: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/21.jpg)
通常、@importした.scssファイルもコンパイルされてしまう
style.css
hoge.css
fuga.css
style.scss
- @import hoge.scss
- @import fuga.scss
Partials
不要
不要
![Page 22: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/22.jpg)
ファイル名の頭にアンダースコア( _ )を入れる
hoge.scss
_hoge.scss
![Page 23: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/23.jpg)
Partial化されたファイルはコンパイルされなくなる
style.scss
- @import _hoge.scss
- @import _fuga.scss
style.css
![Page 24: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/24.jpg)
プロジェクトで利用するために
上書き問題と対策
![Page 25: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/25.jpg)
上書き問題
SCSS CSS
Frontend
![Page 26: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/26.jpg)
上書き問題
SCSS CSS
Backend
Designer
DirectorFrontend
![Page 27: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/27.jpg)
上書き問題
SCSS
CSS
Backend
Designer
DirectorFrontend
![Page 28: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/28.jpg)
上書き問題
1. 別CSSファイル 2. 圧縮
他にいい方法があれば教えてください
![Page 29: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/29.jpg)
上書き問題
<link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/temp.css">
直接編集が可能なCSS(temp.css)を用意する
![Page 30: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/30.jpg)
上書き問題
さらに圧縮して、編集しようとする者を門前払い
body{color:red;}.hoge{width:100px;}.fuga{margin:10px;}...
body { color: red;}.hoge { width: 100px;}.fuga {
![Page 31: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/31.jpg)
OUTPUT STYLE を Compressed にすると圧縮
![Page 32: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/32.jpg)
参考になるリンク
• サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイトhttp://book.scss.jp/code/
• Sassオレオレリファレンス
http://tenderfeel.github.io/SassReference/
![Page 33: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/33.jpg)
• ほんとに無料?なくらい高機能なGUIコンパイラーPrepros【Win・Mac】 | Sou-Lablog http://blog.sou-lab.com/prepros/
Preprosについて
なんでPrepros?(当日の質問) →無料で高機能でWin, Mac対応
![Page 34: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/34.jpg)
• Koala (Win, Mac) ※無料
http://koala-app.com/
• Codekit (Macのみ) ※有料
https://incident57.com/codekit/
他のコンパイラーについて
![Page 35: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/35.jpg)
• 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のエラーについて
日本語関係でエラーを吐くケースがあるので今回は不使用
![Page 36: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/36.jpg)
• 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の書き方など
![Page 37: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/37.jpg)
• 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
フレームワークのファイルの分割例
![Page 38: sass wide dist - torapants.co.jp · •SASS記法とSCSS記法 • CSSからSassにする • Prepros導入&コンパイル • エディタでSassを認識させる(Syntax Highlight)](https://reader035.vdokument.com/reader035/viewer/2022062602/5ee21137ad6a402d666cb4f4/html5/thumbnails/38.jpg)
THANK YOU