WebデザイナーのためのSass/Compass入門
Upcoming SlideShare
Loading in...5
×
 

WebデザイナーのためのSass/Compass入門

on

  • 894 views

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレ...

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。

この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。

ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル(変換)する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。

なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。

Statistics

Views

Total Views
894
Views on SlideShare
894
Embed Views
0

Actions

Likes
9
Downloads
7
Comments
0

0 Embeds 0

No embeds

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

WebデザイナーのためのSass/Compass入門 WebデザイナーのためのSass/Compass入門 Presentation Transcript

  • Introduction to Sass/Compass for Web Designer Webデザイナーのための Sass/Compass 入門 Ameba Headquarters Game Division Web Developer Koji Ishimoto 2013.09.27
  • @t32k
  • Web Designer Design, HTML/CSS
  • Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  • Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  • <- イマココ 2012/06 ~ Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  • Agenda なぜSassを使うのか? 開発環境の構築 Sass/Compassの機能 まとめ 質疑応答
  • なぜSassを使うのか?
  • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  • *.scss *.sass *.cssSass Compiler
  • *.scss *.sass *.cssSass Compiler 便利なSass
  • *.scss *.sass *.cssSass Compiler 便利なSass 普通のCSS
  • 無理して使う必要はない
  • 学習コストの増加
  • 学習コストの増加 開発環境の不一致
  • 学習コストの増加 開発環境の不一致 コードの肥大化
  • Sassをキッカケに エンジニア文化を知る
  • Front-end Engineer HTML JavaScript DesignerCSS
  • Front-end Engineer JavaScript DesignerCSS
  • Front-end Engineer JavaScript Designer
  • Front-end Engineer Designer
  • Terminal Command Prompt
  • 黒い画面を日常的に使っている人
  • Sass使いたいヽ(´ー`)ノ
  • Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ
  • Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・)
  • Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`)
  • Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`) ほかの場面でも使う(・`ω・´)
  • Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`) ほかの場面でも使う(・`ω・´) 黒い画面最高 \(^o^)/
  • https://github.com/t32k/maple
  • スプライト画像の生成 スタイルガイドの生成 Webフォントの生成 静的サーバー起動 ライブリロード 画像の最適化 CSSの縮小化 CSSのリント CSSプロパティのソート Sass/Compassのコンパイル プロジェクトのスキャフォー ルディング
  • Demo
  • エンジニアは怠け者
  • だが、それがいい!
  • 開発環境の構築
  • 必要なもの テキストエディタ Sassコンパイラ
  • 好きなエディタって何ですか?
  • http://www.sublimetext.com/
  • https://github.com/t32k/Sublime-Text-2-Icon/tree/moreskine
  • Terminal
  • Terminal
  • Prepros
  • http://alphapixels.com/prepros/
  • Demo
  • http://sassmeister.com/
  • 自分に合ったスタイルで 無理せず導入する
  • Sass/Compassの機能
  • 変数
  • 変数 ミックスイン
  • 変数 ネスト ミックスイン
  • 変数 継承ネスト ミックスイン
  • 変数 継承ネスト ミックスイン +
  • 拡張フレームワーク Compass
  • http://compass-style.org/
  • @import "compass"; Sass
  • @import "compass"; 読み込みます! Sass
  • 何のファイルを? @import "compass"; 読み込みます! Sass
  • Prepros
  • Prepros
  • 変数 Variables $
  • $hensu: #ffffff; Sass
  • $hensu: #ffffff; 変数の接頭辞 Sass
  • $hensu: #ffffff; 変数の接頭辞 変数名 Sass
  • $hensu: #ffffff; 変数の接頭辞 変数名 値 Sass
  • // Comment $main-color: #cc0000; $space: 10px; .global-header { background-color: $main-color; } .module { margin: $space * 2; padding: $space / 2; } Sass
  • CSS .global-header { background-color: #cc0000; } .module { margin: 20px; padding: 5px; }
  • Variables 変数を一元管理して使用すれば スタイルに一貫性があり修正に強いサイトができる 変数
  • ネスト Nesting { }
  • .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } Sass
  • .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 Sass
  • .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 Sass
  • .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 入れ子の入れ子の Sass
  • .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } CSS
  • .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 CSS
  • .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 親のセレクタも適用 CSS
  • .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } Sass
  • .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } プロパティの ネストも可能 Sass
  • .login-module { padding: 10px; } .login-module .headline { font-family: bold; font-size: 18px; } .login-module .sentence { color: #666; } CSS
  • Nesting モジュール単位でCSSを管理する 3階層以上ネストしてはいけない ネスト
  • ミックスイン Mixins @mixin @include
  • @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } Sass
  • @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスインの定義 Sass
  • @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 Sass
  • @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 Sass
  • @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 ミックスインの呼び出し Sass
  • .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } CSS
  • .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } ミックスインが展開された部分 CSS
  • .marui-marui { @include border-radius(4px); } Sass
  • .marui-marui { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } CSS
  • Mixins 最初からミックスインを作ろうとは思わない Compassのミックスインを研究してみる ミックスイン
  • 継承 Selector Inheritance @extend
  • @extend .keishooo; Sass
  • 継承します! @extend .keishooo; Sass
  • 何のセレクタを?継承します! @extend .keishooo; Sass
  • .message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { @extend .message-box; border: 1px red solid; color: red; } Sass
  • .message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { @extend .message-box; border: 1px red solid; color: red; } Sass 継承元を指定
  • .message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { border: 1px red solid; color: red; } CSS
  • .message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { border: 1px red solid; color: red; } CSS継承したセレクタ
  • Selector Inheritance モジュール単位でうまく継承できれば コードを格段に削減することができる 継承
  • 基本の機能を ちゃんと理解する
  • まとめ
  • 最初から スゴイことはできない
  • 基本の積み重ねが 応用になる
  • “その時”が来てからでは遅い 先行者はずっと先にいる
  • 両方できるとカッコイイ (*´ω`*)
  • 次のステップのために
  • https://github.com/enja-oss/Sass
  • http://book.scss.jp/
  • http://prog4designer.github.io/
  • Thank you! t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop
  • Photo Credit http://www.flickr.com/photos/eneas/2522135992/ http://www.flickr.com/photos/morch/3427998257/ http://www.flickr.com/photos/alper/9311087323/ http://www.flickr.com/photos/krakow81/287771868/ http://www.flickr.com/photos/39463459@N08/3678526285/ http://www.flickr.com/photos/eurich/6959899839/ http://www.flickr.com/photos/burningredstudio/5080766621/