路过看下系列：sass

什么是sass

是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。sass官方文档

常用的语法

变量

SASS允许使用变量，所有变量以$开头。

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$smallSize:12px;
$b:bottom
.div{
    font-size:$smallSize;
    border-#{b}:1px solid #dcdcdc;
}
复制代码

嵌套

SASS允许选择器嵌套。这是最常用的！

.banner{
    height:45px;
    .banner-title{
        font-size:17px;
    }
    &::before{
        content:'xx';
    }
}
//编译之后便是
.banner{
    height:45px;
}
.banner .banner-title{
    font-size:17px;
}
.banner :: before{
    content:'xx';
}
复制代码

继承

SASS允许一个选择器，继承另一个选择器。

.class1 {
    border: 1px solid #ddd;
}
//class2要继承class1，就要使用@extend命令
.class2 {
    @extend .class1;
    font-size:120%;
}
复制代码

Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

@mixin juzhong{
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
//使用@include命令，调用这个mixin。
.div{
    @include juzhong;
}
//mixin的强大之处，在于可以指定参数和缺省值。
@mixin juzhong($x:50%,$y:50%){
    top:$x;
    left:$y;
    ...
    transform: translate(-$x,-$y);
}
复制代码

其他用法

• 1.SASS允许在代码中使用算式。
• 2.SASS提供了一些内置的颜色函数，以便生成系列颜色。
• 3.SASS允许用户编写自己的函数。
• 4.SASS支持if else 甚至for while 语句。
• ....

安装和使用

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass
复制代码

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss
复制代码

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css
复制代码

SASS提供四个编译风格的选项：

* nested：嵌套缩进的css代码，它是默认值。

* expanded：没有缩进的、扩展的css代码。

* compact：简洁格式的css代码。

* compressed：压缩后的css代码。
复制代码

你也可以让SASS监听某个文件。

sass --watch input.scss:output.css
复制代码

来源

转载于:https://juejin.im/post/5ce021b451882539133cbf41