Sass_Ch1.indd

Size: px

Start display at page:

Download "Sass_Ch1.indd"

あかりちづ
7 years ago
Views:

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

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

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

3 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

4 CSSSass 1 Sass Sass CSS CSS Sass CSS Sass Sass SCSS sass scss CSS CSS Sass CSS css Sassscss Sassソース $width: 260px; #side { float: right; width: $width; nav { margin: px; Sass CSS CSS scss Sass Sass CSS ファイルには Sass を書くことはできない Sass sass scss Sass 2 SASSsassSCSS scss 2 SASS{ ; CSS /**/ 1-1Sass 15

$width; nav { margin: 0 0 20px; Sass CSS CSS scss Sass Sass CSS ファイルには Sass

5 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

6 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

7 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

8 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

9 CHAPTER Sass 1 Sass Sass SassCSS CSS p #main CSS CSS はシンプル!! だけど難しいことはできない Sass CSS セレクタ { プロパティ : 値 Sass コードの再利用ネスト変数制御構文 etc. Sass Retina CSS3 Web CSS CSS Sass Hampton Catlin Nathan WeizenbaumCSS CSS Sass 20

10 17 Haml HTML/ XHTML Sass SASS2006 Sass Haml* 17 CSS SCSS CSS CSS CSS Web Sass 3.0 CSS Sassy CSS SCSS CSS Sass SassSCSS Sass Sass Ruby Haml Web SCSS 2010Sass SassSNS Sass Sass Sass Sass Adobe Dreamweaver CC Sass LESS Web Sass 1-1Sass 21

11 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

CSS の生成ができるなどの特徴があります JavaScript ベースだったり気軽に使いやす Sass のキホンかったりという点で使っている方が多いように見受けら図2 LESS http://lesscss.

12 図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

支持されている証拠ですし困ったときに相談したり Web 上を検索して解決策が見つかる可能性も高くなります第二に開発が活発に進んでいますせっかく覚えても開発が止まってしまっては先行きが怪しくなってしまいますから勉強する上では重要なポイントでしょう仮に開発元が開発をやめてしまっても

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

Web制作者のためのSassの教科書お試し版 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