Sassのサンプルコード
- Category
- CSS
- Bookmark
使いまわしそうなSassのコードをメモっておいたら、(自分が)便利かなあとか思ったので載せておくテスト。
// ===============================
// Variables
// ===============================
$red: #f00;
$blue: blue;
// ===============================
// Mixins (Include)
// ===============================
@mixin link {
color: #00f;
}
@mixin link_h {
color: #fff;
background: #00f;
}
@mixin link_v {
color: #600;
}
@mixin min-height($px) {
min-height: $px;
height: auto!important;
height: $px;
}
@mixin inline-block {
display: inline-block;
#display: inline;
#zoom: 1;
}
@mixin position_Pattern($min, $padding, $top, $left, $width, $margin) {
li {
position: relative;
@include min-height($min);
padding: $padding;
img {
position: absolute;
top: $top;
left: $left;
width: $width;
}
p {
margin: $margin;
}
}
}
@mixin radius($px) {
-moz-border-radius: $px;
-webkit-border-radius: $px;
-border-radius: $px;
}
@mixin gradient($color1, $position1, $color2, $position2, $color3, $position3) {
background: -moz-linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
background: -webkit-gradient(linear, left top, left bottom, color-stop($position1, $color1), color-stop($position2, $color2), color-stop($position3, $color3));
background: linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
background-color: #777;
}
/* ===============================
Selector Inheritance (extend)
=============================== */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
#zoom: 1;
}
/* ===============================
Test
=============================== */
a {
@include link;
}
a:visited {
@include link_v;
}
a:hover {
@include link_h;
}
div {
@include inline-block;
@include min-height(100px);
@include radius(10px);
@extend .clearfix;
@include gradient(#777, 0%, #555, 50%, #222, 100%);
}
@include position_Pattern(40px, 10px, 10px, 10px, 60px, 0 0 0 70px);
/* ===============================
Nesting
=============================== */
html {
background: $red;
body {
background: $blue;
}
}
gradient とか、逆に面倒になってる気がしないでもない。 radius・clearfix・min-heightとかは便利そう。