sass是一款强化css的辅助工具，它在css语法的基础上增加了变量、嵌套、混合、导入等高级功能，使得css更加强大与优雅，项目的开发更加高效。css预处理器就是用一种专门的编程语言，为css增加了一些编程的特性。sass可以说是功能最强大的css预处理器，下面总结一下，实际项目开发中，常用的一些sass特性 （sass是基于Ruby开发，windows系统中需要安装ruby，mac不需要，因为自带ruby）
1 变量 用$来表示，还可以镶嵌到字符串中
// 这样就定义了一个叫primary的变量，它的值是#999
$primary: #999
// 使用的时候
color: $primary
// 镶嵌的使用，外面加一个#{}
$con: top
padding-#{$con}: 2px
2 计算 可以直接在样式里计算，加减乘除等操作都可以
padding-top: 2px + 30px
3 嵌套 常见用法
.content {
span {
display：inline-block
}
}
遇到伪类选择器时，加一个&
.content {
&:hover {
color: red
}
}
属性也可以嵌套
span {
font: {
size: 12px;
weight: 400;
}
}
4 混入mixin 对于一个需要经常复用的样式，可以先写好一份，之后用到的时候，通过@include引入它，还支持传入参数
@mixin one-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 使用时
div{
@include one-line;
}
5 继承 使用@extend实现
.content {
background-color: red
}
.content {
span {
display: inline-block
}
}
.new{
@extend .content;
}
.new除了继承content的样式，也继承了content底下所有的样式
6 导入外部文件 直接在css里引入外部样式表
@import url(../../assets/css/config);
7 条件语句 用@if来判断，符合条件，使用对应的样式。还有@else，@else if
div{
@if 4 < 6 {color: red}
}
8 循环语句 支持@for，@while，@each
@for $i from 1 through 3 {
.item-#{$i}{
color: red
}
}
// 编译后等于
.item-1{
color: red
}
.item-2{
color: red
}
.item-3{
color: red
}
//@each
@each $boy in school, home {
.item-#{$boy} {
color: red
}
}
// 编译后等于
.item-school{
color: red
}
.item-home{
color: red
}
// @while
$i: 2;
@while $i < 3 {
.item-#{$i} {
width: 2px * $i;
}
$i: $i + 2;
}
// 编译后
.item-2{
width: 4px;
}
9 自定义函数 @function实现
@function Hello($a){
@return $a + 1px;
}
p{
width: Hello(10px)
}
参考链接
发表评论