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