SASS基础笔记整理
分类: SASS/SCSS 5230 2
SASS是CSS的预处理器(css preprocessor),CSS的一种开发工具,支持加减乘除运算、变量、嵌套、继承(继承上一个选择器)、mixin(代码重用)、颜色函数、插入文件、条件、循环语句、自定义函数。
sass有两种写法,一种是以.sass后缀的文件语法是没有大括号的,和stylus风格类似;一种是.scss为后缀的,我用的是scss,下边为scss语法
变量
scss变量以$开头
$left : left;
div{
float: $left;
}
/*编译结果*/
div{
float: left;
}
/*变量需要嵌套在属性里须写在#{}里面*/
div{
border-#{$left}-radius: 10px;
}
运算
SASS支持加减乘除运算
加法
div{
width: 100 + 20px;
}
/*编译结果*/
div{
width: 120px;
}
减法
div{
width: 100 - 20px;
}
/*编译结果*/
div{
width: 80px;
}
乘法
div{
width: 100 * 2px;
}
/*编译结果*/
div{
width: 200px;
}
除法
div{
width: (200px / 3);
}
/*编译结果*/
div{
width: 66.66667px;
}
混合运算
div{
width: (200px / 3) + 20 - 3px * 2;
}
/*编译结果*/
div{
width: 80.66667px;
}
嵌套
嵌套写法可以不用写很长的选择层级,可以在选择器里嵌套着写
div{
width: 100px;
height: 100px;
a{
color: #f00;
i{
font-size: 16px;
}
}
}
/*编译结果*/
div {
width: 100px;
height: 100px;
}
div a {
color: #f00;
}
div a i {
font-size: 16px;
}
属性嵌套方法,比如复合属性多个值也可以使用嵌套
div{
border:{
width: 1px;
top:{
width: 1px;
style: solid;
color: #f00;
}
}
}
/*编译结果*/
div {
border-width: 1px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f00;
}
在嵌套代码里面引用父元素可以使用&,比如div:hover
div{
&:hover a{
text-decoration: underline;
}
}
/*编译结果*/
div:hover a {
text-decoration: underline;
}
注释
SASS注释的写法分两种
// 此写法不会再编译的css文件中体现
/**/ css注释方法,会在编译后体现
继承
继承另一个选择器的代码,可以使用@extend命令
.class{
border: 1px solid #f00;
}
.class1{
@extend.class;
font-size: 12px;
}
/*编译结果*/
.class, .class1 {
border: 1px solid #f00;
}
.class1 {
font-size: 12px;
}
mixin,重用代码块
@mixin left{
float: left;
width: 100px;
height: 100px;
}
.class2{
@include left;
}
/*编译结果*/
.class2 {
float: left;
width: 100px;
height: 100px;
}
mixin还可以传参数
@mixin randomAttr( $attr , $value : 1s ){
-webkit-#{$attr}: $value;
-moz-#{$attr}: $value;
-ms-#{$attr}: $value;
-o-#{$attr}: $value;
#{$attr}: $value;
}
div{
@include randomAttr(animation);
}
/*编译结果*/
div {
-webkit-animation: 1s;
-moz-animation: 1s;
-ms-animation: 1s;
-o-animation: 1s;
animation: 1s;
}
共 2 条评论关于 “SASS基础笔记整理”