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の好きなところを教えてください！

ご清聴ありがとうございました