Sass的简单使用

Sass (Syntactically Awesome Stylesheets) 层叠样式表语言

Sass号称 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
相对于Less他有着更多功能

但是Sass并非js原生实现，因此在使用时需要其他环境依赖，Mac下需要Ruby环境支持，Win下需要Python环境支持。😒

安装

npm install -g sass

.sass .scss

sass
严格缩进，无大括号，无分号

scss
无缩进限制，使用大括号，使用分号

注释
// 单行注释
/*
多行注释
/
/! 这个注释在压缩模式也会保留 */

常用方法

变量

1.变量以美元$符号作为开头，使用冒号赋值；

2.相较于CSS自定义属性（CSS变量）更容易读写；

$font-size: 18px;
$base-color: #ccc;
body {
    font-size: $font-size;
    color: $base-color;
}

嵌套

相对于css选择器，使用嵌套使代码书写更方便。

Modules

创建组件的名称的时候，文件名加上一个下划线，编译器就不会去编译这个文件

// base.scss
$font-size: 18px;
$base-color: #ccc;
body {
    font-size: $font-size;
    color: $base-color;
}

// styles.scss
@use 'base';
.item {
    background-color: base.$base-color;
    color: red;
}

Mixins & Functions

//scss
@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    tranform: $property;
}
.box { @iclude transform(rotate(30deg)); }

// css
.box {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    tranform: rotate(30deg);
}

Inheritance – 继承

// scss
%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.message {
    @extend %message-shared;
}

.success {
    @extend %message-shared;
    border-color: green;
}

.error {
    @extend %message-shared;
    border-color: red;
}

.warning {
    @extend %message-shared;
    border-color: yellow;
}

逻辑判断

@mixin triangle($size,$color,$direction) {
    height: 0;
    width: 0;
    
    border-color:transparent;
    border-style:solid；
    border-width: $size/2;
    
    @if $direction == up {
        border-bottom-color: $color;
    } @else if $direction == right {
        border-left-color: $color;
    } @eles if $direction == down {
        border-top-color: $color;
    } @eles if $direction == left {
        border-right-color: $color;
    } @else {
        @error "Unknown direction #{$direction}.";
    }
}

.next {
    @include triangle(5px, black, right)
}