Sass+Compassの    ココが好き2012年11月19日 WCAN mini Markup vol.12          まほし 多川貴郎
自己紹介 その1• 多川 貴郎• タガワ タカオ• 31歳• 既婚• フリーランス
自己紹介 その2• 屋号:まほし• 2011年6月2日開業• 開業して約1年5ヶ月
自己紹介 その3• 主にHTML、CSS、JS、PHPを担当する私• 主にデザイン、HTML、CSSを担当する妻• の2人で活動
自己紹介 その4•   Twitter:    •   @dounokouno•   Facebook:    •   https://www.facebook.com/dounokouno•   Blog:    •   http://dou...
少しだけ作ったものを紹介させてください!
作ったもの その1• Web制作小物ツール • http://webtools.dounokouno.com/ • ダミーテキストジェネレータ • パスワードジェネレータ • Basic認証コードジェネレータ等
作ったもの その2• 部首検索•   http://etc.dounokouno.com/bushu-search/• Ajaxで• 複数個の漢字の部首を• 一覧で表示
作ったもの その3• TransmitMail •   https://github.com/dounokouno/TransmitMail •   PHPのメールフォーム •   Copyright表示不要 •   MITライセンス •   ...
本題
SassやLESS使ってますか?
私はSassを使っています
私がSassを使い始めた理由は
Ruby on Railsの案件にアサインされたから
まだSassを使い始めて  2案件目の私が
Sass+Compassの個人的に好きなところを   ご紹介します
Sass+Compassの        ココが好き• @mixin• @extend• CSS Sprite
念のためSassとCompassの説明
Sassとは• CSSのプリプロセッサ• CSSの拡張メタ言語• http://sass-lang.com/• 以下略
Compassとは• Sassのライブラリ群(?)• http://compass-style.org/• 以下略
それぞれの詳細やインストール方法はググってください!
好きなところ その1   @mixin
/* Sass(SCSS) */.button {    @include border-radius(3px);}/* Generated CSS */.button {    -webkit-border-radius: 3px;    -...
好きなところ その2  @include
/* Sass(SCSS) */h1 {     margin: ...;     padding: ...;     color: ...;     font-size: ...;     background: ...;}h2 {     ...
/* Generated CSS */h1, h2 {    margin: ...;    padding: ...;    color: ...;    font-size: ...;    background: ...;}h2 {   ...
好きなところ その3  CSS Sprite
/* Sass(SCSS) */@import "compass";@import "icons/*.png";.icon-external {    @include icons-sprite(external, 1);}.icon-mail...
/* Generated CSS */.icons-sprite, .icon-external, .icon-mailto {    background:        url(../img/icons-s3e910d70cf.png)  ...
あなたが思うSass+Compassの好きなところを教えてください!
ご清聴ありがとう ございました
Upcoming SlideShare
Loading in …5
×

Sass+Compassのココが好き(2012年11月19日 WCAN mini Markup Vol.12)

786 views

Published on

WCAN mini Markup vol.12のLTの資料です。

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
786
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sass+Compassのココが好き(2012年11月19日 WCAN mini Markup Vol.12)

  1. 1. Sass+Compassの ココが好き2012年11月19日 WCAN mini Markup vol.12 まほし 多川貴郎
  2. 2. 自己紹介 その1• 多川 貴郎• タガワ タカオ• 31歳• 既婚• フリーランス
  3. 3. 自己紹介 その2• 屋号:まほし• 2011年6月2日開業• 開業して約1年5ヶ月
  4. 4. 自己紹介 その3• 主にHTML、CSS、JS、PHPを担当する私• 主にデザイン、HTML、CSSを担当する妻• の2人で活動
  5. 5. 自己紹介 その4• Twitter: • @dounokouno• Facebook: • https://www.facebook.com/dounokouno• Blog: • http://dounokouno.com/
  6. 6. 少しだけ作ったものを紹介させてください!
  7. 7. 作ったもの その1• Web制作小物ツール • http://webtools.dounokouno.com/ • ダミーテキストジェネレータ • パスワードジェネレータ • Basic認証コードジェネレータ等
  8. 8. 作ったもの その2• 部首検索• http://etc.dounokouno.com/bushu-search/• Ajaxで• 複数個の漢字の部首を• 一覧で表示
  9. 9. 作ったもの その3• TransmitMail • https://github.com/dounokouno/TransmitMail • PHPのメールフォーム • Copyright表示不要 • MITライセンス • MOONGIFT様のご紹介いただいてプチブレイク
  10. 10. 本題
  11. 11. SassやLESS使ってますか?
  12. 12. 私はSassを使っています
  13. 13. 私がSassを使い始めた理由は
  14. 14. Ruby on Railsの案件にアサインされたから
  15. 15. まだSassを使い始めて 2案件目の私が
  16. 16. Sass+Compassの個人的に好きなところを ご紹介します
  17. 17. Sass+Compassの ココが好き• @mixin• @extend• CSS Sprite
  18. 18. 念のためSassとCompassの説明
  19. 19. Sassとは• CSSのプリプロセッサ• CSSの拡張メタ言語• http://sass-lang.com/• 以下略
  20. 20. Compassとは• Sassのライブラリ群(?)• http://compass-style.org/• 以下略
  21. 21. それぞれの詳細やインストール方法はググってください!
  22. 22. 好きなところ その1 @mixin
  23. 23. /* Sass(SCSS) */.button { @include border-radius(3px);}/* Generated CSS */.button { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;}
  24. 24. 好きなところ その2 @include
  25. 25. /* Sass(SCSS) */h1 { margin: ...; padding: ...; color: ...; font-size: ...; background: ...;}h2 { @extend h1; font-size: 14px;}
  26. 26. /* Generated CSS */h1, h2 { margin: ...; padding: ...; color: ...; font-size: ...; background: ...;}h2 { font-size: 14px;}
  27. 27. 好きなところ その3 CSS Sprite
  28. 28. /* Sass(SCSS) */@import "compass";@import "icons/*.png";.icon-external { @include icons-sprite(external, 1);}.icon-mailto { @include icons-sprite(mailto, 1);}/* ※display: inline-block;は省略しています */
  29. 29. /* Generated CSS */.icons-sprite, .icon-external, .icon-mailto { background: url(../img/icons-s3e910d70cf.png) no-repeat;}.icon-external { background-position: 0 -10px; height: 10px; width: 10px;}.icon-mailto { background-position: 0 0; height: 10px; width: 13px;}
  30. 30. あなたが思うSass+Compassの好きなところを教えてください!
  31. 31. ご清聴ありがとう ございました

×