Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Sassをはじめよう！ 沖 良矢（世路庵） 2014.2.14 (Fri) DIST.1 「Sass」
Slide 2
Slide 2 text
自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー UNIQLO HAPPY GIFT (2013) Web Designing (2009～) McCANN WG JAPAN (2012)
Slide 3
Slide 3 text
お品書き Sassとは何か 制作環境のセットアップ 実用テクニック
Slide 4
Slide 4 text
Sassについて、 一番知りたいことって なんですか？ What do you want to know most about Sass?
Slide 5
Slide 5 text
Sassとは何か Chapter.1 | What’s Sass ?
Slide 6
Slide 6 text
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. http://sass-lang.com/
Slide 7
Slide 7 text
Sassは、世界で最も成熟し安定 した、かつパワフルなプロ級の CSSの拡張言語である。 http://sass-lang.com/
Slide 8
Slide 8 text
とりあえずどんなもんか #content { background-color: #ff0000; } #content h1 { margin-bottom: 1em; } #content p { line-height: 2em; }
Slide 9
Slide 9 text
とりあえずどんなもんか #content { background-color: #ff0000; } #content h1 { margin-bottom: 1em; } #content p { line-height: 2em; } #content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } }
Slide 10
Slide 10 text
サス【Sass】 ≪Syntactically Awesome Style Sheets≫ 構文的に イケてる スタイルシート CSSを効率よく記述するための拡張言語 CSSプリプロセッサ、CSSメタ言語とも
Slide 11
Slide 11 text
他のCSSプリプロセッサ LESS Bootstrapで採用 機能はSassより少ない クライアントサイドで動的 にCSSを生成 Stylus Node.jsのモジュールとし て誕生 簡素化した記述
Slide 12
Slide 12 text
Sassの ここがイイ！ すべてのバージョンのCSSとの互換性 機能が豊富 7年以上に渡る開発、サポート 採用企業が多い （LINE, COOKPAD, CyberAgent, NHN Japan…） ユーザー数が多い フレームワークの充実
Slide 13
Slide 13 text
SASS記法とSCSS記法 #content background-color: #ff0000 h1 margin-bottom: 1em p line-height: 2em #content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } } SASS記法 SCSS記法
Slide 14
Slide 14 text
Sassの利用手順 1. Sassファイルを記述する なお、拡張子は「.scss」（SASS記法では「.sass」） 2. 直接Webブラウザに読み込めないので、コンパイルし てCSSに変換 3. CSSとしてWebブラウザに読み込む
Slide 15
Slide 15 text
ルールのネスト #content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } } #content { background-color: red; } #content h1 { margin-bottom: 1em; } #content p { line-height: 2em; } Sass CSS
Slide 16
Slide 16 text
親セレクタの参照 #content a { background-color: #ff0000; &:hover { background-color: #ffff00; } } #content a { background-color: #ff0000; } #content a:hover { background-color: #ffff00; } Sass CSS
Slide 17
Slide 17 text
プロパティのネスト #content .book { border: { left: 5px solid #ff0000; bottom: { width: 5px; style: solid; color: #ff0000; } } } #content .book { border-left: 5px solid #FF0000; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #FF0000; } Sass CSS
Slide 18
Slide 18 text
1行コメント // イケてるスタイル #content { background-color: #ff0000; } #content { background-color: #ff0000; } Sass CSS
Slide 19
Slide 19 text
通常のコメント /* イケてるスタイル */ #content { background-color: #ff0000; } /* イケてるスタイル */ #content { background-color: #ff0000; } Sass CSS
Slide 20
Slide 20 text
通常のコメント（compressedフォーマットの場合） /* イケてるスタイル */ #content { background-color: #ff0000; } #content{background-color:#ff0000;} Sass CSS
Slide 21
Slide 21 text
絶対に残るコメント（compressedフォーマットの場合も） /*! 絶対にイケてるスタイル */ #content { background-color: #ff0000; } /*! 絶対にイケてるスタイル */#content{background-color:#ff0000;} Sass CSS
Slide 22
Slide 22 text
変数 $niceColor: #ff0000; #content { background-color: $niceColor; h1 { border-bottom: 1px solid $niceColor; } } #content { background-color: red; } #content h1 { border-bottom: 1px solid red; } Sass CSS
Slide 23
Slide 23 text
変数のスコープ #content { $niceColor: #ff0000; background-color: $niceColor; } h1 { border-bottom: 1px solid $niceColor; } error screen.scss (Line 6: Undefined variable: "$niceColor".) Sass CSS
Slide 24
Slide 24 text
四則演算 #content { background-color: #ff0000; width: 980px – 40px; } #content { background-color: #ff0000; width: 940px; } Sass CSS
Slide 25
Slide 25 text
関数 #content { background-color: lighten(#ff0000, 20%); } #content { background-color: #ff6666; } Sass CSS
Slide 26
Slide 26 text
独自の関数 @function getDouble($value) { @return $value * 2; } #content { background-color: #ff0000; width: getDouble(200px); } #content { background-color: #ff0000; width: 400px; } Sass CSS
Slide 27
Slide 27 text
インターポレーション（補間） $imageBasePath: "images/"; #content { background-image: url(#{$imageBasePath}hoge.png); } #content { background-image: url(images/hoge.png); } Sass CSS
Slide 28
Slide 28 text
スタイルの継承 .content { background-color: #ff0000; border: 1px solid #000000; } .sub { @extend .content; } .content, .sub { background-color: #ff0000; border: 1px solid #000000; } Sass CSS
Slide 29
Slide 29 text
ミックスイン @mixin clearfix { &:after { content: ""; clear: both; display: block; } } .content { @include clearfix; background-color: #ff0000; } .content { background-color: #ff0000; } .content:after { content: ""; clear: both; display: block; } Sass CSS
Slide 30
Slide 30 text
ミックスイン（引数） @mixin myBorder($width) { border: $width solid #00ff00; } .content { @include myBorder(5px); background-color: #ff0000; } .content { border: 5px solid lime; background-color: #ff0000; } Sass CSS
Slide 31
Slide 31 text
その他の機能 @import パーシャル プレースホルダーセレクタ 変数のデフォルト値 可変長引数 コンテンツブロック コントロールディレクティブ コマンドオプション 他、多数
Slide 32
Slide 32 text
制作環境のセットアップ Chapter.2 | Setup the production environment
Slide 33
Slide 33 text
Sassの利用環境 Webサービス GUI CUI IDE
Slide 34
Slide 34 text
デモ
Slide 35
Slide 35 text
実用テクニック Chapter.3 | Practical technique
Slide 36
Slide 36 text
時間の都合で省略… 別の機会で。
Slide 37
Slide 37 text
まとめ At the end
Slide 38
Slide 38 text
まとめ Sassは、CSSを効率的に書くための拡張言語 制作環境は自分にあったものを
Slide 39
Slide 39 text
Thank you ! Photo Credit: mak1e Nathan O'Nions *christopher* Brett Jordan