ネストを覚えた人のためのSassの便利な使い方
Upcoming SlideShare
Loading in...5
×
 

ネストを覚えた人のためのSassの便利な使い方

on

  • 12,074 views

Sassに少し慣れた人のためのSassの便利な使い方の解説。

Sassに少し慣れた人のためのSassの便利な使い方の解説。

Statistics

Views

Total Views
12,074
Views on SlideShare
10,434
Embed Views
1,640

Actions

Likes
74
Downloads
86
Comments
1

14 Embeds 1,640

http://blog.1dz.jp 546
http://web-mimemo.com 501
http://bikkuri.me 478
http://wd-flat.com 53
https://twitter.com 38
http://tweetedtimes.com 11
http://oshare.jugem.cc 4
https://cybozulive.com 3
http://article.sivacchia 1
https://www.chatwork.com 1
http://localhost 1
http://feedly.com 1
http://mrwmyblog.blog107.fc2.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ネストを覚えた人のためのSassの便利な使い方 ネストを覚えた人のためのSassの便利な使い方 Presentation Transcript

  • ネストを覚えた人のためのSassの便利な使い方 kennymatic (CC BY 2.0)
  • Try! Try!flickrized (CC BY 2.0) Try!
  • Variable CSS SpriteNesting + Mixin Vendor Prefix Extend
  • ネストを覚えた人のためのSassの便利な使い方 kennymatic (CC BY 2.0)
  • 同じ色を何回も書くのが面倒 kennymatic (CC BY 2.0)
  • #AD253A #AD253A #AD253A #AD253A
  • body {    background-color: #AD253A;}#globalHeader {    #gNav {        color: #AD253A;    }}#main #featureList {    a {        h3 {            color: #AD253A;        }    }}
  • Where?コードが長いと「あのカラーコード」が見つけにくい mdanys (CC BY 2.0)
  • いいえ変数を使います
  • $baseColor: #AD253A; 変数を代入body {    background-color: $baseColor; 変数を出力}#globalHeader {    #gNav {        color: $baseColor; 変数を出力    }}#main #featureList {    a {        h3 {            color: $baseColor; 変数を出力        }    }}
  • Variable 変数数字や単位e.g) 10, 10px, 3emカラーコードe.g) #FF0000, #FFFFFF文字列e.g) foo, border$の後ろに変数名で定義
  • $radius: 5px;body {    $radius : 10px;    .box {        width: 100px;        height: 100px;        background-color: #000;        border-radius: $radius; 10px ?    }}.box2 {    $radius: 20px;    width: 100px;    height: 100px;    background-color: #999;    border-radius: $radius; 20px ?}
  • Noteスタイルで代入した変数は外で使えないスタイルの外で代入したもの=グローバル変数グローバル変数と名前に同じものをスタイルの中で代入すると、グローバル変数が上書きされる
  • ご利用は計画的に anakawho (CC BY 2.0)
  • ご利用は計画的にグローバル変数は1ファイルにまとめてインポートグローバル変数とローカル変数は違いが分かりやすくなるように命名変数に依存しすぎない
  • この変数ってセレクタに利用できないの? procsilas (CC BY 2.0)
  • $baseColor: #AD253A;body { さっき    background-color: $baseColor;}#globalHeader {    #gNav {        color: $baseColor;    }}#main #featureList { ココに変数    a {        h3 {            color: $baseColor;        }    }}
  • $course_synbol : "dog";$course_img : "../course/img"; #$course_synbol.box {    background-image: url($course_img/title.png);} もしもし? どこからどこまでが変数なの?
  • >>> Change detected at 22:22:22 to: sample02.scss error _scss/sample02.scss (Line 7: Invalid CSSafter "#": expected id name, was"$course_synbol....")overwrite css/sample02.css
  • Interpolation#{$dog}でハッシュ+波括弧で囲うインターポレーション変数と文字列を組み合わせるとき
  • $course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box {    background-image: url(#{$course_img}/title.png);} もしもし? おk!おk!これならわかるわ!
  • $course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box {    background-image: url(#{$course_img}/title.png);}#dog.box {  background-image: url(../course/img/title.png);}
  • ピクセル計算がめんどくさい
  • 計算できます
  • + → 加算- → 減算 10 % 3 =1* → 乗算 15 % 3 =0/ → 除算% → 剰余算(あまり)
  • ul {    width: 960px - 20px; SPACE    margin: 0 10px;    li {        float: left;        width: ((960px - 20px) - (20px * 2)) / 3;    }}
  • ul {  width: 940px;  margin: 0 10px;}ul li {  float: left;  width: 300px;}
  • 演算子の前後にスペースを入れないと
  • ul {    width: 960px - 20px;    margin: 0 10px;    li {        float: left;        width: ((960px - 20px) - (20px * 2)) / 3;    }}
  • ul {    width: 960px-20px;    margin: 0 10px;    li {        float: left;        width: ((960px-20px)-(20px*2))/3;    }}
  • ul {  width: 960px-20px;  margin: 0 10px;}ul li {  float: left;  width: 960px -20px-40px/3;}
  • 中途半端に計算数式がそのまま出力
  • 変数も計算できます
  • ul {    $column_gutter: 20px;    width: $main-width - 20px;    margin: 0 10px;    li {        float: left;        width: (($main_width - 20px)-($column_gutter * 2))/3; margin-right: $column_gutter;    }}
  • ul {  width: 940px;  margin: 0 10px;}ul li {  float: left;  width: 300px; margin-right: 20px;}
  • 指定した色に微調整がしたい jerine (CC BY 2.0)
  • #AD253A #AD253A #AD253A #AD253A
  • #AD253A ここだけ コントラスト 取って!
  • 本来ならグラフィックソフトでも いいのですが…© Artsem Martysiuk - Fotolia.com
  • $baseColor : #AD253A;body {    background-color: $baseColor;}#gNav {    a {        color: darken($baseColor,20%);    }}
  • darken(color, amount)指定した色を暗くする関数color…カラーコードやカラーコードが入っている変数amount…暗くする度合いcolor: darken($baseColor,20%);
  • $baseColor : #AD253A;body {    background-color: $baseColor;}#gNav {    a {        color: darken($baseColor,20%);    }}
  • body {  background-color: #ad253a;}#gNav a {  color: #59131e;}
  • lighten(color, amout)色を明るくするadjust-hue(color, degree)色相の角度をずらすsaturate(color, amout) / desaturate(color, amout)彩度を上げる・下げるmix(color1, color2)色を合成する。lightenより彩度が下がらないので便利
  • File: SASS_REFERENCEhttp://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
  • Note目視で確認しないと、想像以上に色が変わることがある緑系はまぶしく感じやすい→調整が必要モックで作り忘れてしまった色指定におすすめ
  • ご利用は計画的に anakawho (CC BY 2.0)
  • 同じプロパティを書くのがめんどい np&djjewell (CC BY 2.0)
  • #contents height:0 フ #sub { ッ #main { float:left; タ float:right; } ー } テ キ ス トが入ります。フッター テキストが入ります。
  • .clearfix {    *zoom: 1;}.clearfix:after {    content:"";    clear: both;    display: block;}
  • #contents フ #sub { ッ #main { float:left; タ float:right; } ー } テ キ ス トが入ります。フッター テキストが入ります。
  • #contents.clearfix 見た目に関する名前は #sub { #main { 入れたくない! float:left; float:right; } } フッターテキストが入ります。フッターテキストが入ります。
  • #contents { …(中略)…    *zoom: 1;}.contents:after {    content:"";    clear: both;    display: block;} これで完結?
  • 横並び 横並び in 横並び 横並び in 横並び
  • 横並びその都度clearfixを 横並び in 横並び 書くのは面倒 横並び in 横並び
  • @mixin@include
  • @mixin clearfix { clearfixの中身を定義    *zoom: 1;    &:after {        content:"";        clear: both;        display: block;    }}#contents {    @include clearfix; clearfixを出力    background-color: #AC2539;    // いろんなスタイル}
  • #contents {  *zoom: 1;  background-color: #AC2539;}#contents:after { @mixin clearfix {  content: "";     *zoom: 1;     &:after {  clear: both;         content:"";         clear: both;  display: block;         display: block;     }} } #contents {     @include clearfix;     background-color: #AC2539;     // いろんなスタイル }
  • @mixin @include変数やCSSのプロパティと値をセットにしたものを定義するために使うものセレクタや疑似セレクタも出力定義するとき→@mixin 名前 {};出力するとき→@include 名前;引数でカスタマイズが可能(次回解説)
  • Sass/Compassでよく使うモノが知りたい Walt Stoneburner (CC BY 2.0)
  • 画像系image-width sprite-mapimage-height sprite-positionimage-url sprite-file
  • 256px 256px panda.png.panda {    width: image-width("panda.png"); /* 256px */    height: image-height("panda.png"); /* 256px */    background-image: image-url("panda.png"); /* url(../img/panda.png?1359267669) */} Iconsmaster - http://www.iconsmaster.com/
  • CSS系box-sizing transformopacity transition
  • .box {    @include box-sizing("border-box");    /*    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    */}.box {    @include opacity(0.5);    /*    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);    opacity: 0.5;    */}
  • Compassは@mixinの 塊
  • どうしても分からなかったら、 CSSを書けばいいじゃない 頑張りすぎないこと。
  • 似てるスタイルをスマートにしたい TRÈS BIEN (CC BY 2.0)
  • .clearfix {    *zoom: 1;    &:after {        content:"";        clear: both;        display: block;    }}#contents {    @extend .clearfix; クラスclearfixを拡張    background-color: #AC2539;}
  • .clearfix, #contents {  *zoom: 1;}.clearfix:after, #contents:after {  content: "";  clear: both;  display: block;}#contents {  background-color: #AC2539;}
  • @extendextendしたセレクタを元のセレクタにつなげて記述する.clearfix, #contents定義したセレクタの疑似セレクタや子要素も同じようにつながる.clearfix, #contents { }.clearfix:after, #contents:after { }
  • @extend呼び出したセレクタでは、独自に定義したスタイルだけを記述する#contents {  background-color: #AC2539;}
  • .box1 {    float: left;    width: 300px;    margin: 10px 15px;    padding: 15px;    background-color: #EEEEEE;    box-shadow: 0 1px 4px rgba(0,0,0,.3);    border-radius: 4px;    h1 {        margin-bottom: 15px;        color: $baseColor;        font-size: 25px;        font-weight: bold;    }    p {        color: #444444;        font-size: 13px;    }}
  • .box2 {    @extend .box1;    h1 {        color: #111;    }}.box3 {    @extend .box1;    background-color: $baseColor;    h1 {        color: #FFF;    }    p {        color: #FFF;    }}
  • .box1, .box2, .box3 { …(略)…}.box1 h1, .box2 h1, .box3 h1 {  margin-bottom: 15px;  color: #ac2539;  font-size: 25px;  font-weight: bold;}.box1 p, .box2 p, .box3 p {  color: #444444;  font-size: 13px;}.box2 h1 {  color: #111;}.box3 {  background-color: #ac2539;}.box3 h1 {  color: #FFF;}.box3 p {  color: #FFF;}
  • 基本スタイルから少しズレたものを作るときに便利
  • でも亜種10スタイル となったら…
  • .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9,.box10 {  float: left;  width: 300px;} うわっ… …(略)….box1 h1, .box2 h1, .box3 h1, .box4 h1, .box5 h1, .box6 h1, .box7 私のセレクタh1, .box8 h1, .box9 h1, .box10 h1 {  margin-bottom: 15px; 多すぎ…?  color: #ac2539; …(略)…}.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7p, .box8 p, .box9 p, .box10 p {  color: #444444;  font-size: 13px;}
  • IE 9以下に存在するセレクター数制限にはまったhttp://less.carbonfairy.org/post/18072493708
  • IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。
  • ご利用は計画的に anakawho (CC BY 2.0)
  • @extendの使用条件の考察 深い階層で使 うとセレクタ が極端に長く呼び出すセレクタ 先の例だと#contents なる @include→ネストの階層が浅いもの したら 逆にコードが定義されるセレクタ 先の例だと.clearfix 増える!→プロパティの数が多すぎるときサイト全体でextendする回数とプロパティの数を想定してmixinと使い分けると良さそう
  • まとめ
  • Sass / Compassは便利書いたコードがCSSでどうなっているかパーツを組み上げたら確認
  • 大事なことなので 4回言いました。ご利用は計画的に anakawho (CC BY 2.0)
  • Thank you kennymatic (CC BY 2.0)
  • Sassの勉強に オススメ!
  • Sass入門∼より効率的なCSSコーディング上村光星,富田梓,對馬慶子,山田敬美 著2012年 技術評論社https://gihyo.jp/dp/ebook/2012/978-4-7741-5123-6