Download as PDF, PPTX
ネストを覚えた人のためのSassの便利な使い方
- 1. ネストを覚えた人のための Sassの 便利な使い方 kennymatic (CC BY 2.0)
- 2. Try! Try! flickrized (CC BY 2.0) Try!
- 3. Variable CSS Sprite Nesting + Mixin Vendor Prefix Extend
- 4. ネストを覚えた人のための Sassの 便利な使い方 kennymatic (CC BY 2.0)
- 5. 同じ色を何回も 書くのが面倒 kennymatic (CC BY 2.0)
- 7. #AD253A #AD253A #AD253A #AD253A
- 8. body { background-color: #AD253A; } #globalHeader{ #gNav { color: #AD253A; } } #main #featureList { a { h3 { color: #AD253A; } } }
- 9. Where? コードが長いと 「あのカラーコード」が見つけにくい mdanys (CC BY 2.0)
- 10.
- 11. $baseColor: #AD253A; 変数を代入 body{ background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
- 12. Variable 変数 数字や単位 e.g) 10, 10px, 3em カラーコード e.g) #FF0000, #FFFFFF 文字列 e.g) foo, border $の後ろに変数名で定義
- 13. $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 ？ }
- 14.
- 15. ご利用は計画的に anakawho (CC BY 2.0)
- 16.
- 17. この変数ってセレクタに 利用できないの？ procsilas (CC BY 2.0)
- 18. $baseColor: #AD253A; body { さっき background-color: $baseColor; } #globalHeader { #gNav { color: $baseColor; } } #main #featureList { ココに変数 a { h3 { color: $baseColor; } } }
- 19. $course_synbol : "dog"; $course_img: "../course/img"; #$course_synbol.box { background-image: url($course_img/title.png); } もしもし？ どこからどこまでが変数なの？
- 20. >>> Change detectedat 22:22:22 to: sample02.scss error _scss/sample02.scss (Line 7: Invalid CSS after "#": expected id name, was "$course_synbol....") overwrite css/sample02.css
- 21.
- 22. $course_synbol : "dog"; $course_img: "../course/img"; ##{$course_synbol}.box { background-image: url(#{$course_img}/title.png); } もしもし？ おｋ！おｋ！これならわかるわ！
- 23. $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); }
- 24.
- 25.
- 26. + → 加算 -→ 減算 10 % 3 =1 * → 乗算 15 % 3 =0 / → 除算 % → 剰余算（あまり）
- 27. ul { width: 960px- 20px; SPACE margin: 0 10px; li { float: left; width: ((960px - 20px) - (20px * 2)) / 3; } }
- 28. ul { width: 940px; margin:0 10px; } ul li { float: left; width: 300px; }
- 29.
- 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; li { float: left; width: ((960px-20px)-(20px*2))/3; } }
- 32. ul { width: 960px-20px; margin:0 10px; } ul li { float: left; width: 960px -20px-40px/3; }
- 33.
- 34.
- 35. 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; } }
- 36. ul { width: 940px; margin:0 10px; } ul li { float: left; width: 300px; margin-right: 20px; }
- 37. 指定した色に 微調整がしたい jerine (CC BY 2.0)
- 38. #AD253A #AD253A #AD253A #AD253A
- 39. #AD253A ここだけ コントラスト 取って！
- 40. 本来なら グラフィックソフトでも いいのですが…©Artsem Martysiuk - Fotolia.com
- 41. $baseColor : #AD253A; body{ background-color: $baseColor; } #gNav { a { color: darken($baseColor,20%); } }
- 42.
- 43. $baseColor : #AD253A; body{ background-color: $baseColor; } #gNav { a { color: darken($baseColor,20%); } }
- 44. body { background-color: #ad253a; } #gNava { color: #59131e; }
- 45. lighten(color, amout) 色を明るくする adjust-hue(color, degree) 色相の角度をずらす saturate(color,amout) / desaturate(color, amout) 彩度を上げる・下げる mix(color1, color2) 色を合成する。 lightenより彩度が下がらないので便利
- 46.
- 47.
- 48. ご利用は計画的に anakawho (CC BY 2.0)
- 49. 同じプロパティを 書くのがめんどい np&djjewell (CC BY 2.0)
- 50. #contents height:0 フ #sub { ッ #main { float:left; タ float:right; } ー } テ キ ス トが入ります。フッター テキストが入ります。
- 51. .clearfix { *zoom: 1; } .clearfix:after{ content:""; clear: both; display: block; }
- 52. #contents フ #sub { ッ #main { float:left; タ float:right; } ー } テ キ ス トが入ります。フッター テキストが入ります。
- 53. #contents.clearfix 見た目に関する名前は #sub { #main { 入れたくない！ float:left; float:right; } } フッターテキストが入ります。フッターテキストが入ります。
- 54. #contents { …（中略）… *zoom: 1; } .contents:after { content:""; clear: both; display: block; } これで完結？
- 55. 横並び 横並び in 横並び 横並び in 横並び
- 56. 横並び その都度clearfixを 横並び in 横並び 書くのは面倒 横並び in 横並び
- 57.
- 58. @mixin clearfix { clearfixの中身を定義 *zoom: 1; &:after { content:""; clear: both; display: block; } } #contents { @include clearfix; clearfixを出力 background-color: #AC2539; // いろんなスタイル }
- 59. #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; // いろんなスタイル }
- 60. @mixin @include 変数やCSSのプロパティと値をセットに したものを定義するために使うもの セレクタや疑似セレクタも出力 定義するとき→@mixin 名前{}; 出力するとき→@include 名前; 引数でカスタマイズが可能（次回解説）
- 61. Sass/Compassで よく使うモノが 知りたい Walt Stoneburner (CC BY 2.0)
- 62. 画像系 image-width sprite-map image-height sprite-position image-url sprite-file
- 63. 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/
- 64. CSS系 box-sizing transform opacity transition
- 65. .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; */ }
- 66.
- 74. どうしても分からなかったら、 CSSを書けばいいじゃない 頑張りすぎないこと。
- 75. 似てるスタイルを スマートにしたい TRÈS BIEN (CC BY 2.0)
- 76. .clearfix { *zoom: 1; &:after{ content:""; clear: both; display: block; } } #contents { @extend .clearfix; クラスclearfixを拡張 background-color: #AC2539; }
- 77. .clearfix, #contents { *zoom:1; } .clearfix:after, #contents:after { content: ""; clear: both; display: block; } #contents { background-color: #AC2539; }
- 78. @extend extendしたセレクタを元のセレクタに つなげて記述する .clearfix, #contents 定義したセレクタの疑似セレクタや子要素も 同じようにつながる .clearfix, #contents{ } .clearfix:after, #contents:after { }
- 79.
- 81. .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; } }
- 82. .box2 { @extend .box1; h1{ color: #111; } } .box3 { @extend .box1; background-color: $baseColor; h1 { color: #FFF; } p { color: #FFF; } }
- 83. .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; }
- 84.
- 85.
- 86. .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, .box7 p, .box8 p, .box9 p, .box10 p { color: #444444; font-size: 13px; }
- 87.
- 88.
- 89. ご利用は計画的に anakawho (CC BY 2.0)
- 90. @extendの使用条件の考察 深い階層で使 うとセレクタ が極端に長く 呼び出すセレクタ 先の例だと#contents なる @include →ネストの階層が浅いもの したら 逆にコードが 定義されるセレクタ 先の例だと.clearfix 増える！ →プロパティの数が多すぎるとき サイト全体でextendする回数とプロパティの数を 想定してmixinと使い分けると良さそう
- 91.
- 92.
- 93. 大事なことなので 4回言いました。 ご利用は計画的に anakawho (CC BY 2.0)
- 94. Thank you kennymatic (CC BY 2.0)
- 95.
- 96.