Sass_Grunt/Sass Casual Talks at IPROS

SassMisako Itoi

Let’s

14年1月29日水曜日

自己紹介

•名前：糸井　美紗子

•現在：HTMLコーダー（前職は旅行用品ECサイトのWebデザイナー）

•twitter：@misako826

•IT/Web Meetup!主催やってます..ヾ(ﾟ∀ﾟ*)ﾉ


自己紹介

ここ•名前：糸井　美紗子

•現在：HTMLコーダー（前職は旅行用品ECサイトのWebデザイナー）

•twitter：@misako826

•IT/Web Meetup!主催やってます..ヾ(ﾟ∀ﾟ*)ﾉ


Agenda...

•Sassって何...？

•Sassコーディング


Agenda...

(イプロスでの実例)

•Sassって何...？

•Sassコーディング


さて、


Sassって何？

さて、


Sassって何？


Sassって何？

Syntactically Awesome Style Sheets


Sassって何？

構文に関して、最高にイケてるスタイルシート


Sassって何？

CSSメタ言語


Sassって何？

CSS Preprocessor


Sassって何？

CSSメタ言語...CSS Preprocessor...


(´･ω･`)

大丈夫!!

Sassコーディング！


Sassって何？

言語を定義する為の言語


Sassって何？

言語を定義する為の言語

CSSを定義する為の言語


Sassって何？

CSSを生成する為の言語


Sassって何？

CSSをベースに、機能拡張したもの！


Sassって何？


他にも、、、

http://roole.org/http://pcss.wiq.com.br/

http://cho45.github.io/tasscss/ http://the-echoplex.net/csscrush/

たくさんありますっ！


http://roole.org

http://roole.org

http://pcss.wiq.com.br

http://pcss.wiq.com.br

http://cho45.github.io/tasscss/

http://cho45.github.io/tasscss/

http://the-echoplex.net/csscrush/

http://the-echoplex.net/csscrush/

Sassって何？

CSSを生成する為には変換作業が必要！

Sassなど...↓


Sassって何？

変換=コンパイル

CSSを生成する為には変換作業が必要！

Sassなど...↓


Sassって何？ビルドタスク

CodeKit、LiveReload、Compass.app、SCOUT

grunt、Yeoman、Brunch


Sassって何？

Gruntが主流に...


Sassって何？

後半のセッションをお楽しみに...ヽ(́▽｀)/


Sassって何？


Sassって何？

SassとSCSS14年1月29日水曜日

Sassって何？

.sass,.scss14年1月29日水曜日

Sass

• 通常のCSSの文法とはかけ離れたもの

• HAMLというマークアップ言語から派生したもの

http://sass-lang.com/

Sassって何？


http://haml-lang.com/

http://haml-lang.com/

http://sass-lang.com


SCSS

• CSSと同じような感覚で記述できる。（CSSファイルの拡張子を変えれば、SCSSとして使える！）

http://sass-lang.com/

Sassって何？




ul { margin-bottom: 20px;}

ul li { border: 1px solid #000000; float: left;}

css

<li> <li>

20px

<ul>

Sassって何？


ul margin-bottom: 20px li border: 1px solid #000000 float: left

Sass

<li> <li>

20px

<ul>

Sassって何？


ul{ margin-bottom: 20px; li{ border: 1px solid #000000; float: left; }}

SCSS

<li> <li>

20px

<ul>

Sassって何？


Sassって何？

SCSS記法を前提として話をすすめます

今日は


SCSSコーディング！

LLeett’ss



セレクタのネスト


ul { margin-bottom: 20px;}

ul li { border: 1px solid #000000; float: left;}

css

<li> <li>

20px

<ul>



ul{ margin-bottom: 20px; li{ border: 1px solid #000000; float: left; }}

SCSS

<li> <li>

20px

<ul>




@mediaもネストしちゃおう！

さらに


#main-content { float: left; width: 480px;}

@media screen and (max-width:480px) { #main-content { float: none; width: auto; }}

CSS


#main-content { float: left; width: 480px; @media screen and (max-width:480px){ float: none; width: auto; }}

SCSS


ニャー

すごーい！14年1月29日水曜日


CSSネスト深過ぎ問題

ただし


SCSSbody{ .wrapper{ .main-content{ section{ ul{ margin-bottom: 20px; li{ display: inline-block; a{ img{ border: 1px solid #1111cc; } } } } } } }}


body .wrapper .main-content section ul{ margin-bottom: 20px;}

body .wrapper .main-content section ul li{ display: inline-block;}

body .wrapper .main-content section ul li a img{ border: 1px solid #1111cc;}

CSS


ファイルサイズが大きくなってしまう




CSS高速化の妨げに...

さらに、



CSS処理の中で、一番時間がかかるのが、子孫セレクタの処理



CSSネスト深過ぎ問題要注意です！

だから......


プロパティのネスト


NNeexxtt......


.main{ margin: 0 { left: 10px; right: 10px; bottom: 20px; }}

SCSSSassコーディング！


.main{ margin: 0 { left: 10px; right: 10px; bottom: 20px; }}

SCSS.main{ margin: 0 ; margin-left: 10px; margin-right: 10px; margin-bottom: 20px;}

CSS

main

20px

10px 10px



CSSSassコーディング！

.box{ z-index:1000;}


.box{ z-index:1000;}

CSS.box{ z:{ index: 1000; }}



ニャー

素敵！14年1月29日水曜日


アンパサンド



アンパサンド

＆


ul { width: 460px;}ul li { float: left; margin-right: 20px; width: 200px;}ul li:last-child { float: left; margin-right: 0; width: 200px;}

CSS


ul { width: 460px; li { float: left; margin-right: 20px; width: 200px; &:last-child { float: left; margin-right: 0; width: 200px; } }}

SCSS



アンパサンドを使わなかったら

もし


ul { width: 460px; li { float: left; margin-right: 20px; width: 200px; } li:last-child { float: left; margin-right: 0; width: 200px; }}

SCSS



複数人での作業やあとで修正する時、やりづらい



#main { #one-column & { width: 970px; } #two-column & { width: 670px; }}



#side { width: 300px; div { margin-bottom: 20px; #two-column & { margin-bottom: 0; } }}


ニャー



変数



何度も登場する...リンクカラーやコーポレートカラー...


a { color: #1122cc;}

.btn { background-color: #1122cc;}

.box { border:1px solid #1122cc;}

CSS



もし、こんなこと言われたら...


変えたい！色、


あ″ー、もうっ！！


(´･ω･`)


奥さん......


(´･ω･`)


変数......


$link-color: #1122cc;

a { color: $link-color;}.btn { background-color: $link-color;}.box { border:1px solid $link-color;}

SCSS


ニャー


@extendと@mixin



.box{ margin: 0; float:left; width: 180px;}

指定したセレクタのスタイルを継承することができる機能

box

180px

Sassコーディング！@@eexxtteenndd


.box-type-a{ @extend .box; color: #ffffff;}


.box{ margin: 0; float:left; width: 180px;}


compile

.box,.box-type-a{ margin: 0; float:left; width: 180px;}

.box-type-a { color: #ffffff;}



.box-type-b{ @extend .box; color:#aaaaaa;}

SCSS

さらに、.box-type-bを追加した場合。


.box-type-a{ @extend .box; color: #ffffff;}


compile

.box,.box-type-a,.box-type-b{ margin: 0; float:left; width: 180px;}


.box-type-b { color: #aaaaaa;}



@mixin box{ margin: 0; float:left; width: 180px;}

スタイルの集まりを定義しておき、それを他の場所で呼び出して使うことができるもの。

Sassコーディング！@@mmiixxiinn



.box-type-a{ @include box; color: #ffffff;}

@mixin box{ margin: 0; float:left; width: 180px;}


compile

.box-type-a{ margin: 0; float:left; width: 180px; color:#ffffff;}

Sassコーディング！@mixin


.box-type-b{ @include box; color:#aaaaaa;}

さらに、.box-type-bを追加した場合。


.box-type-a{ @include box; color: #ffffff;}

SCSS


compile.box-type-a{ margin: 0; float:left; width: 180px; color:#ffffff;}.box-type-b{ margin: 0; float:left; width: 180px; color:#bbbbbb;}



@extend @mixin似てる (*´・д・)(・д・`*)ﾈｰ.



コンパイル後の結果が違います



.box,.box-type-a{ margin: 0; float:left; width: 180px;}


@extend.box-type-a{ margin: 0; float:left; width: 180px; color:#ffffff;}

@mixinSassコーディング！


clearfix

Sassコーディング！よく使う......



@extendを使いたいが、継承元のセレクタがコンパイル後のCSSに

生成されて欲しくないなぁ...


プレースホルダセレクタ


%%


%clearfix { zoom: 1; &:after { content: “”; display: table; clear: both; }}

Sassコーディング！clearfix


ul { @extend %clearfix; li { float: left; }}

%clearfix { zoom: 1; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }}

SCSS


超・便利 @extend...



最強 @extend...



@mixin、いらないじゃん...


((´•･ω•･``))

いやいや、@mixinだっていいトコありますヨ！



引数が使える！


例えば......


@mixin rounded($radius: 6px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}

#box-type-a { @include rounded(); }#box-type-b { @include rounded(10px); }



#box-type-a { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}

#box-type-b { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

@mixincompile



@mixin font-style($font-size,$color,$mb){ font-size: $font-size + px; color: $color; margin-bottom: $mb + px;}

p{ @include font-style(20,#1122cc,10);}



p { font-size: 20px; color: #1122cc; margin-bottom: 10px;}


compile


@mixin positionA($top,$right,$bottom,$left){ position: absolute; top: $top + px; right: $right + px; bottom: $bottom + px; left: $left + px;}p{ @include positionA(10,20,0,0);}



p { position: absolute; top: 10px; right: 20px; bottom: 0px; left: 0px;}


compile


@extendにも落とし穴が...


それに......



.box { margin: 0; float:left; width: 180px;}

@media screen and (max-width: 600px) { @extend .box;}



@media screen and (max-width: 600px) { .box { margin: 0; float:left; width: 180px; }}

期待されるコンパイル結果


Sassコーディング！実際は...


Sassコーディング！実際は...

Syntax error:



@mediaの中でも、使える！

@@mmiixxiinnは......



@mixin box { margin: 0; float:left; width: 180px;}

@media screen and (max-width: 600px) { @include box;}



@media screen and (max-width: 600px) { margin: 0; float:left; width: 180px;}

compile



@mixin + @content

さらに......


@mixin sp-tate { @media all and (orientation: portrait) { @content; }}

@main-content { @include sp-tate { color: #333333; }}



@main-content { @media all and (orientation: portrait) { color: #333333; }}

Sassコーディング！CSS


@mixin sp-tate { @media all and (orientation: portrait) { @content; }}

@main-content { @include sp-tate { color: #333333; }}


@mediaの長い記述を繰り返し書かなくてよい！14年1月29日水曜日

Sassコーディング！@mixin sp-tate { @media all and (orientation: portrait) { @content; }}

@mixin sp-yoko { @media all and (orientation: landscape) { @content; }} 複数の@mediaを使う場合でも、わかりやすい名前

にすれば、管理しやすくなる！14年1月29日水曜日

ニャーみんな違ってみんないい！14年1月29日水曜日


@mixin豆知識

ちなみに......



@mixin名で使える文字と使えない文字

豆知識......


Sassコーディング！使える！@mixin tate{}@mixin tate1{}@mixin tate-1{}@mixin tate_1{}@mixin 縦{}@mixin ＴＡＴＥ{}@mixin _tate{}@mixin -tate{}@mixin __tate{}

使えない...@mixin 1tate{}@mixin tate@1{}@mixin --tate{}



制御構文で条件分岐や繰り返しを行う

さて次......



@each

まず......



@each...リストの要素に対して、繰り返し処理を実行する

@@eeaacchh......

@each $変数名 in リスト { 【スタイルなどなど...】}


%icn-common-style { display: block; float: left; text-indent: -10000px; }@each $addCssClassIcn in txt1, txt2, txt3 { .icn-#{$addCssClassIcn}{ @extend %icn-common-style; background-image: url(assets/icn-#{$addCssClassIcn}.png); }}

@@eeaacchh


.icn-txt1, .icn-txt2, .icn-txt3 { display: block; float: left; text-indent: -10000px;}

.icn-txt1 { background-image: url(assets/icn-txt1.png);}.icn-txt2 { background-image: url(assets/icn-txt2.png);}.icn-txt3 { background-image: url(assets/icn-txt3.png);}

compile


ニャー



@if

次に......


@if...「もし～ならば～を実行する」「特定の条件」を元に、後の処理をどうするか決めるもの

@@iiff......

@if 条件A{ 【スタイルなどなど...】}@else if 条件B{ 【スタイルなどなど...】}@else {【スタイルなどなど...】}


@mixin btn-color($color) { @if $color == "orange" { color: #ffffff; background-color: #ff4229; &:hover{ color: #ff4229; background-color: #ffffff; } } @else if $color == "blue" { color: #ffffff; background-color: #4973D2; &:hover{ color: #4973D2; background-color: #ffffff; } }}

.btn-style-a { @include btn-color("orange");}.btn-style-b { @include btn-color("blue");}

@@iiff......


ニャー



@for

次に......


@for...指定した開始の数値から、終了の数値まで、１つずつ増やしながら繰り返して処理される。

@@ffoorr......

@for $変数名 from 開始の数値 through 終了の数値 { 【スタイルなどなど...】}@for $変数名 from 開始の数値 to 終了の数値 { 【スタイルなどなど...】}


@mixin spacing($number) { $type: 'p'; $cssType: 'padding'; @for $i from 1 through 2 { @if $i > 1 { $type: 'm'; $cssType: 'margin'; } .#{$type}t#{$number} { #{$cssType}-top: #{$number}px !important; } .#{$type}r#{$number} { #{$cssType}-right: #{$number}px !important; } .#{$type}b#{$number} { #{$cssType}-bottom: #{$number}px !important; } .#{$type}l#{$number} { #{$cssType}-left: #{$number}px !important; } }}@include spacing(5);@include spacing(10);

条件分岐

繰り返し


.pt5 { padding-top: 5px !important;}.pr5 { padding-right: 5px !important;}...（ごめんなさい、省略します）....mb10 { margin-bottom: 10px !important;}.ml10 { margin-left: 10px !important;}

compile


ニャー



@while

次に......


@while...条件式に当てはまる間、繰り返し処理が行われる。@forより柔軟な繰り返し処理を行う事ができる。

@@wwhhiillee......

@while 繰り返し条件 { 【スタイルなどなど...】繰り返し方指定}


繰り返し

$i: 8;

@while $i <= 30{ .txt#{$i}{ font-size: $i + px!important; } $i: $i+2}


$i: 8;

@while $i <= 30{ .txt#{$i}{ font-size: $i + px!important; } $i: $i+2}

繰り返し


.txt8 { font-size: 8px !important;}.txt10 { font-size: 10px !important;}...（ごめんなさい、省略します）....txt28 { font-size: 28px !important;}.txt30 { font-size: 30px !important;}

compile


ニャー



今、CSSを使っていて、CSSからSassに移行したい

さて......

アナタ(´･ω･`)14年1月29日水曜日


（rubyをインストール）Sassをインストール

まず......



CSSファイルの拡張子を.scssにする！

次に......



ハックで使用している / は取り除く

注意点

× #side_contents { /margin-left: 5px; } IE6,7用○ #side_contents { *margin-left: 5px; } IE6,7用



CUIのビルドタスクを入れるなり、GUIのビルドタスクを入れるなり...後半のセッションをお楽しみに...

あとは......

(´･ω･`)14年1月29日水曜日


Sassってすごーく奥が深いです



習得して、使いこなして、楽しいSassライフを！

ヽ(´▽｀)/14年1月29日水曜日

ちなみに、、、これ、便利でした

・SassOnlineEditorhttp://next-nex.info/service/sass/

・ScssOnlineEditorhttp://next-nex.info/service/scss/

オンラインエディタのご紹介！


http://next-nex.info/service/scss/

http://next-nex.info/service/scss/

Sass

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


Sass_Grunt/Sass Casual Talks at IPROS

Technology

Transcript of Sass_Grunt/Sass Casual Talks at IPROS