sass入门
以前一直听别人讲css的预编译语言,自己也没有具体的看过语法,后来因为公司人都慢慢用,我也准备学起来了,看了文档,其实也挺简单的,变量,混合器,继承。怕忘掉,所以在这做个笔记,便于自己以后的使用。(贴点官网的例子,这样一目了然)
1,变量声明
sass
变量的声明和css
属性的声明很像:
$highlight-color: #F90;
使用
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
其实看着还是挺简单的。
注意点:变量名用中划线还是下划线都是无所谓的,sass都识别
2,嵌套
这样可以省略很多选择器的,比较省代码
2-1:父选择器的标识符是&
2-2:群组选择器的嵌套可以用逗号隔开
2-3:子组合选择器>(
article section { margin: 5px } article > section { border: 1px solid #ccc }
上例中,第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
)
2-4:同层组合选择器:+(
header + p { font-size: 1.1em }
你可以用同层相邻组合选择器+
选择header
元素后紧跟的p
元素
)
2-5:同层选择器~(
article ~ article { border-top: 1px dashed #ccc }
选择所有跟在article
后的同层article
元素,不管它们之间隔了多少其他元素:
)
2-6:嵌套属性(把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }
块,把子属性部分写在这个{ }
块中。就像css
选择器嵌套一样,sass
会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css
样式一样:
)
3.导入sass文件
用@import
4.混合器
定义
@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
引入
notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; }
生成
.notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
给混合器传参也是很好用的一个方法,比较像js的函数
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a { @include link-colors(blue, red, green); } //Sass最终生成的是: a { color: blue; } a:hover { color: red; } a:visited { color: green; }
6.继承
感觉这个有点难我都没看透,感觉工作中都不敢乱用。