变量声明 $color:#FFFFFF;
$fancybox-width: 400px !default;
嵌套
#id {
h1{color:#000000;}
.red{background: #8F8F94;font-size: 14px;}
}
#id h1{color:#000}
#id .red{background:#8f8f94;font-size:14px}
父选择器标识符 &
article a {
color: blue;
&:hover { color: red }
}
article a{color:#00f}
article a:hover{color:red}
群组嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
.container h1, .container h2, .container h3 {
margin-bottom: .8em; }
属性嵌套
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px; }
导入style.scss文件@import "style"
混合器
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
@mixin test($b:0){
.margin#{$b}-t{margin-top:#{$b}px;}
.margin#{$b}-r{margin-right:#{$b}px;}
.margin#{$b}-b{margin-bottom:#{$b}px;}
.margin#{$b}-l{margin-left:#{$b}px;}
.margin#{$b}{margin:#{$b}px;}
.padding#{$b}-t{padding-top:#{$b}px;}
.padding#{$b}-r{padding-right:#{$b}px;}
.padding#{$b}-b{padding-bottom:#{$b}px;}
.padding#{$b}-l{padding-left:#{$b}px;}
.padding#{$b}{padding:#{$b}px;}
}
.notice {
@include rounded-corners;
}
@mixin qq($a:1,$b){
//支持默认值或外部变量
}
继承
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
插值语句
#{$name}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
.item-1{width:2em}.item-2{width:4em}.item-3{width:6em}
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background:#008000;
}
}
.puma-icon{background:green}.sea-slug-icon{background:green}.egret-icon{background:green}.salamander-icon{background:green}
作者:Yoby 创建时间:2020-07-26 22:43
更新时间:2024-12-05 13:26
更新时间:2024-12-05 13:26