Last active
August 29, 2015 13:56
-
-
Save yangjunjun/9326218 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v0.7.0) | |
// ---- | |
// 1 变量(以$开头) | |
$blue : #1875e7; | |
div { | |
color : $blue; | |
} | |
// 1.1 变量在字符串中#{} | |
$side : left; | |
.rounded { | |
border-#{$side}-radius: 5px; | |
} | |
// 2 计算 | |
$10 : 10px; | |
div{ | |
font-size: $10 *1.2; | |
} | |
// 3.选择器嵌套 | |
div { | |
p{ | |
color: red; | |
} | |
a{ | |
color: #f00; | |
&:hover { | |
color: #ffb3ff; | |
} | |
} | |
} | |
// 4.继承 | |
.class1 { | |
border: 1px solid #ddd; | |
} | |
.class2 { | |
@extend .class1; | |
font-size:120%; | |
} | |
// 5.mixin | |
@mixin left { | |
float: left; | |
margin-left: 10px; | |
} | |
div{ | |
@include left; | |
} | |
// 5.mixin 加参数 | |
@mixin right($value: 10px) { | |
float: right; | |
margin-right: $value; | |
} | |
p { | |
@include right(); | |
} | |
div { | |
@include right(20px); | |
} | |
@mixin border-radius($radius: 10px) { | |
-webkit-border-radius: $radius; | |
-moz-border-radius: $radius; | |
border-radius: $radius; | |
} | |
div{ | |
@include border-radius(5px); | |
} | |
// 6. 条件判断 | |
$a: 0; | |
div{ | |
@if $a > 0 { | |
color: red; | |
} | |
@else { | |
color: blue; | |
} | |
} | |
// 7. 循环 | |
// 7.1 for循环 | |
@for $i from 1 to 10 { | |
.border-#{$i} { | |
border: #{$i}px solid blue; | |
} | |
} | |
// 7.2 while循环 | |
$i: 6; | |
@while $i > 0 { | |
.item-#{$i} { width: 2em * $i; } | |
$i: $i - 2; | |
} | |
// 7.3 each循环 | |
@each $member in a, b, c, d { | |
.#{$member} { | |
background-image: url("/image/#{$member}.jpg"); | |
} | |
// 8. 自定义函数 | |
@function double($n) { | |
@return $n * 2; | |
} | |
#sidebar { | |
width: double(5px); | |
} | |
// 10. Mixin & Placeholder | |
. %center { | |
margin-left: auto; | |
margin-right: auto; | |
display: block; | |
} | |
@mixin skin($color, $size) { | |
@extend %center; | |
background: $color; | |
height: $size; | |
} | |
a { @include skin(pink, 10em) } | |
b { @include skin(blue, 90px) } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div { | |
color: #1875e7; } | |
.rounded { | |
border-left-radius: 5px; } | |
div { | |
font-size: 12px; } | |
div p { | |
color: red; } | |
div a { | |
color: #f00; } | |
div a:hover { | |
color: #ffb3ff; } | |
.class1, .class2 { | |
border: 1px solid #ddd; } | |
.class2 { | |
font-size: 120%; } | |
div { | |
float: left; | |
margin-left: 10px; } | |
p { | |
float: right; | |
margin-right: 10px; } | |
div { | |
float: right; | |
margin-right: 20px; } | |
div { | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; } | |
div { | |
color: blue; } | |
.border-1 { | |
border: 1px solid blue; } | |
.border-2 { | |
border: 2px solid blue; } | |
.border-3 { | |
border: 3px solid blue; } | |
.border-4 { | |
border: 4px solid blue; } | |
.border-5 { | |
border: 5px solid blue; } | |
.border-6 { | |
border: 6px solid blue; } | |
.border-7 { | |
border: 7px solid blue; } | |
.border-8 { | |
border: 8px solid blue; } | |
.border-9 { | |
border: 9px solid blue; } | |
.item-6 { | |
width: 12em; } | |
.item-4 { | |
width: 8em; } | |
.item-2 { | |
width: 4em; } | |
.a { | |
background-image: url("/image/a.jpg"); } | |
.b { | |
background-image: url("/image/b.jpg"); } | |
.c { | |
background-image: url("/image/c.jpg"); } | |
.d { | |
background-image: url("/image/d.jpg"); } | |
#sidebar { | |
width: 10px; } | |
a, b { | |
margin-left: auto; | |
margin-right: auto; | |
display: block; } | |
a { | |
background: pink; | |
height: 10em; } | |
b { | |
background: blue; | |
height: 90px; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment