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の便利な使い方

17,600 views

Published on

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

  • Dating direct: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL MOVIE, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. MOVIE 4K,FHD,HD,480P here { https://tinyurl.com/yybdfxwh }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ネストを覚えた人のためのSassの便利な使い方...
    一から勉強しなきゃむつかしいな〜やっぱ...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ネストを覚えた人のための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

×