Suche senden
Hochladen
Sass introduction (jscafe 10)
•
1 gefällt mir
•
1,640 views
Ryuma Tsukano
Folgen
sassのintroduction
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 47
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Sass 超入門
Sass 超入門
Michinari Odajima
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Css3講座
Css3講座
SeiyaH
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
Sass紹介
Sass紹介
Daisuke Hirayama
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
Empfohlen
Sass 超入門
Sass 超入門
Michinari Odajima
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Css3講座
Css3講座
SeiyaH
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
Sass紹介
Sass紹介
Daisuke Hirayama
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
First sass
First sass
Toshiaki Sasaki
Less - first step
Less - first step
Kohki Nakashima
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
LESSについて
LESSについて
okaSlide80
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sassを使ってみよう
Sassを使ってみよう
GIG inc.
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
CSS Design and Programming
CSS Design and Programming
Taku AMANO
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
実践Sass 前編
実践Sass 前編
Azusa Tomita
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
最近のTDDネタをカジュアルに
最近のTDDネタをカジュアルに
Ryuma Tsukano
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Weitere ähnliche Inhalte
Ähnlich wie Sass introduction (jscafe 10)
First sass
First sass
Toshiaki Sasaki
Less - first step
Less - first step
Kohki Nakashima
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
LESSについて
LESSについて
okaSlide80
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sassを使ってみよう
Sassを使ってみよう
GIG inc.
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
CSS Design and Programming
CSS Design and Programming
Taku AMANO
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
実践Sass 前編
実践Sass 前編
Azusa Tomita
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
Ähnlich wie Sass introduction (jscafe 10)
(20)
First sass
First sass
Less - first step
Less - first step
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
LESSについて
LESSについて
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Sassを使ってみよう
Sassを使ってみよう
Sassをはじめよう!
Sassをはじめよう!
Css preprocessorの始めかた
Css preprocessorの始めかた
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
CSS Design and Programming
CSS Design and Programming
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
実践Sass 前編
実践Sass 前編
Sass(SCSS)について
Sass(SCSS)について
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Mehr von Ryuma Tsukano
最近のTDDネタをカジュアルに
最近のTDDネタをカジュアルに
Ryuma Tsukano
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
関数型プログラミング in javascript
関数型プログラミング in javascript
Ryuma Tsukano
end to end testing(jscafe15)
end to end testing(jscafe15)
Ryuma Tsukano
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Ryuma Tsukano
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Ryuma Tsukano
Rails A/B testing by split gem
Rails A/B testing by split gem
Ryuma Tsukano
Mehr von Ryuma Tsukano
(10)
最近のTDDネタをカジュアルに
最近のTDDネタをカジュアルに
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
関数型プログラミング in javascript
関数型プログラミング in javascript
end to end testing(jscafe15)
end to end testing(jscafe15)
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
BDD by Jasmine (jscafe 13)
BDD by Jasmine (jscafe 13)
Rails A/B testing by split gem
Rails A/B testing by split gem
Kürzlich hochgeladen
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Kürzlich hochgeladen
(9)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Sass introduction (jscafe 10)
1.
Sass Introduction Ryuma Tsukano jsCafe10
2.
CSSの今までの流れ ● 90年代: ○ table
cellでレイアウト/html属性でstyle指定 ● 00年前?: ○ cssでスタイリング ● 21世紀になってから ■ htmlは大規模化=>どんどん読めなくなるcss ● 05/06年辺りから: ○ CSSメタ言語(PreProcessor)が登場★ ○ '09 LESS登場後、現場での事例も続々と... ● 最近: ○ 数年前からoocss等、cssの構造化、framework化
3.
CSS preprocessorとは?(sassを例に) 開発時:sassを作成=>cssに変換 ブラウザーから:cssを見る ● ※Sass関係無い ※Sass関係無
= 例えばbrowserからsassのif文等使えない .sass/ .scss .css .css .html この変換を するのが CSS Preprocessor 皆が作るファイル ユーザーが見るファイル
4.
CSS preprocessor系の主要な歴史 ● 2006年:Sass ●
2009年:LESS ※ここから普及 ● 2010年:Sass version3発表(scss記法) ※普及 ● 2011年:stylus ※間違ってたらすみません。大体、こんな感じ。 上記以外にも、以下のように多数有り Turbine/Switch CSS/CSS Cacheer/CSS Preprocessor/DT CSS/CSS PP/TASS/PCSS等
5.
CSS Preprocessor ● Sass
: 機能いっぱい。FWもある ● LESS : simple。clientでコンパイル。 ● stylus : 細かな機能追加。まだ現在進行系? jscafeだしstylusやりたいけど普及度が謎。 ● Sass/LESSが一般的か!?ややSASS多い? ● LESSが先に普及?=>その後、SassがSCSS記 法(後述)採用してから普及? ● LESS->Sass移る人いても逆はいない
6.
Sass Syntactically : 構文に関して Awesome
: 素晴らしい StyleSheet : スタイルシート
7.
SASSで何ができる? CSSの中にプログラムっぽい事書ける ● ネスト ● 変数 ●
計算 ● 関数 ● 共通化
8.
プログラムぽく書く事で何が嬉しい? 2つのメリット 1. 可読性 ● 人の書いたCSS読み易くなる 2.
再利用性 ● 似たようなstyleを沢山書く必要無くなる =>そして、stylesheetが構造化されていく....
9.
でも、実際導入難しいんじゃ... ● installめんどくさいんでしょ ○ MACの人は楽チンinstall ○
windowsでもGUIある ● cssでもう書いちゃったから無理でしょ ○ Sass内にcss=>Sassのコンバーター(sass-convert) ○ 非公式に web もある ● Sassに生CSSも書けるので、 とりあえず、Sassにして、ネストだけでもやったら CSS管理は楽になる
10.
SASSとSCSSの違い Sassの考え方で2つの記法がある ● SASS記法(.sass) ○ HAMLっぽい独特な記述。 ○
元々これが元祖。 ● SCSS記法(.scss) ○ SassyCSSの略。(SassっぽいCSS) ○ SASS ver3内の記法なので、コンパイラはSASS。 ○ cssっぽく可読性高い。 ○ 通常こちらを使う。今日の話もこちら。 ○ CSSもそのまま書けるので、SCSS記法でいつものCSS 書いておいて、少しずつSASSを覚えて書いて行くという のも可能。 ■ ちなみに、単にネストするだけでも効果的。
11.
参考資料 ● 超入門記事 ○ dotinstall ○
LINEブログの超入門記事 ○ slideshareの記事 ○ とても丁寧なblog記事 ★ ● 書籍 ○ Sass入門(電子書籍のみ) ★ ○ SASS in Action(英)が今後出るみたい($35) ● 公式Page ○ reference ★
12.
始めよう ● CUI(黒い画面) ○ ruby製 ■
mac:rubyは元々install済み ■ windows:one click installerで自分でruby入れて ○ mac:ターミナル/windows:startからruby黒画面起動 ■ gem install sass ● GUI(グラフィカルなツール) ○ scout
13.
インストールが追いつかない人へ ※もしくは、面倒くさい人へ ... 以下で、web上で簡易にsass書ける ● 公式ページ ●
JsFiddle(languageでscssを選ぶ) ● jsdo.it(cssの右プルダウンからscss選択) 今日は一旦これでもいいかもね。
14.
CUIのsassの使い方 1. sassを書く 2. sassをcssにconvertする ●
sass 書いたscss 出力するcss ● ex)sass file_name.scss output.css =>この後は、output.cssを呼べばいつも通り。 ※ちなみに、以下で変更保存を監視して出力 ● sass --watch file_name.scss:output.css ○ ※コロンに注意
15.
基本文法 ぱっと見こんな感じ ● いつものcss! ○ セレクター
{ プロパティ:値 }が基本 .main { margin: 10px; background-color: white; }
16.
ネスト 親要素の{}の中に子要素の{} .main { margin: 10px; background-color
: white; button.submit { background-color: red; } } <div id="main"> </div> <button type=" submit"> </button> html
17.
ネスト:セレクタ指定の色々 親子(>)隣接(+)兄弟(~)等のセレクタも そのまま書ける .header { > .logo
{ background-color:black; + .help { background-color:green; } } }
18.
ネスト:プロパティ font-sizeをfont:{size: ***}と書ける {}内のプロパティは複数指定できる div { font:
{ size: 20px; color: black; } }
19.
親の要素& &:{ ... }内で親の階層をセレクタに入れる ※例で言うと、&にaが入る ※余計な空白入れない事(&:hover) a
{ &:hover { color:red; } }
20.
変数 $英字 : 値で変数定義 プロパティの値として使える $blog-theme-color
: yellow; #blog_description { margin: 10px; background-color : $blog-theme-color; }
21.
6つのデータ型 1. numbers (例:1.2,
13, 10px) 2. strings (例:"foo", 'bar', baz) ○ クオテーション無しでもOKだが、色やbooleanとぶつか る可能性有るので基本は付けた方がいい 3. colors (例:blue, #04a3f9, rgba(255,0,0,0.5)) 4. booleans (例: true, false) 5. nulls(例: null) 6. list(例:1.5em 1em/Helvetica,Arial,sans-serif ) ○ 空白でもコンマ区切りでもOK type-of($value)で型が見れる(@debug)
22.
変数のscope ドキュメントルート:どこからも参照(global) {}の内側:{}の中からだけ参照できる(local) $global : black; .header
{ $local : white; border : 1px solid $local; //OK background-color : $global; //OK }
23.
演算 四則演算可能(+-*/%) ● 「*」はかけ算 ● 「%」は割り算の余り .content
{ width : (300px - 200px) / 2; }
24.
なんでCSSに演算書くの? (1)意図を伝えるためです。 ex : ● 全体の幅:1000px
/ メニューの幅が200px ● だからコンテンツの幅は1000px-200pxなの! (2)変数と組み合わせると後の変更が楽。 (そして更に分かり易くなる) ex : ● 上の例の1000px/200pxを変数にすると、コンテンツの 幅も勝手に変わる
25.
Interpolation(補完) #{...} 変数:プロパティの値にしか入らない #{}:セレクタ/プロパティ/プロパティの値に入る $name:foo; $attr: border; p.#{$name}
{ #{$attr}-clolor: blue; }
26.
!defaults !defaults !は否定=>「デフォルト無ければ」 $content : "First"; $content
: "Second" !default; // default無ければsecond $col : black !default; #main { content : $content; // => "First" ※default入っているから background-color : $col; // => black ※default無いから }
27.
@if:条件分岐 @if 条件 {
... } else { ... } 使用頻度低いがmixinと組合せ等で使うかも $type : top; h1 { @if $type==top { color:black; } @else { color:white; } }
28.
@for文:繰り返し処理 for $今の数値 from
開始数値 to 終了数値{ ... } ● これも使用頻度低い。 ● 他にeach/whileもある。 @for $i from 1 to 3 { .margin#{$i} { margin: #{$i*100}px; } }
29.
@import ファイルの分割 ● 普通のCSS ○ file分割して書く ■
Httpリクエスト増える ● =>遅くなる ● Sass ○ file分割して@importで指定する ■ precompileで1つのファイルにまとまる ● Httpリクエスト1つで済む ● 前者より早い
30.
@import ● ファイルの結合 ○ file名に「_」をつけると結合前のfileは出力されない //
style.scss @import "common"; @import "reset"; _common.scss _reset.scss + style.css (commonとresetと style)
31.
@extend 継承 ある要素のプロパティを引き継ぐ .error { border :
1px red; } .seriousError{ @extend .error; border-width: 3px; }
32.
@extendの注意 ● 名前の衝突が多そう ○ extendする要素はextend-から始める等rule化 ●
style小分け/不要な要素等でセレクタ増える ○ IE(9迄)のセレクタ4095個の制限に注意。
33.
@mixin 引数付きでcssのtemplateを準備できる @includeで呼び出す @mixin large-text($color) { font
: { size: 20px; color:$color; } } .content { @include large-text(black) ; // 引数変えて共通部品使える .main { @include large-text(red) ;} }
34.
@mixinの引数 引数は複数OK 初期値は$変数:初期値 @mixin large-text($color, $width:20px)
{ font : { size: $width; color:$color; } } .content { @include large-text(black) ; //この場合width=初期値20 }
35.
@extendと@mixinの違い @extend ● style変更できない ● cssはセレクタに追加 するだけ @mixin ●
引数で変更可能 ● includeした部分に元 のcss出力 ○ filesize膨らみ易い
36.
@extendと@mixinの使い分け 「@mixinより@extend」 ● ファイルサイズの節約 ○ ただし、@extendで無駄な要素できる事もある ●
style変化有り=>mixin
37.
@debug precompile時に出力できる ※変数や式の中身も見れる $jikken : gray @debug
"Hello"; @debug $jikken; @debug type-of($jikken);
38.
Sass作ってみると... clear:both等どこでも同じ部品作る事になる 初めから楽したい! =>Compass ※大抵Sass使ってる人は Compassも一緒に使ってる
39.
compassとは Sassを使ったframwork。 事前によく使う部品を準備
40.
compass install ● CUI(無料) ○
同じくruby install前提 ○ 黒い画面(MAC:terminal/Win:startからruby)から ○ gem install compass ● GUI(有料$10) ○ MACアプリ ○ rubyのinstallすら要らない。 ○ らくちん管理できるらしい。 web上でもjsdo.itがsass+compass書ける
41.
基本的な使い方 sass=>css変換 compass compile <.scssファイル> watch compass
watch <.scssファイル> dir指定等色々オプションある。
42.
compassのmixinを使う @import "compass"; =>compassの@mixinできるようになる
43.
定番 ● ブラウザdefaultstyleの初期化 ○ @include
global-reset; ● float解除 ○ @include clearfix; ● linkの色指定(通常/hover/active/visited/focus) ○ @include link-colors(#339,#33f,#933,#636,#333); ● 角丸 ○ @include border-radius(3px); ● 他、色々便利mixinが準備されてる ○ 公式ページ
44.
CSS Sprite ● 最終的なcss: ○
画像は1つのfile=http request1回で済む ○ 各画像表示は1つの画像の位置調整で表示 ● scss作る時: ○ 管理し易いように画像fileは複数 ○ 画像表示
45.
CSS sprite iconディレクトリにup.png/down.pngを格納 @include all-icon-sprites; @import
"icon/*.png" @include all-icon-sprites; // => これで自動でclassが作られる(icon-up/icon-down) // html側から <span class="icon-up"></span>
46.
他に出来る事 ● 関数(sin等算術計算等) ● レイアウト(grid) ●
config.rbで細かく設定=>CIと繋ぐ 等々、色々出来る 必要に応じて 公式ドキュメント見ると良いかも
47.
まとめ ● Sass ○ 見やすく再利用し易くなる ○
@mixin/@extendで再利用 ● Compass ○ お決まりのmixin ○ 画像スプリット
Jetzt herunterladen