Sassを導入したはなし

Sassを導入したはなし
14年3月18日火曜日

浅岡敦子 (あさおかあつこ)
フロントエンドエンジニア
atsuko.a.02
甘党・猫派

巷ではSassが流行っているらしい
コーディングが
早くなるらしい
新しくて
かっこいいらしい

アライドで導入・運用してみました

導入する際の参考になれば幸いです

もくじ
導入の経緯
使ってみた
社内に布教する
こんなときどうする？
まとめ

導入の経緯
使ってみた
社内に布教する
こんなときどうする？
まとめ

コーディング環境

オレオレコーディング
開発速度が遅い
HTML5? CSS3?
リソース不足

コーディングルール策定
CSSプリプロセッサの導入
セマンティックWEB
技術の底上げ・一定化

CSSプリプロセッサ？

CSSを書くための言語
（CSSメタ言語）

メタファイル .css
大いなる力

コーディングルール策定
Sassの導入
セマンティックWEB
技術の底上げ・一定化

というわけで、
Sassを導入しました

CSSプリプロセッサ
Rubyが必要
.scss（.sass）

SASS記法
.sass
文法が特殊
※.cssとの互換性なし
SCSS記法
.scss
.cssとの互換性あり
最近はsass＝SCSS記法が一般的

test.scss test.css
大いなるRubyの力
sass test.scss:test.css
黒い画面 or GUI app

Why Sass?

ドキュメントが豊富
記法が柔軟
compass

※あくまでも目的の為のツール

全員がゼロスタートの場合、一斉は難しい

「ひとまず使ってみて、教えてね」

少人数（ないし1人）で始める
↓
共有・伝達
↓
標準化

基本機能

ネストと親の参照

section {
padding: 20px;
background: #f0f0f0;
.hoge {
width: 50%;
margin: auto;
}
&.fuga {
border: 1px solid #333;
}
}
.scss

section {
padding: 20px;
.hoge {
width: 50%;
margin: auto;
}
&.fuga {
}
}
.scss
入れ子になってる

section {
padding: 20px;
.hoge {
width: 50%;
margin: auto;
}
&.fuga {
}
}
.scss
親（section）を参照してる

section {
padding: 20px;
}
section .hoge {
width: 50%;
margin: auto;
}
section.fuga {
}
.css

たくさんネストする

section {
padding: 20px;
.hoge {
width: 50%;
margin: auto;
.fuga {
}
}
}
.scss

section {
padding: 20px;
}
section .hoge {
width: 50%;
margin: auto;
}
section .hoge .fuga {
}
.css
セレクタが
どんどん増える

ex) HTMLが修正になったよ！

article {
padding: 20px;
.hoge {
width: 50%;
margin: auto;
.fuga {
}
}
}
.scss

article {
padding: 20px;
}
article .hoge {
width: 50%;
margin: auto;
}
article .hoge .fuga {
}
.css
修正が簡単

変数

$color: #11114c;
a {
color: $color;
}
.hoge {
border: 1px solid $color;
}
.scss

$color: #11114c;
a {
color: $color;
}
.hoge {
border: 1px solid $color;
}
.scss
変数の定義
変数の呼び出し

a {
color: #11114c;
}
.hoge {
border: 1px solid #11114c;
}
.css

Number
Color
String
Boolean
List
Null
Map
NEW!!
3.3.0

演算

.hoge {
width: 500px + 20;
}
.fuga {
width: 500px - 20;
}
.piyo {
width: 500px * 2;
}
.foo {
width: (500px / 10);
}
.scss

.hoge {
width: 520px;
}
.fuga {
width: 480px;
}
.piyo {
width: 1000px;
}
.foo {
width: 50px;
}
.css

@import

style.scss style.css
_style.scss 生成されない

_base.scss
_parts.scss
_mixin.scss
まとまる！

@import '_base';
@import '_parts';
.scss

@mixin

スタイルのまとまりを呼び出す

@mixin btnSet1 {
display: block;
border: 1px solid #FFF;
border-radius: 10px;
background: #333;
text-align: center;
}
.btn1 {
@include btnSet1;
}
.scss

@mixin btnSet1 {
display: block;
background: #333;
text-align: center;
}
.btn1 {
@include btnSet1;
}
スタイルのまとまり
呼び出す
.scss

.btn1 {
display: block;
background: #333;
text-align: center;
}
.css

引数をわたせるよ

@mixin btnSet1($mainC, $borderC) {
display: block;
border: 1px solid $borderC;
background: $mainC;
text-align: center;
}
.btn1 {
@include btnSet1(#333, #FFF);
}
引数をわたせる
.scss

ex) 色違いのボタンがたくさんほしい

Facebook twitter
形は同じ

@mixin btnBase ($mainC, $borderC) {
// button base style
}
.btnFacebook {
@include btnBase(#3b5998, #133783);
}
.btnTwitter {
@include btnBase(#55acee, #2972ba);
}
.scss

@extend

スタイルを継承する

// clearﬁx
.cf:after {
display: block;
clear: both;
content: "";
}
article {
@extend .cf;
}
.scss

// clearﬁx
.cf:after {
display: block;
clear: both;
content: "";
}
article {
@extend .cf;
}
定義されたスタイル
スタイルを継承
.scss

// clearﬁx
.cf:after, article:after {
display: block;
clear: both;
content: "";
}
article {
}
.css

継承元が.cssとして吐き出される

吐き出したくないときは？

%contBase {
// contents base style
}
.hoge {
@extend %contBase;
border: 1px solid #f0f0f0;
}
.fuga {
@extend %contBase;
border: 2px dashed #f0f0f0;
}
.scss

%contBase {
}
.hoge {
@extend %contBase;
}
.fuga {
@extend %contBase;
}
.scssプレースホルダー

.hoge, .fuga {
}
.hoge {
}
.fuga {
}
.css
%contBaseは
吐き出されない

@mixinと@extendの違い

@mixin
呼び出し先でスタイルが展開される
引数がわたせる
@extend 継承元にセレクタが追加される

その他便利っぽいこと

@for
@while
@if
@each
@function
その他デフォルト関数
とか

3週間くらい使う（中規模開発2つくらい）
↓
FE向けに社内勉強会で共有
↓
FE陣Sass導入完了・ルール策定中
全工程1ヶ月半くらい
イマココ

開発環境

Sublime Text 2
Editor
Prepros
Preprocessor

Emmet Zen-codingの後続
hayaku CSSの補完に特化
SCSS scssファイルを認識してくれる
CSScomb CSSのプロパティを並び替える
HTML5 HTML5ファイルを認識してくれる
Tag HTMLタグの自動補完強化
AutoFileName ファイル参照を自動補完

よかったこと :)

開発速度の向上
使い回しがしやすい
私比1.4倍
mixin集

困ったこと :(

柔軟ゆえ多少ハードルが高い
for/while...

Sassが使えない人と
共同開発するときは？

編集用のCSSSassから生成したCSS

編集用のCSSSassから生成したCSS
作業用のファイルを分けて
Sassファイルの内容を保持する

Sassが使える人と
共同開発するときは？

_asaoka.scss
_suzuki.scss
_sato.scss

_asaoka.scss
_suzuki.scss
_sato.scss
ページ（機能）or 作業者毎に
ファイルを分ける

既存で運用しているものにも適用したい

SASS記法
.sass
文法が特殊
※.cssとの互換性なし
SCSS記法
.scss
.cssとの互換性あり

既存のCSSファイル拡張子を.scssに変更
↓
リファクタリングとか（しなくても可）
↓
コンパイル

入れ子・@extendでセレクタが
大変なことになる

ex) clearﬁxを@extendで使うと...

.cf:after, article:after, .pager1:after, .pager1 ul:after,
header .company:after, .gnavi nav ul:after, .contBoxMain-tw
footer ul:after, .contBoxSide-snsList li a:after, .modalInner-
large > header:after, .modalInner-large .modalInner-
cont:after, .editHead > .wrap:after, .editHead >
article:after, .editHead > footer:after,
header .account .editHead > ul:after, header .editHead
> .company:after, .editHead .otherLink:after, .editMenu
ul:after, .editSNS ul:after, .editContents
ul:after, .editAccount:after, .editPostList
li:after, .editMenuList li:after, .editMenuList
dl:after, .addPanel ul:after {
display: block;
clear: both;
content: "";
}

@extendは元のスタイルの継承
↓
継承元スタイルのセレクタが増える

display: block;
clear: both;
content: "";
}
可読性が下がる
IE9以下では1ファイルにつき
4095個までしかセレクタを認識しない

display: block;
clear: both;
content: "";
}
入れ子の階層上限を決める
コメントを入れる
吐き出すcssをわける

@extendを多用すると
clearﬁx等がHTML側で明示的にならない

.hoge {
@extend .cf;
...
}
.fuga {
@extend .cf;
...
}
.piyo {
@extend .cf;
...
}

.hoge {
@extend .cf;
...
}
.fuga {
@extend .cf;
...
}
.piyo {
@extend .cf;
...
}
HTML側からclearﬁxを
使っていることがわからない

そもそもHTML側から
CSSの内容が理解できるメリットってある？

修正・改修の際にはCSSも確実に開く
↓
HTML側が明示的になる必要はない

.hoge {
@extend .cf;
...
}
.fuga {
@extend .cf;
...
}
.piyo {
@extend .cf;
...
}
CSS側からclearﬁxを
使っていることがわかりやすい

Sassで
コーディングは早くなる?
結局

あくまでも目的の為のツール
開発速度
の向上

CSSプリプロセッサで
コーディングは早くなる?

ちょっと早くなる
運用がしやすくなる

まずは開発環境を見直しましょう
話はそれから
エディタ/ルール/
椅子の座り心地...etc

Thanks!

Sassを導入したはなし

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

Empfohlen

Empfohlen (20)

Sassを導入したはなし