More Related Content Similar to ネストを覚えた人のためのSassの便利な使い方 (20) ネストを覚えた人のためのSassの便利な使い方2. Try!
Try!
flickrized (CC BY 2.0)
Try!
3. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
Extend
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
?
}
18. $baseColor: #AD253A;
body { さっき
background-color: $baseColor;
}
#globalHeader {
#gNav {
color: $baseColor;
}
}
#main #featureList {
ココに変数
a {
h3 {
color: $baseColor;
}
}
}
20. >>> Change detected at 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
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);
}
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;
}
}
30. ul {
width: 960px - 20px;
margin: 0 10px;
li {
float: left;
width: ((960px - 20px) - (20px * 2)) / 3;
}
}
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;
}
}
38. #AD253A
#AD253A
#AD253A
#AD253A
50. #contents height:0
フ
#sub { ッ
#main {
float:left; タ float:right;
} ー }
テ
キ
ス
トが入ります。フッター
テキストが入ります。
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 横並び
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;
// いろんなスタイル
}
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/
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;
}
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;
}
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;
}
90. @extendの使用条件の考察 深い階層で使
うとセレクタ
が極端に長く
呼び出すセレクタ 先の例だと#contents なる
@include
→ネストの階層が浅いもの したら
逆にコードが
定義されるセレクタ 先の例だと.clearfix
増える!
→プロパティの数が多すぎるとき
サイト全体でextendする回数とプロパティの数を
想定してmixinと使い分けると良さそう
93. 大事なことなので
4回言いました。
ご利用は計画的に anakawho (CC BY 2.0)