View
5.958
Download
0
Category
Preview:
DESCRIPTION
前知識がない人のためのSassの始めかたです。
Citation preview
CSSの未来を先取り!
CSS Preprocessorの始めかた
@adactio (CC BY2.0)
CSSPreprocessor
CSSPreprocessor
#main { float: right;}#main p { margin-bottom: 1em;}
#main { float: right;}#main p { margin-bottom: 1em;}
#main { float: right; p { margin-bottom: 1em; }}
#main { float: right;}#main p { margin-bottom: 1em;}
CSSPreprocessor
CSSPreprocessor
+
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
一緒に使うのでいちいち覚えなくてもOK
Sass・Compassのメリット
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
.box { @include border-radius(5px);}
.box { @include border-radius(5px);}
.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
#main { float: right; p { margin-bottom: 1em; }}
#main { float: right;}#main p { margin-bottom: 1em;}
#main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } }}
Sass
#main { margin: 5px;}#main a { text-decoration: none;}#main a.link { display: inline-block;}#main a:hover { color: #F00;}
CSS
#main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } }}
Sass
#main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } }}
Sass
#main { margin: 5px;}#main a { text-decoration: none;}#main a.link { display: inline-block;}#main a:hover { color: #F00;}
CSS
ZERGE_VIOLATOR (CC BY 2.0)
Media Queries
ZERGE_VIOLATOR (CC BY 2.0)
#main { float: left; width: 700px; margin: 0 auto;}@media screen and (max-width: 640px) { #main { float: none; width: 100%; }}
CSS
#main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; }}
Sass
#main { float: left; width: 700px; margin: 0 auto;}@media screen and (max-width: 640px) { #main { float: none; width: 100%; }}
CSS
#main { float: left; width: 700px; margin: 0 auto;}@media screen and (max-width: 640px) { #main { float: none; width: 100%; }}
CSS
#main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; }}
Sass
#main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; }}
Sass
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
読み込み
読み込み
.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo");}
$share-sprite: sprite-map("share/*.png");$share-sprite-url: sprite-url($share-sprite);
.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo");}
.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo");}
.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: 419px; height: 62px; background-image: url('/img/share-s6664b1cfc3.png'); background-repeat: no-repeat; background-position: 0 0;}
.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo");}
.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: 419px; height: 62px; background-image: url('/img/share-s6664b1cfc3.png'); background-repeat: no-repeat; background-position: 0 0;}
CSS Sprite
Vendor Prefix
Variable
Mixin
Nesting
extend
+
import.css
@import url(reset.css);@import url(module.css);@import url(style.css);
#main { float: right;}#main p { margin-bottom: 1em;}
import.css
@import url(reset.css);@import url(module.css);@import url(style.css);△
#main { float: right;}#main p { margin-bottom: 1em;}
import.css
@import url(reset.css);@import url(module.css);@import url(style.css);△
#main { float: right;}#main p { margin-bottom: 1em;}
↓↓
↓↓
↓
....
....
import.css
@import url(reset.css);@import url(module.css);@import url(style.css);△
#main { float: right;}#main p { margin-bottom: 1em;}
↓↓
↓↓
↓
....
.... △
import.scss
@import "reset";@import "module";@import "style";
import.css
/*--- reset */html { overflow-y: scroll;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,
#header {}
#main { float: right;}#main p { margin-bottom: 1em;}
↓↓
↓↓
↓
....
....
#main { float: right;}#main p { margin-bottom: 1em;}
↓↓
↓↓
↓
....
....
$compass compile -s compressed style.scss
#main { float: right;}#main p { margin-bottom: 1em;}
↓↓
↓↓
↓
....
....
$compass compile -s compressed style.scss
#main { float: right;}#main p { margin-bottom: 1em;}
↓↓
↓↓
↓
....
....
#main{float:right;}#main p{margin-bottom:1em;}
$compass compile -s compressed style.scss
Try it!
@!ickrized (CC BY 2.0)
お試しなので、コマンドプロンプトは使いません
×
インストーラーをダウンロード
Scout - Compass and Sass without all the hasslehttp://mhs.github.com/scout-app/
インストーラーをダウンロード
インストーラーに従って進むだけ
Input FolderSassファイルのディレクトリ
Input FolderSassファイルのディレクトリ
Output FolderCSSファイルのディレクトリ
site_data
css
_scssstyle.scss
style.css
Input Folder
Output Folder
Images Folder画像フォルダー(Sprite時)
Images Folder画像フォルダー(Sprite時)
Output Style書き出しスタイル
Nested 入れ子でExpanded よく書く感じのCompact 1行スタイルCompressed 改行スペース削除
Nested#main { width: 700px; float: left; } #main p { margin: 5px; }
Expanded#main { width: 700px; float: left;}#main p { margin: 5px;}
Compact
#main { width: 700px; float: left; }#main p { margin: 5px; }
Compressed
#main{width:700px;float:left}#main p{margin:5px}
Nested 入れ子でExpanded よく書く感じのCompact 1行スタイルCompressed 改行スペース削除
可読性 ファイルサイズ
高
低
大
低
Nested 入れ子でExpanded よく書く感じのCompact 1行スタイルCompressed 改行スペース削除
可読性 ファイルサイズ
高
低
大
低
Nested 入れ子でExpanded よく書く感じのCompact 1行スタイルCompressed 改行スペース削除
可読性 ファイルサイズ
高
低
大
低
作業中
リリース時
Images Folder画像フォルダー(Sprite時)
Output Style書き出しスタイル
Nested 入れ子でExpanded よく書く感じのCompact 1行スタイルCompressed 改行スペース削除
style.scss
style.scss
style.scss style.css
style.scss style.css
×
site_data
css
_scssstyle.scss
site_data
css
_scssstyle.scss
style.css
site_data
css
_scssstyle.scss
保存
Try! Try!Try!
@Camera Eye Photography (CC BY 2.0)
既存のサイトのコピー
を作って、
その中で実験!
まずは、
SassのあるあるSassのあるある
@erix! (CC BY 2.0)
>>> Change detected at 16:05:43 to: style.scsserror style.scss (Line 6: Undefined mixin 'border-radius'.)overwrite style.css
この前後があやしい
CSS3のベンダープリフィックスには、Compassをインポートします
>>> Change detected at 16:41:11 to: style.scsserror style.scss (Line 4: Invalid CSS after " /zoom": expected /\//, was ":1;")overwrite style.css
この前後があやしい
プロパティの前に「/」があるとエラーを返します
まとめ
最初は難しい
@mikebaird (CC BY 2.0)
慣れたら最強
@mikebaird (CC BY 2.0)
CSSの文法が正しければコンパイルOK
IE用ハックを書き換えるぐらい
既存のCSSをScoutに通してエラーを一つ一つ潰す
Try! Try!Try!
@Camera Eye Photography (CC BY 2.0)
既存のサイトのコピー
を作って、
その中で実験!
まずは、
@owenwbrown (CC BY 2.0)
参考ページ
【Sassを覚えよう!】もくじ的なのと参考リンク - CSS HappyLifehttp://css-happylife.com/archives/2012/0130_0415.php
DreamweaverでSassファイルを編集するには? | Webデザインのタネhttp://oshare.jugem.cc/?eid=795
Recommended