sass+compassのココが好き(2012年11月19日 wcan mini markup vol.12)
TRANSCRIPT
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://dounokouno.com/
少しだけ作ったものを紹介させてください!
作ったもの その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ライセンス• MOONGIFT様のご紹介いただいてプチブレイク
本題
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; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;}
好きなところ その2@include
/* Sass(SCSS) */h1 { margin: ...; padding: ...; color: ...; font-size: ...; background: ...;}
h2 { @extend h1; font-size: 14px;}
/* Generated CSS */h1, h2 { margin: ...; padding: ...; color: ...; font-size: ...; background: ...;}
h2 { font-size: 14px;}
好きなところ その3CSS Sprite
/* Sass(SCSS) */@import "compass";@import "icons/*.png";
.icon-external { @include icons-sprite(external, 1);}
.icon-mailto { @include icons-sprite(mailto, 1);}
/* ※display: inline-block;は省略しています */
/* 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;}
あなたが思うSass+Compassの好きなところを教えてください!
ご清聴ありがとうございました