Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ネストを覚えた人のための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 {   ...
Where?コードが長いと「あのカラーコード」が見つけにくい              mdanys (CC BY 2.0)
いいえ変数を使います
$baseColor: #AD253A; 変数を代入body {    background-color: $baseColor; 変数を出力}#globalHeader {    #gNav {        color: $baseColo...
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;...
Noteスタイルで代入した変数は外で使えないスタイルの外で代入したもの=グローバル変数グローバル変数と名前に同じものをスタイルの中で代入すると、グローバル変数が上書きされる
ご利用は計画的に   anakawho (CC BY 2.0)
ご利用は計画的にグローバル変数は1ファイルにまとめてインポートグローバル変数とローカル変数は違いが分かりやすくなるように命名変数に依存しすぎない
この変数ってセレクタに利用できないの?           procsilas (CC BY 2.0)
$baseColor: #AD253A;body {                              さっき    background-color: $baseColor;}#globalHeader {    #gNav {   ...
$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 ...
Interpolation#{$dog}でハッシュ+波括弧で囲うインターポレーション変数と文字列を組み合わせるとき
$course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box {    background-image: url(#{$course_img}/tit...
$course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box {    background-image: url(#{$course_img}/tit...
ピクセル計算がめんどくさい
計算できます
+ → 加算- → 減算         10 % 3 =1* → 乗算         15 % 3 =0/ → 除算% → 剰余算(あまり)
ul {    width: 960px - 20px;        SPACE    margin: 0 10px;    li {        float: left;        width: ((960px - 20px) - (...
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)) / ...
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: (...
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)彩度を上げる・下げるm...
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;    タ      ...
.clearfix {    *zoom: 1;}.clearfix:after {    content:"";    clear: both;    display: block;}
#contents                    フ      #sub {        ッ                        #main {      float:left;   タ       float:right;...
#contents.clearfix                     見た目に関する名前は      #sub {           #main {                     入れたくない!      float:lef...
#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 {  *zoom: 1;  background-color: #AC2539;}#contents:after {                          @mixin clearfix {  content: ...
@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 */    heigh...
CSS系box-sizing    transformopacity       transition
.box {    @include box-sizing("border-box");    /*    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    b...
Compassは@mixinの  塊
どうしても分からなかったら、 CSSを書けばいいじゃない        頑張りすぎないこと。
似てるスタイルをスマートにしたい           TRÈS BIEN (CC BY 2.0)
.clearfix {    *zoom: 1;    &:after {        content:"";        clear: both;        display: block;    }}#contents {    @e...
.clearfix, #contents {  *zoom: 1;}.clearfix:after, #contents:after {  content: "";  clear: both;  display: block;}#content...
@extendextendしたセレクタを元のセレクタにつなげて記述する.clearfix, #contents定義したセレクタの疑似セレクタや子要素も同じようにつながる.clearfix, #contents { }.clearfix:afte...
@extend呼び出したセレクタでは、独自に定義したスタイルだけを記述する#contents {  background-color: #AC2539;}
.box1 {    float: left;    width: 300px;    margin: 10px 15px;    padding: 15px;    background-color: #EEEEEE;    box-shad...
.box2 {    @extend .box1;    h1 {        color: #111;    }}.box3 {    @extend .box1;    background-color: $baseColor;    h...
.box1, .box2, .box3 {  …(略)…}.box1 h1, .box2 h1, .box3 h1 {  margin-bottom: 15px;  color: #ac2539;  font-size: 25px;  font...
基本スタイルから少しズレたものを作るときに便利
でも亜種10スタイル となったら…
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9,.box10 {  float: left;  width: 300px;}    うわっ…  …(略)….box1 h...
IE 9以下に存在するセレクター数制限にはまったhttp://less.carbonfairy.org/post/18072493708
IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。
ご利用は計画的に   anakawho (CC BY 2.0)
@extendの使用条件の考察                  深い階層で使                                 うとセレクタ                                 が極端に長く呼び出すセ...
まとめ
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
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Upcoming SlideShare
Loading in …5
×

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

16,757 views

Published on

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

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

  1. 1. ネストを覚えた人のためのSassの便利な使い方 kennymatic (CC BY 2.0)
  2. 2. Try! Try!flickrized (CC BY 2.0) Try!
  3. 3. Variable CSS SpriteNesting + Mixin Vendor Prefix Extend
  4. 4. ネストを覚えた人のためのSassの便利な使い方 kennymatic (CC BY 2.0)
  5. 5. 同じ色を何回も書くのが面倒 kennymatic (CC BY 2.0)
  6. 6. #AD253A #AD253A #AD253A #AD253A
  7. 7. body {    background-color: #AD253A;}#globalHeader {    #gNav {        color: #AD253A;    }}#main #featureList {    a {        h3 {            color: #AD253A;        }    }}
  8. 8. Where?コードが長いと「あのカラーコード」が見つけにくい mdanys (CC BY 2.0)
  9. 9. いいえ変数を使います
  10. 10. $baseColor: #AD253A; 変数を代入body {    background-color: $baseColor; 変数を出力}#globalHeader {    #gNav {        color: $baseColor; 変数を出力    }}#main #featureList {    a {        h3 {            color: $baseColor; 変数を出力        }    }}
  11. 11. Variable 変数数字や単位e.g) 10, 10px, 3emカラーコードe.g) #FF0000, #FFFFFF文字列e.g) foo, border$の後ろに変数名で定義
  12. 12. $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 ?}
  13. 13. Noteスタイルで代入した変数は外で使えないスタイルの外で代入したもの=グローバル変数グローバル変数と名前に同じものをスタイルの中で代入すると、グローバル変数が上書きされる
  14. 14. ご利用は計画的に anakawho (CC BY 2.0)
  15. 15. ご利用は計画的にグローバル変数は1ファイルにまとめてインポートグローバル変数とローカル変数は違いが分かりやすくなるように命名変数に依存しすぎない
  16. 16. この変数ってセレクタに利用できないの? procsilas (CC BY 2.0)
  17. 17. $baseColor: #AD253A;body { さっき    background-color: $baseColor;}#globalHeader {    #gNav {        color: $baseColor;    }}#main #featureList { ココに変数    a {        h3 {            color: $baseColor;        }    }}
  18. 18. $course_synbol : "dog";$course_img : "../course/img"; #$course_synbol.box {    background-image: url($course_img/title.png);} もしもし? どこからどこまでが変数なの?
  19. 19. >>> 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
  20. 20. Interpolation#{$dog}でハッシュ+波括弧で囲うインターポレーション変数と文字列を組み合わせるとき
  21. 21. $course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box {    background-image: url(#{$course_img}/title.png);} もしもし? おk!おk!これならわかるわ!
  22. 22. $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);}
  23. 23. ピクセル計算がめんどくさい
  24. 24. 計算できます
  25. 25. + → 加算- → 減算 10 % 3 =1* → 乗算 15 % 3 =0/ → 除算% → 剰余算(あまり)
  26. 26. ul {    width: 960px - 20px; SPACE    margin: 0 10px;    li {        float: left;        width: ((960px - 20px) - (20px * 2)) / 3;    }}
  27. 27. ul {  width: 940px;  margin: 0 10px;}ul li {  float: left;  width: 300px;}
  28. 28. 演算子の前後にスペースを入れないと
  29. 29. ul {    width: 960px - 20px;    margin: 0 10px;    li {        float: left;        width: ((960px - 20px) - (20px * 2)) / 3;    }}
  30. 30. ul {    width: 960px-20px;    margin: 0 10px;    li {        float: left;        width: ((960px-20px)-(20px*2))/3;    }}
  31. 31. ul {  width: 960px-20px;  margin: 0 10px;}ul li {  float: left;  width: 960px -20px-40px/3;}
  32. 32. 中途半端に計算数式がそのまま出力
  33. 33. 変数も計算できます
  34. 34. 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;    }}
  35. 35. ul {  width: 940px;  margin: 0 10px;}ul li {  float: left;  width: 300px; margin-right: 20px;}
  36. 36. 指定した色に微調整がしたい jerine (CC BY 2.0)
  37. 37. #AD253A #AD253A #AD253A #AD253A
  38. 38. #AD253A ここだけ コントラスト 取って!
  39. 39. 本来ならグラフィックソフトでも いいのですが…© Artsem Martysiuk - Fotolia.com
  40. 40. $baseColor : #AD253A;body {    background-color: $baseColor;}#gNav {    a {        color: darken($baseColor,20%);    }}
  41. 41. darken(color, amount)指定した色を暗くする関数color…カラーコードやカラーコードが入っている変数amount…暗くする度合いcolor: darken($baseColor,20%);
  42. 42. $baseColor : #AD253A;body {    background-color: $baseColor;}#gNav {    a {        color: darken($baseColor,20%);    }}
  43. 43. body {  background-color: #ad253a;}#gNav a {  color: #59131e;}
  44. 44. lighten(color, amout)色を明るくするadjust-hue(color, degree)色相の角度をずらすsaturate(color, amout) / desaturate(color, amout)彩度を上げる・下げるmix(color1, color2)色を合成する。lightenより彩度が下がらないので便利
  45. 45. File: SASS_REFERENCEhttp://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
  46. 46. Note目視で確認しないと、想像以上に色が変わることがある緑系はまぶしく感じやすい→調整が必要モックで作り忘れてしまった色指定におすすめ
  47. 47. ご利用は計画的に anakawho (CC BY 2.0)
  48. 48. 同じプロパティを書くのがめんどい np&djjewell (CC BY 2.0)
  49. 49. #contents height:0 フ #sub { ッ #main { float:left; タ float:right; } ー } テ キ ス トが入ります。フッター テキストが入ります。
  50. 50. .clearfix {    *zoom: 1;}.clearfix:after {    content:"";    clear: both;    display: block;}
  51. 51. #contents フ #sub { ッ #main { float:left; タ float:right; } ー } テ キ ス トが入ります。フッター テキストが入ります。
  52. 52. #contents.clearfix 見た目に関する名前は #sub { #main { 入れたくない! float:left; float:right; } } フッターテキストが入ります。フッターテキストが入ります。
  53. 53. #contents { …(中略)…    *zoom: 1;}.contents:after {    content:"";    clear: both;    display: block;} これで完結?
  54. 54. 横並び 横並び in 横並び 横並び in 横並び
  55. 55. 横並びその都度clearfixを 横並び in 横並び 書くのは面倒 横並び in 横並び
  56. 56. @mixin@include
  57. 57. @mixin clearfix { clearfixの中身を定義    *zoom: 1;    &:after {        content:"";        clear: both;        display: block;    }}#contents {    @include clearfix; clearfixを出力    background-color: #AC2539;    // いろんなスタイル}
  58. 58. #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;     // いろんなスタイル }
  59. 59. @mixin @include変数やCSSのプロパティと値をセットにしたものを定義するために使うものセレクタや疑似セレクタも出力定義するとき→@mixin 名前 {};出力するとき→@include 名前;引数でカスタマイズが可能(次回解説)
  60. 60. Sass/Compassでよく使うモノが知りたい Walt Stoneburner (CC BY 2.0)
  61. 61. 画像系image-width sprite-mapimage-height sprite-positionimage-url sprite-file
  62. 62. 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/
  63. 63. CSS系box-sizing transformopacity transition
  64. 64. .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;    */}
  65. 65. Compassは@mixinの 塊
  66. 66. どうしても分からなかったら、 CSSを書けばいいじゃない 頑張りすぎないこと。
  67. 67. 似てるスタイルをスマートにしたい TRÈS BIEN (CC BY 2.0)
  68. 68. .clearfix {    *zoom: 1;    &:after {        content:"";        clear: both;        display: block;    }}#contents {    @extend .clearfix; クラスclearfixを拡張    background-color: #AC2539;}
  69. 69. .clearfix, #contents {  *zoom: 1;}.clearfix:after, #contents:after {  content: "";  clear: both;  display: block;}#contents {  background-color: #AC2539;}
  70. 70. @extendextendしたセレクタを元のセレクタにつなげて記述する.clearfix, #contents定義したセレクタの疑似セレクタや子要素も同じようにつながる.clearfix, #contents { }.clearfix:after, #contents:after { }
  71. 71. @extend呼び出したセレクタでは、独自に定義したスタイルだけを記述する#contents {  background-color: #AC2539;}
  72. 72. .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;    }}
  73. 73. .box2 {    @extend .box1;    h1 {        color: #111;    }}.box3 {    @extend .box1;    background-color: $baseColor;    h1 {        color: #FFF;    }    p {        color: #FFF;    }}
  74. 74. .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;}
  75. 75. 基本スタイルから少しズレたものを作るときに便利
  76. 76. でも亜種10スタイル となったら…
  77. 77. .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;}
  78. 78. IE 9以下に存在するセレクター数制限にはまったhttp://less.carbonfairy.org/post/18072493708
  79. 79. IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。
  80. 80. ご利用は計画的に anakawho (CC BY 2.0)
  81. 81. @extendの使用条件の考察 深い階層で使 うとセレクタ が極端に長く呼び出すセレクタ 先の例だと#contents なる @include→ネストの階層が浅いもの したら 逆にコードが定義されるセレクタ 先の例だと.clearfix 増える!→プロパティの数が多すぎるときサイト全体でextendする回数とプロパティの数を想定してmixinと使い分けると良さそう
  82. 82. まとめ
  83. 83. Sass / Compassは便利書いたコードがCSSでどうなっているかパーツを組み上げたら確認
  84. 84. 大事なことなので 4回言いました。ご利用は計画的に anakawho (CC BY 2.0)
  85. 85. Thank you kennymatic (CC BY 2.0)
  86. 86. Sassの勉強に オススメ!
  87. 87. Sass入門∼より効率的なCSSコーディング上村光星,富田梓,對馬慶子,山田敬美 著2012年 技術評論社https://gihyo.jp/dp/ebook/2012/978-4-7741-5123-6

×