Sass语法

Sass语法：

总所周知，css不是一门编程语言。他没法像js和python那样拥有逻辑处理的能力，甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css这些问题。他允许你使用变量，嵌套规制，mixins，导入等众多功能，并且完全兼容css语法。Sass文件不能直接被网页所识别，写完Sass后，还需要专门的工具转化为css才能使用。

 

Sass文件的后缀：

Sass文件有俩种后缀名，一个是scss，一个是sass。不同的后缀名，相应的语法也不一样。这里我们使用scss的后缀名。包括后面讲到的Sass语法，也都是scss的后缀名的语法。

 

使用gulp将Sass装换为css：

将Sass文件转移为css文件的工具很多。这里我们就使用之前讲过的gulp来实现。这里我们需要使用 gulp-sass 插件来帮我们完成。安装的方式非常简单：npm install gulp-sass --save-dev

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");

//处理css文件
gulp.task("css",function () {
    gulp.src(path.css + '*.scss')
        .pipe(sass().on("error",sass.logError))
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
});

 

Sass基本语法：

注释：

支持 /* comment */ 和 //注释 俩种方式。

 

嵌套：

Sass语法允许嵌套。比如#main 下有一个类 .header ，那么我们可以这样写

#main{
  background: #ccc;
  .header{
    width: 20px;
     height: 20px;
  }    
}    

这样写起来更加的直观。一看就知道.header 是在#main 下的

 

引用父选择器（&）：

有时候，在嵌套的子选择器中，需要使用父选择器，那么这时候可以通过&来表示。示例代码如下：

a{
    font-weight: bold;
    text-decoration:none;
    &:hover{
    color: #888;
}
}    

 

定义变量：

 

 

 

教程网址： sass.bootcss.com/docs/sass-reference