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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

13,170

Published on

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

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

1 Comment
76 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,170
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
92
Comments
1
Likes
76
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×