Web 2013 1 Web CSS Space http://latele.co.jp/ http://css-happylife.com/ http://nekonekocube.com/ Web EC Web EC Sou-Lab http://sou-lab.com/ http://blog.sou-lab.com/ http://bebe-log.com/ Latele WEBCRE8.jp URL http://book.scss.jp/ Apple Mac Macintosh Apple Inc. Microsoft Windows Microsoft Corporation
Web CSS Cascading Style Sheets Sass Sass Sass Sass Sass CSS Sass Sass Sass CSS CSS Sass Sass Sass Sass Sass CSSHTML CSS CSS HTML CSS CSS CSS Sass Sass CSS Sass CSS 2013 8
CONTENTS 2 3 1 Sass 11 1-1 Sass 12 CSS Sass 12 Sass 14 Sass SCSS sass scss 15 scss 17 Sass 18 Sass 20 CSS Sass 22 1-2 Sass 24 Ruby 24 26 27 SassSass 28 Sass 29 1-3 Sass 30 Sass 33 2 Sass 35 2-1 Windows Sass 36 36 37 Ruby 38 Ruby 39 Sass 41 Tips 42 2-2 Mac Sass 43 43 Ruby 45 Sass 46 Tips 47
2-3 Sass 48 gem 48 Sass 49 49 50 50 2-4 Sass 51 51 54 55 Style 58 Watch 61.sass-cache 65 66 2-5 68 68 Windows 69 Mac 70 2-6 GUI Koala Sass 73 Koala 74 76 78 78 80 81 GUI 82 2-7 83 Windows Ruby ruby 83 Mac Sass 84 Mac 84 Watch 84 Windows 85 Watch 85 Koala Windows 86 KoalaWindows 86 3 Sass 87 3-1 Nested Rules 88 88 90 @media 91
3-2 & 92 3-3 Nested Properties 94-95 3-4 Sass 96 1 96 96 3-5 Variables 98 98 99 100 100 101 103 3-6 105 105 107 107 109 3-7 Sass @import 111 @import 111 CSS 113 114 @import 114 4 Sass 117 4-1 @extend 118 @extend 118 121 @extend 122 @extend 122 @extend 124 @media @extend 125!optional 127 4-2 @mixin 128 128 129 131 132, 133 135 136
@content 137 139 4-3 140 @if 140 @for 143 @while 145 @each 146 4-4 148 148 abs() 149 round() 149 ceil() floor() 150 16 RGB RGBA rgba() 151 lighten() darken() 152 2 mix() 153 N nth() 154 4-5 @function 155 @function 155 156 156 157 157 4-6 @debug @warn 158 @debug 158 @warn 159 4-7 Sass 161 161 163 4-8 #{} 165 165 166 166 167 4-9!default 168!default 168!default 169 5 Sass 171 5-1 / Tips 172 172
174 CSS Sass 175 CSS 1 178 CSS Sass 179 CSS 180 Sass 181 CSS Sass 182 184 Sass 185 Sass 186 5-2 Tips 192 Sass!? 4,095 IE9 192 Sass CSS CSS 194 @each 196 199 CSS3 200 IE rem 203 Sass 205 5-3 Tips 210 clearfix @extend 210 @function px % 212 YUI CSS Fonts 213 214 null 216 calc 218 @for class 220 class 222 class 0 223 opacity 224 CSS 225 231 @each 233 235 5-4 Tips 237 237 Retina 239 Web @content 241 6 Sass Compass 245 6-1 Compass 246 Compass 246 Compass 247 248 config.rb 249 Compass 252 Compass GUI 253
6-2 Compass 254 Compass 254 Compass 254 6-3 Compass 256 CSS3 256 Utilities 263 Typography 267 6-4 Compass 270 270 270 271 271 6-5 Compass Helpers 272 Image Helpers 272 Color Helpers 274 Selector Helpers 275 6-6 Compass CSS Compass Sprites 277 277 279 Sprites 281 285 288 Oily PNG 289 6-7 CSSSprite Helpers 290 Sprite Helpers 290 293 sprite-map() 294 Compass Compass Recipes 296 7 Sass 297 7-1 Sass 298 298 299 301 302 7-2 Sass 304 Windows/Mac 305 Windows 306 Mac 307
7-3 Dreamweaver Sass 308 Dreamweaver CC Sass 308 CS6 Sass Dreamweaver 309 7-4 Sass GUI 311 Windows/Mac 311 Mac 314 7-5 Sass CUI 315 8 Sass 317 8-1 Sass 318 CSS CSS Extensions 318 Sass 319 Sass 319 @ 322 323 324 8-2 Sass 325 RGB 325 HSL 326 329 330 331 331 333 334 335 8-3 Sass 336 Ruby 336 336 336 338 340 346
1 Sassのキホン 1 Sass Sass Sass 1-1 Sass 12 1-2 Sass 24 1-3 Sass 30
CHAPTER 1 1 1 Sass Sass Sass Sass 2 P.35 CSS Sass Sass CSS CSS CSS CSS Sass Sass 導 入 しない 理 由 今 の CSS で 十 分 間 に 合 っている そこまで CSS に 不 便 さや 手 間 を 感 じ ていない 得 られるメリットより 学 習 コストの ほうが 高 い 気 がする プログラムが 書 けないとメリットが 少 ない 使 いこなせない Ruby や 黒 い 画 面 を 使 う 必 要 がある 普 段 コーディングメインで 作 業 し ていない 環 境 に 依 存 するから 実 務 では 使 い にくい 開 発 元 が 英 語 で 日 本 語 の 情 報 が 少 ない...など 12
Sass Sass 2010 11 1 2011 2010 Sass CSS Sass Sass P.18 Sass Sass LINE Sass Sass Sass Sass CSS CSS Sass Sass 1-1 Sass 13
CHAPTER Sass 1 1 CSS CSS CSS CSS Sass Sass Sass CSS * 1 Sass CSS Sass CSS パワー アップ Sass CSS Sass Syntactically Awesome Stylesheets CSS CSS 1 1 1 Sass Sass 2013 8 http://sass-lang.com/ 14
CSS Sass 1 Sass Sass CSS CSS Sass CSS Sass Sass SCSS sass scss CSS CSS Sass CSS css Sass scss Sassソース $width: 260px; #side { float: right; width: $width; nav { margin: 0 0 20px; } } Sass CSS CSS scss Sass Sass CSS ファイルには Sass を 書 くことは できない Sass sass scss Sass 2 SASS sassscss scss 2 SASS{ } ; CSS /**/ 1-1 Sass 15
CHAPTER 1 CSS CSS SCSS SCSS Sassy CSS CSS CSS 2 CSS ul { margin: 0 0 1em; } ul li { margin-bottom: 5px; } CSS SCSS SASS Sass SCSS Sass ul { margin: 0 0 1em; li { margin-bottom: 5px; } } 3 Nested Rules 2 P.88 SASS Sass ul margin: 0 0 1em li margin-bottom: 5px SASS SASS CSS CSS SCSS * 2 CSS CSS Sass SCSS Sass http://sass-lang.com/ SCSS SCSS 16
scss Sass SCSS SASS 2 CSS 3 Sass CSS * 3 Sass CSS Sass CSSに コンパイル コンパイル 直 接 読 み 込 めない CSS HTML CSSを 読 み 込 み 4 Ruby Windows 5 CUI Character User Interface 6 GUI Graphical User Interface Ruby* 4 Sass Ruby Ruby Sass CUI* 5 Sass 1 Sass 2 Sass P.35 Sass GUI* 6 GUI 2 GUI Koala Sass P.73 1-1 Sass 17
CHAPTER Sass 1 Sass CSS Sass セレクタの 継 承 ミックスイン 変 数 関 数 ファイルの 圧 縮 1 行 コメント Sass 演 算 パーシャル ネスト 制 御 構 文 フレームワーク 3 Nested Rules 7 P.88 CSS Sass * 7 Sass 3 Sass 8 P.96 Sass CSS /* */ JavaScript 1 // * 8 3 Variables 9 P.98 CSS Sass * 9 10 3 P.105 width padding Retina * 10 18
4 @extend 11 P.118 @extend CSS * 11 4 @mixin 12 P.128 Sass 1 * 12 3 CSS 13 P.113 1 CSS Sass 1 CSS HTTP Sass * 13 4 P.140 2 Style 14 15 P.58 * 14 CSS Sass CSS Sass CSS * 15 1-1 Sass 6 Sass Compass 16 P.245 Sass Compass Sass * 16 19
CHAPTER Sass 1 Sass Sass Sass CSS CSS p #main } CSS CSS はシンプル!! だけど 難 しいことは できない Sass CSS セレクタ { プロパティ : 値 } Sass コードの 再 利 用 ネスト 変 数 制 御 構 文 etc. Sass Retina CSS3 Web CSS CSS Sass Hampton Catlin Nathan Weizenbaum CSS CSS Sass 20
17 Haml HTML/ XHTML Sass SASS 2006 Sass Haml* 17 CSS SCSS CSS CSS CSS Web Sass 3.0 CSS Sassy CSS SCSS CSS Sass Sass SCSS Sass Sass Ruby Haml Web SCSS 2010 Sass SassSNS Sass 2012 5 Sass Sass Sass Adobe Dreamweaver CC Sass LESS Web Sass 1-1 Sass 21
CHAPTER さまざまな CSS メタ言語と Sass 1 Sass は CSS を拡張したメタ言語という話をしましたが このメタ言語は Sass 以外にもたくさんあります Sass をご存じの方なら名前を聞いたことが あるかもしれませんが Sass と同じくらい有名な LESS や SASS 記法に近 い Stylus スタイラス が代表的な CSS のメタ言語です LESS LESS は Bootstrap で採用されていたため Sass と同じくらい有名な CSS メタ言語で す 図2 Sass との 比較記事も多く見かけます 書き方は Sass と似ており 機能としては Sass より少ないですが JavaScript で実 装しているため Ruby のインストールなどの作業が必要 なく コンパイルも JavaScript を読み込むことでクライ アントサイドでの動的な CSS の生成ができるなどの特徴 があります JavaScript ベースだったり気軽に使いやす Sass のキホン かったりという点で使っている方が多いように見受けら 図2 LESS http://lesscss.org/ れます Stylus Stylus は Sass や LESS よ り も 後 発 の CSS メ タ 言語で Sass の最初の記法である SASS 記法に似てお り 記述を極限まで簡素化して書くことができるのが特 徴で す 図3 ただ SASS 記法との大きな違いとして CSS の書式も使うことができます また Stylus はもと 図3 Stylus http://learnboost.github.io/stylus/ もと Node.js のモジュールの 1 つとして提供されたので Node.js ベースのフレームワークでも使われています その他の CSS メタ言語 大半の CSS メタ言語は Sass を覚えていればある程度すんなり使えるものが 多いため 気になった CSS メタ言語があれば 実際に試してみるといいでしょう 22
図4 Roole http://roole.org/ 図5 TASS http://cho45.github.io/tasscss/ 図6 PCSS http://pcss.wiq.com.br/ 図7 CSS Crush http://the-echoplex.net/csscrush/ ここで紹介した CSS メタ言語は Sass よりも後発のものが多いため 単純な 機能だけ見たら Sass よりも優れている部分があったり インストールが簡単だっ たりしますが 本書で Sass を取り上げたのには理由があります 第一に Sass はユーザー数が多い点が挙げられます ユーザー数が多いということはそれだけ 支持されている証拠ですし 困ったときに相談したり Web 上を検索して解決 策が見つかる可能性も高くなります 第二に 開発が活発に進んでいます せっ かく覚えても開発が止まってしまっては先行きが怪しくなってしまいますから 勉強する上では重要なポイントでしょう 仮に開発元が開発をやめてしまっても 人気が高いものは有志の方々が引き継いでくれてプロジェクト自体が存続しやす いはずです 他にも 優秀な GUI ツールや Compass を代表とするフレームワー 1-1 まずは Sass って何なのかを知ろう それでも Sass クの充実も Sass を選ぶ大きな理由の 1 つといえます 本書では Compass に 関しても 基本的な使い方や便利な機能に関して説明しているので フレームワー クの魅力にも触れていただけます P.245 他にも Sass の魅力はたくさんありますが こういった理由から Sass を選ん でいます 23
CHAPTER 1 1 2 Sass Ruby Ruby CUIRuby Sass Sass 18 Ruby Mac Windows * 18 Ruby Ruby GUI Windows Mac Sass GUI Sass Sass Sass gem Sass 24
Sass Sass Sass 2 P.68 GUI 黒 い 画 面 は あまり 使 わない! インストールするとき アンインストールするとき アップデートするとき Sass を 書 き 始 めるとき ぐらい... Sass Haml Git Node.js Stylus Grunt Bower CUI GUI Sass GUI Sass 1-2 Sass 25
CHAPTER 1 2 3 GUI Sass CSS GitHub 8 Sass 8 GitHub https://github.com/enja-oss/sass 26
Sass CSS Dreamweaver CSS Sass Adobe Dreamweaver Dreamweaver CSS Dreamweaver CC Sass 今 までの エディタで OK エディタ HTML CSS Sass 1-2 Sass Sass IDE 7 Sass P.304 27
CHAPTER 運用時に Sass を使うのは難しいから Sass は導入できない 1 Sass のハードルを上げている理由として 社内で自分だけが Sass を使うこ とはできない または フリーランスや SOHO でやっていて Sass ファイル ヒント 19 を納品するわけにいかない といった事情が挙げられます 確かに 社内のガイ ドラインが決まっている場合は 会社全体のコーディングルールから見直さなけ 書 き 出 さ れ るC S S の フォーマット アウトプッ ト ス タ イ ル は 4 種 類 あ り 自由に選ぶことがで きます 詳しくは P.58 ればならないケースもありますが そこまでルールが厳しくない場合は 新規で コーディングをするときだけ Sass を使い 運用フェーズに入ってからは Sass を使わないで従来通り CSS ファイルを編集して使うことも可能です Sass はコンパイルする際に CSS ファイルのフォーマットを選ぶことができ ます *19 このフォーマットの 1 つに expanded というものがあり この指定を すると 普通に書いた CSS のように書き出されます Sass のキホン 図9 コンパイル前の Sassファイル 図 10 Sassをexpanded スタイルでコンパイルした CSSファイル コンパイル前後のソースコード 図9 図 10 を見比べていただくとわかるよう に Sass をコンパイルしても通常のコメント /* */ は残りますし CSS ファ イルの可読性も特別悪くなるということはありません Sass の 1 行コメント // はコンパイルすると必ず消えてしまうのでできるだけ控えるようにし CSS 28
Sass 1 expanded Sass Sass LESS Sass CSS CSS CSS CSS CSS Sass CSS Sass で 作 業 Sass 制 作 者 CSS で 納 品 受 け 取 った CSS を 使 う CSS 担 当 者 1-2 Sass Sass 29
CHAPTER 1 1 3 Sass http://book.scss.jp/ code/c1/03.html Sass Web Sass Sass Sass Sass PC IE 8 URL 20 http://sass-lang.com/try.html * 20 Sass http://book.scss.jp/ link/ Google sass try Try Online - Sass 11 11 Sass Sass 2013 8 30
Sass 1 21 Sass Render Sass CSS * 21 http://book.scss.jp/ code/c1/03.html Sass #main { width: 600px; p { margin: 0 0 1em; em { color: #f00; } } } #main p p em CSS Sass 3 P.88 Render CSS CSS #main { width: 600px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; } CSS CSS 1-3 Sass 31
CHAPTER 1 CSS #main { width: 600px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; } Sass #main p em Sass 1 Sass $red: #ff1122; Sass.notes { color: $red; } #main {.notesarea { border: 1px solid $red; } } $ CSS Sass Render CSS CSS.notes { color: #ff1122; } #main.notesarea { border: 1px solid #ff1122; } 32
$red: #ff1122; 1 3 Variables P.98 Web SassMeister 12 12 SassMeister The Sass Playground! http://sassmeister.com/ SassMeister Sass CSS Sass SassMeiste Sass Web HTML5 CSS JavaScript jsdo.it http://jsdo.it/ 13 1-3 Sass 33
CHAPTER jsdo.it http://jsdo.it/ 1 13 jsdo.it Create a new Fiddle - jsfiddle http://jsfiddle.net/ Pens picked by the Editors of CodePen http://codepen.io/ Sass HTML5, CSS3, JS Demos, Creations and Experiments CSSDeck http://cssdeck.com/ Sass Sass CSS Sass Sass 34