Web制作者のためのSassの教科書お試し版

Size: px

Start display at page:

Download "Web制作者のためのSassの教科書お試し版"

ひできおとべ
7 years ago
Views:

2 Web Web CSS Space Web EC Web EC Sou-Lab Latele WEBCRE8.jp URL Apple Mac Macintosh Apple Inc. Microsoft Windows Microsoft Corporation

com/ http://blog.sou-lab.com/ http://bebe-log.com/ Latele WEBCRE8.

3 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

4 CONTENTS Sass Sass 12 CSS Sass 12 Sass 14 Sass SCSS sass scss 15 scss 17 Sass 18 Sass 20 CSS Sass Sass 24 Ruby SassSass 28 Sass Sass 30 Sass 33 2 Sass Windows Sass Ruby 38 Ruby 39 Sass 41 Tips Mac Sass Ruby 45 Sass 46 Tips 47

SassSass 28 Sass 29 1-3 Sass 30 Sass 33 2 Sass 35 2-1 Windows Sass 36 36

5 2-3 Sass 48 gem 48 Sass Sass Style 58 Watch 61.sass-cache Windows 69 Mac GUI Koala Sass 73 Koala GUI Windows Ruby ruby 83 Mac Sass 84 Mac 84 Watch 84 Windows 85 Watch 85 Koala Windows 86 KoalaWindows 86 3 Sass Nested Rules

78 80 81 GUI 82 2-7 83 Windows Ruby ruby 83 Mac Sass 84 Mac 84 Watch 84 Windows

6 3-2 & Nested Properties Sass Variables CSS Sass !optional ,

114 @import 114 4 Sass 117 4-1 @extend 118 @extend 118 121 @extend 122 @extend 122

7 @content abs() 149 round() 149 ceil() floor() RGB RGBA rgba() 151 lighten() darken() mix() 153 N nth() Sass #{} !default 168!default 168!default Sass / Tips

@function 155 @function 155 156 156 157 157 4-6 @debug @warn 158 @debug 158 @warn 159 4-7 Sass 161

8 174 CSS Sass 175 CSS CSS Sass 179 CSS 180 Sass 181 CSS Sass Sass 185 Sass Tips 192 Sass!? 4,095 IE9 192 Sass CSS CSS CSS3 200 IE rem 203 Sass Tips 210 px % 212 YUI CSS Fonts null 216 calc class 220 class 222 class opacity 224 CSS Tips Retina Sass Compass Compass 246 Compass 246 Compass config.rb 249 Compass 252 Compass GUI 253

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

9 6-2 Compass 254 Compass 254 Compass Compass 256 CSS3 256 Utilities 263 Typography Compass Compass Helpers 272 Image Helpers 272 Color Helpers 274 Selector Helpers Compass CSS Compass Sprites Sprites Oily PNG CSSSprite Helpers 290 Sprite Helpers sprite-map() 294 Compass Compass Recipes Sass Sass Sass 304 Windows/Mac 305 Windows 306 Mac 307

Sprites 277 277 279 Sprites 281 285 288 Oily PNG 289 6-7 CSSSprite Helpers 290 Sprite Helpers 290 293 sprite-map()

10 7-3 Dreamweaver Sass 308 Dreamweaver CC Sass 308 CS6 Sass Dreamweaver Sass GUI 311 Windows/Mac 311 Mac Sass CUI Sass Sass 318 CSS CSS Extensions 318 Sass 319 Sass Sass 325 RGB 325 HSL Sass 336 Ruby

CSS CSS Extensions 318 Sass 319 Sass 319 @ 322 323 324 8-2 Sass 325 RGB 325

11 1 Sassのキホン 1 Sass Sass Sass 1-1 Sass Sass Sass 30

12 CHAPTER Sass Sass Sass Sass 2 P.35 CSS Sass Sass CSS CSS CSS CSS Sass Sass 導入しない理由今の CSS で十分間に合っているそこまで CSS に不便さや手間を感じていない得られるメリットより学習コストのほうが高い気がするプログラムが書けないとメリットが少ない使いこなせない Ruby や黒い画面を使う必要がある普段コーディングメインで作業していない環境に依存するから実務では使いにくい開発元が英語で日本語の情報が少ない...など 12

CSS に不便さや手間を感じていない得られるメリットより学習コストのほうが高い気がするプログラムが書けないとメリットが少

13 Sass Sass Sass CSS Sass Sass P.18 Sass Sass LINE Sass Sass Sass Sass CSS CSS Sass Sass 1-1 Sass 13

14 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 Sass Sass

15 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: px; } } Sass CSS CSS scss Sass Sass CSS ファイルには Sass を書くことはできない Sass sass scss Sass 2 SASS sassscss scss 2 SASS{ } ; CSS /**/ 1-1 Sass 15

nav { margin: 0 0 20px; } } Sass CSS CSS scss Sass Sass CSS ファイルには Sass を書

16 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 SCSS SCSS 16

margin-bottom: 5px; } } 3 Nested Rules 2 P.

17 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 Sass 17

Interface 6 GUI Graphical User Interface Ruby* 4 Sass Ruby Ruby Sass CUI*

18 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 * P.105 width padding Retina * 10 18

19 11 CSS * P.128 Sass 1 * 12 3 CSS 13 P CSS Sass 1 CSS HTTP Sass * 13 4 P Style P.58 * 14 CSS Sass CSS Sass CSS * Sass 6 Sass Compass 16 P.245 Sass Compass Sass * 16 19

113 1 CSS Sass 1 CSS HTTP Sass * 13 4 P.

20 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

21 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 Sass Sass Sass Adobe Dreamweaver CC Sass LESS Web Sass 1-1 Sass 21

22 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 れます Stylus Stylus は Sass や LESS よりも後発の CSS メタ言語で Sass の最初の記法である SASS 記法に似ており記述を極限まで簡素化して書くことができるのが特徴です図3 ただ SASS 記法との大きな違いとして CSS の書式も使うことができますまた Stylus はもと図3 Stylus もと Node.js のモジュールの 1 つとして提供されたので Node.js ベースのフレームワークでも使われていますその他の CSS メタ言語大半の CSS メタ言語は Sass を覚えていればある程度すんなり使えるものが多いため気になった CSS メタ言語があれば実際に試してみるといいでしょう 22

23 図4 Roole 図5 TASS 図6 PCSS 図7 CSS Crush ここで紹介した CSS メタ言語は Sass よりも後発のものが多いため単純な機能だけ見たら Sass よりも優れている部分があったりインストールが簡単だったりしますが本書で Sass を取り上げたのには理由があります第一に Sass はユーザー数が多い点が挙げられますユーザー数が多いということはそれだけ支持されている証拠ですし困ったときに相談したり Web 上を検索して解決策が見つかる可能性も高くなります第二に開発が活発に進んでいますせっかく覚えても開発が止まってしまっては先行きが怪しくなってしまいますから勉強する上では重要なポイントでしょう仮に開発元が開発をやめてしまっても人気が高いものは有志の方々が引き継いでくれてプロジェクト自体が存続しやすいはずです他にも優秀な GUI ツールや Compass を代表とするフレームワー 1-1 まずは Sass って何なのかを知ろうそれでも Sass クの充実も Sass を選ぶ大きな理由の 1 つといえます本書では Compass に関しても基本的な使い方や便利な機能に関して説明しているのでフレームワークの魅力にも触れていただけます P.245 他にも Sass の魅力はたくさんありますがこういった理由から Sass を選んでいます 23

24 CHAPTER Sass Ruby Ruby CUIRuby Sass Sass 18 Ruby Mac Windows * 18 Ruby Ruby GUI Windows Mac Sass GUI Sass Sass Sass gem Sass 24

25 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

26 CHAPTER GUI Sass CSS GitHub 8 Sass 8 GitHub 26

27 Sass CSS Dreamweaver CSS Sass Adobe Dreamweaver Dreamweaver CSS Dreamweaver CC Sass 今までのエディタで OK エディタ HTML CSS Sass 1-2 Sass Sass IDE 7 Sass P

28 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

29 Sass 1 expanded Sass Sass LESS Sass CSS CSS CSS CSS CSS Sass CSS Sass で作業 Sass 制作者 CSS で納品受け取った CSS を使う CSS 担当者 1-2 Sass Sass 29

30 CHAPTER Sass code/c1/03.html Sass Web Sass Sass Sass Sass PC IE 8 URL 20 * 20 Sass link/ Google sass try Try Online - Sass Sass Sass

31 Sass 1 21 Sass Render Sass CSS * 21 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

32 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

33 $red: #ff1122; 1 3 Variables P.98 Web SassMeister SassMeister The Sass Playground! SassMeister Sass CSS Sass SassMeiste Sass Web HTML5 CSS JavaScript jsdo.it Sass 33

34 CHAPTER jsdo.it jsdo.it Create a new Fiddle - jsfiddle Pens picked by the Editors of CodePen Sass HTML5, CSS3, JS Demos, Creations and Experiments CSSDeck Sass Sass CSS Sass Sass 34

Sass_Ch1.indd

Sass_Ch1.indd CHAPTER 1 1 1 Sass Sass Sass Sass 2 P.35 CSS Sass Sass CSS CSS CSS CSS Sass Sass 導入しない理由今の CSS で十分間に合っているそこまで CSS に不便さや手間を感じていない得られるメリットより学習コストのほうが高い気がするプログラムが書けないとメリットが

Web制作者のためのSassの教科書 お試し版

Web制作者のためのSassの教科書お試し版