关于sass其实在早些时候已经听说过,但一直没有用上,今天在前端同事答辩的过程中再次进入视线,经过了解,在sass中可以定义变量,感觉非常欣喜,因为在之前的编写css过程中,发现很多内容都需要重复写多边,于是一直想寻找一种更高级的css编写技术,果不其然,sass解决了我的痛点,接下来我来详细介绍下sass带来的好处.

变量

变量是一个非常神奇的产物,有了它,我们可以实现『一处改动、多处生效』

$theme-color: #F00; //定义单个变量
$colors:#F00 #CCC;  //定义数组变量

.header {
	color:nth($colors, 1); //取第一个值
	background: $theme-color;
}

嵌套

直接上代码

css下写法

.list {
    margin-top: 10;
}
.list li {
    padding-left: 15px;
}
.list a {
    color: #333;
}
.list a:hover {
    text-decoration: none;
}

sass下写法

.list {
    margin-top: 10px;
    li {
        padding-left: 15px;
    }
    a {
        color: #333;
        &:hover {
            text-decoration: none;
        }
    }
}

PS: &表示父元素选择器

继承extend

<pre> .text { color: #333; font-size: 14px; margin: 10px 0; } .error { @extend .text; color: #f00; } </pre>

生成css

.text, .error {
    color: #333;
    font-size: 14px;
    margin: 10px 0;
}

.error {
    color: #f00;
}

占位选择器%

%text {
    color: #333;
    font-size: 14px;
    margin: 10px 0;
}
.warn {
    @extend %text;
    color: #fdd;
}
.error {
    @extend %text;
    color: #f00;
}

生成css

.warn, .error {
    color: #333;
    font-size: 14px;
    margin: 10px 0;
}
.warn {
    color: #fdd;
}
.error {
    color: #f00;
}

PS: 可以发现没有text字段,只有warn、error,类似于虚类

条件判断

body {
    @if $theme == red {
        background: rgba(255, 0, 0, 0.5);
    } @else if $theme == yellow {
        background: rgba(255, 255, 0, 0.5);
    } @else if $theme == black {
        background: rgba(0, 0, 0, 0.5);
    }
}

PS: 使用@if判断

@if($condition, $condition_true, $condition_false)

PS: 三目运算