This post was updated 684 days ago and some of the ideas may be out of date.
对于scss文档写了很多,但是常用语法就这些,下面做一个总结
一、嵌套
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//编译为
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
二、父选择器
对于class命名是个难题,所以我们有时习惯用前缀来区别不同
例如:
<div class="home">
<div class="home-title"></div>
<div class="home-content"></div>
<div class="home-footer"></div>
</div>
scss写法
.home{
&-title{
background:red;
}
&-content{
background:black;
}
&-footer{
background:green;
}
}
编译后
.home-title{
background:red;
}
.home-content{
background:red;
}
.home-footer{
background:red;
}
三、变量
scss定义变量很简单就是加个$
,可以写在{} 内也可以不写,代表着全局变量和局部变量
$width:5px;
.main{
$heigth:10px;
width:$width;
.child{
heigth:heigth;
width:$width;
}
}
四、插值语句
#{}
代表的插值
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
五、运算与数据类型
scss支持js的运算,
数字运算, +, -, *, /, %
关系运算 <, >, <=, >= ==, !=
布尔运算 and or not,
数组 用空格逗号隔开都可以称为数组 1 2 或者 1,2 ( )代表空数组
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
数字,1, 2, 13, 10px
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
//假设要获取 facebook 键值对应的值 #3b5998,我们就可以使用 map-get() 函数来实现:
.btn-dribble{
color: map-get($social-colors,facebook);
}
编译后
.btn-dribble {
color: #3b5998;
}
六、导入scss @import
@import "foo.scss"
七、继承样式 @extend
当下面的样式和上面样式完全相同,可以用@extend直接继承上面的样式,同时在编译的时候,scss会在合并样式的时候,避免重复的css
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
对于伪类只能继承一层,但是可以延展给选择器列
#fake-links .link { //延展给所有选择器
@extend a;
}
a {
color: blue;//只能继承到一层
&:hover { //这里不会被继承
text-decoration: underline;
}
}
编译为
a, #fake-links .link {
color: blue;
}
a:hover, #fake-links .link:hover {
text-decoration: underline;
}
多层是可以继承的
示例 如下 可以知道@extend是可以多个使用,同时可以继承嵌套的scss,但是有个问题,如果嵌套中使用了父选择器
那么最外层,下面必须存在css样式不然会报错
.large-text {
.title {
color: blue;
background-color: red;
}
}
//使用
div {
@extend .large-text;
@extend .a;
padding: 4px;
margin-top: 10px;
}
.a {
font-size: 16px; //这里必须有css,不然会找不到.a
&-hover { //这里不会被继承
color: blue
}
}
八、常用的指令
指令常用于封装工具样式,我会单独用一篇文章来阐述,工具样式的封装,提供编写效率
@each
示例
@each $var in(left,center,right){
.text-#{$var}{
text-align:$var;
}
}
编译后
.text-left{
text-align:left;
}
.text-center{
text-align:center;
}
.text-right{
text-align:right;
}
示例2:
$color{
"black":#000;
"white":#fff;
}
@each $colorKey,$color in $color {
.text-$colorkey{
color:$color
}
}
编译后
.text-black{
color:#000;
}
.text-white{
color:#fff;
}
@mixin 和 @include
用处类似于extend,区别在于mixin是可以传递参数
这2个是对应关系,一个定义混合样式,一个使用
示例1
@mixin large-text {
font: { //scss允许这种写法,但是基本不咋用
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
a {
color: blue;
background-color: red;
}
}
//使用
page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
编译后
.page-title {
a {
color: blue;
background-color: red;
}
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
示例2 函数写法
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
//第二种写法
@mixin sexy-border($color, $width: 1in) { //可以给与默认值,
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }//当不传递的时候默认第二个值
h1 { @include sexy-border($color: blue, $width: 2in); }//也可以添加关键词,这样顺序可以打乱
原文地址:点击进入
参与讨论