Weitere ähnliche Inhalte
Kürzlich hochgeladen (11)
Sass
- 9. セレクタの入れ子
sass css
.parent { .parent {
margin: 10px; margin: 10px;
line-height: 1.4em; line-height: 1.4em;
}
.child {
color: #fff; .parent .child {
} color: #fff;
}t }
- 10. 変数
sass css
$x: 100px;
p {
p { height: 100px;
height: $x; }
}
.variable {
.variable { width: 100px;
width: $x; }
}
- 11. 継承
sass css
.extend { .extend {
color: red; color: red;
margin-top: 10px; margin-top: 10px;
font-size: 1.2em; }
}
h2 {
h2 { color: red;
@extend .extend; margin-top: 10px;
height: 100px; height: 100px;
} }
- 12. 計算 ( 数式 )
sass css
$x: 100px;
.calc { .calc {
height: $x + 150; height: 250px;
} }
- 13. 計算 ( 色 )
sass css
a {
$link-color: #666;
color: #666666;
a { }
color: $link-color;
}
a:hover {
a:hover { color: #cacaca;
color: $link-color + 100;
}
}
a:visited { a:visited {
color: mix($link-color, #ff0000, 30%);
} color: #d11e1e;
}
- 14. 読み込み
sass css
.clearfix {
@import "compass"; overflow: hidden;
*zoom: 1;
.clearfix { }
@include clearfix;
} .kadomaru {
-webkit-border-radius: 50px;
.kadomaru { -moz-border-radius: 50px;
@include border-radius(50px); -ms-border-radius: 50px;
} -o-border-radius: 50px;
border-radius: 50px;
}