Contenu connexe
Similaire à About Sass (11)
About Sass
- 1. CSS拡張言語
Sassの基本と機能について
Minoru Hayakawa
12年11月2日金曜日
- 2. アジェンダ
• CSS拡張言語のメリットとデメリット
• CSS拡張言語の種類
• Sass,LESS,Stylusについて
• Sassのインストール
• 開発にするにあたって
• Sassの機能
• まとめ
12年11月2日金曜日
- 3. CSS拡張言語を使うメリット
• メンテナンス性の向上
- 冗長な記述の排除、再利用性のあるコード
が書ける
• 開発効率向上
- mixin,extend,関数,変数,ネスト
12年11月2日金曜日
- 4. CSS拡張言語を使うデメリット
（注意点）
• 独自記法の学習コスト
• IE９のセレクタ数制限により陥りやすい
（4095セレクタが制限）
• クライアント側でCSS修正がはいる場合
は双方の確認が必要
12年11月2日金曜日
- 5. CSS拡張言語の種類
Sass LESS Stylus
Ruby JavaScript Node.js
Rubyインストール JSライブラリ Nodeインストール
Sassインストール （クライアントサイド） Stylusインストール
LESSインストール
（サーバーサイド）
12年11月2日金曜日
- 7. LESS
• クライアントサイドかサーバーサイド
- クライアントサイド
- パフォーマンス的にどうなの？
- JavaScript無効環境では使えない
- サーバーサイド
- LESSがインストールできるか確認する必要がある
12年11月2日金曜日
- 8. Stylus
ようわからん (｀・ω・´)キリッ
SassとLESSと構文が異なるので、
学習コストが高い（多分）
12年11月2日金曜日
- 9. Sass
• ローカルの開発環境だけでコンパイル
可能
• Scss記法で学習コスト低減
• Compass（Sassフレームワーク）
12年11月2日金曜日
- 11. SassとScssの記述例(変数)
Sass(.sass) Scss(.scss)
$color: #000000; $color: #000000;
#header #header {
width: 100%; width: 100%;
background: $color; background: $color;
}
12年11月2日金曜日
- 12. SassとScssの記述例(ネスト)
Sass Scss
table table {
border-space: 0; border-space: 0;
th th {
text-align: left; text-align: left;
}
}
12年11月2日金曜日
- 13. なぜScss記法か
• Sass記法よりも可読性が良い
• CSSの記述をそのままSassにできる
• 段階的にSassの知識を伸ばしていける
12年11月2日金曜日
- 15. • Rubyをインストール（Windowsのみ）
• Sassのインストール
- sudo gem install sass
12年11月2日金曜日
- 17. _symbol.scss
変数やmixinを定義
CSS
base.scss
基本となるスタイル定義
style.scss
基本となるスタイル定義
12年11月2日金曜日
- 18. _symbol.scssを用意する理由
• 変数やmixinの管理をしやすくするため
• 変数などはscssの上部に記述する必要が
あるため、参照する度にファイル内で
上下に行ったり来たりを避けるため
12年11月2日金曜日
- 22. 開発ディレクトリに移動
例：
cd /Applications/MAMP/htdocs/sass/css
12年11月2日金曜日
- 25. ネスト
子孫セレクタを使う場合に用いる
12年11月2日金曜日
- 31. &キーワード
• 親セレクタの参照
12年11月2日金曜日
- 32. おまけ
• CSSプロパティのネスト記法もある
12年11月2日金曜日
- 35. Mixin
プロパティやセレクタの再利用を可能とする機能
12年11月2日金曜日
- 36. _symbol.scss
@mixinで定義
style.scss
@includeで指定
12年11月2日金曜日
- 37. _symbol.scss
引数を与える
style.scss
使う場面で引数に値を指定
style.css
12年11月2日金曜日
- 38. clearfix
_symbol.scss
style.scss
12年11月2日金曜日
- 42. Extend
あるスタイルを定義したセレクタを継承させる機能
12年11月2日金曜日
- 52. • @extendを用いる場合、セレクタのル
ールを決める
- プレースホルダーセレクタを用いる
- 但し、mixinと差別化をどう図るかが必要
12年11月2日金曜日
- 54. • percentage() 数値(px)を%に変換
style.scss
style.css
12年11月2日金曜日
- 55. • floor() 小数点を切り捨て
style.scss
style.css
関連：round(),ceil()
12年11月2日金曜日
- 56. • abs() --- 絶対値を取得
• quote() --- クォートする
• unquote() --- クォートを取り除く
• red(), green(), blue() --- RGB形式から値
を抜き出す
• alpha(),opacity() --- 透明度を取得
• hue(),saturation(),lightness() --- HSL形
式から値を抜き出す
12年11月2日金曜日
- 57. • rgb() --- RGB形式に変換
• hsl() --- HSL形式に変換
• rgba() --- RGBA形式に変換
• hsla() --- HSLA形式をRGBA形式に変換
• transparentize() --- より透明
• opacify() --- より不透明にする
• darken() --- 輝度を下げる
12年11月2日金曜日
- 58. • desaturate() --- 輝度を上げる
• grayscale() --- グレースケールにする
• complement() --- 補色にする
• invert() --- 反転色にする
• mix() --- 2色の中間色を取得する
• type-of() --- 値の型を取得
• unit() --- 値の単位を取得
more......
12年11月2日金曜日
- 60. reset.css
base.css
style.css
font.css
CSSの@importルールはパフォーマンスの意味合いで最近は
使われない、またパフォーマンスの件でも複数のCSSを指定
しない傾向にある
12年11月2日金曜日
- 61. reset.scss
base.scss
style.scss
font.scss
Sassの@importで複数のscssをひとつのCSSとしてコンパイ
ルさせる。複数で開発する場合は、非常に有効。
12年11月2日金曜日
- 65. • Sassの場合は、Scss記法のことを指すこ
とがほとんど
• CSSの問題を軽減し、開発効率があがる
• Sassの機能をすべて理解する必要はな
いが・・・・
- MixinやExtendを使ってコードの再利用性を
高め、メンテナンス性を上げる
- SassのフレームワークのCompassを使うこ
とにより、より開発効率があがる
12年11月2日金曜日
