• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
About Sass
 

About Sass

on

  • 1,899 views

Slide for Sass

Slide for Sass

Statistics

Views

Total Views
1,899
Views on SlideShare
1,495
Embed Views
404

Actions

Likes
8
Downloads
8
Comments
0

5 Embeds 404

http://blog.e-riverstyle.com 370
http://ss.dotbranch.com 25
http://seo-assist.net 6
https://twitter.com 2
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    About Sass About Sass Presentation Transcript

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