Sass框架应用

sass又名scss:是css预处理器之一。

sass是一门高于css的元语言，能用来清晰地结构化地描述文件样式，能提供更简洁优雅的语法。

sass写法：body                     

                  color：#fff;

scss的写法：body{

                             color：#fff；

}

申明：$ maxwidth:500px;

.box1{

width:$maxwidth;

}

sass与scss的区别：1.文件后缀不同；2.写法sass没有大括号，scss有{属性：$变量}

什么时候该申明变量：

1.该值至少重复2次；2.该值至少能被更新一次；3.该值所有表现与变量有关；

嵌套：.box{

border-top:1px solid red;

border-right:1px solid green;

}

sass写法:.box{

border:{

top:1px solid red;

}

}

混合宏：

声明混合宏：

@mixin max{

width:20px;

height:30px;

background-color:red;

border:1px solid green;

}

调用：

.box{

@include max;

}

声明一个带参数的混合宏：

@mixin hmcanshu mixin($canshu){

margin-top:$canshu;

}

调用：

.box{

@include hmjl;

@include hm canshu minxin(20px)

}

转载于:https://www.cnblogs.com/chenslu/p/6942116.html