?Sass介紹

n?CSS 不是一個編程語言，可以用它來開發網頁樣式，但是沒有辦法用它進行編程。SASS 的

出現，讓 CSS 實現了通過代碼編程來實現的方式。

n?SASS 是一種 CSS 開發工具，提供了許多便利的寫法，讓CSS 的處理實現了可編程處理。

n?SASS 擴展了 CSS3，增加了規則、變量、混入、選擇器、繼承等等特性，可以生成風格良好的 CSS 樣式表文件，易于組織和維護。

?環境搭建及編譯指令

n?安裝 ruby(sass的依賴環境，必須安裝),

n?gem install sass

ruby -v ??gem -v ?gem install sass文件路徑 ????sass -v

n?自動編譯命令

sass文件目錄 sass --watch scss文件的路徑 : css文件的路徑

n?編譯輸出格式

默認情況下，SASS 提供了四種格式的 CSS 輸入，默認情況輸出是嵌套格式

nested ?嵌套

compact ?緊湊?每個選擇器代碼在一行

expanded ?擴展(完全格式化標準)

compressed ?壓縮一行

sass文件目錄 sass --watch scss文件的路徑 : css文件的路徑 ?--style expanded

n?sass 擴展名

.sass【sass3.0-版本】

.scss【sass3.0+版本，常用】

備注：sass 有兩種后綴名文件：一種后綴名為 sass，不使用大括號和分號；另一種就是我們這 里使用的 scss 文件，這種和我們平時寫的 css 文件格式差不多，使用大括號和分號。

在此也建議使用后綴名為 scss 的文件，以避免 sass 后綴名的嚴格格式要求報錯。

?Sass-變量定義

n?變量：必須是$符號開頭，后面緊跟變量名，變量名稱和變量值之間要使用冒號:

進行分隔（參考 CSS 屬性和值的設定語法） ，如果值后面加上[!default]就表示默認值。

引用變量的值，直接使用變量名稱，即可引用定義的變量的值。

n?特殊變量：一般情況下，我們定義的變量都是屬性值，可以直接使用，但是如果變量作

為屬性或者其他的特殊情況下，必須使用#{$variable}的形式進行調用。

?Sass-嵌套

n?選擇器嵌套，在嵌套的過程中，如果需要用到父元素，在 SASS 中通過&符號引用父屬性

n?嵌套屬性——不常用

?Sass-mixin函數

sass 中可以通過@mixin 聲明混合，可以傳遞參數，參數名稱以$開始，多個參數之間使用

逗號分隔，@mixin 的混合代碼塊由@include 來調用。

n?無參數混合——不建議使用

n?有參數混合

n?多參數混合

?Sass-繼承擴展--@extend

在 SASS 中，通過繼承/擴展來減少重復代碼，可以讓一個選擇器去繼承另一個選擇中所有

的樣式。

?Sass-導入

n?CSS 本身包含一個指令@import，但是 CSS 中的@import 每次執行都會發送一次新的請求都會消耗一定的資源

n?Partials 這樣的文件， 命名規范是以下劃線開頭的， 這樣的 scss 文件不會被編譯成 css

文件。

n?Partials 是用來定義公共樣式或者組件的樣式的， 專門用于被其他的 scss 文件 import

進行使用的

n?在 SCSS 文件中引入指令@import 在引入Partials 文件時，不需要添加下劃線和擴展名。

編譯多個scss文件：

sass ??--watch ?. : css --style expanded

sass ?--watch scss/.:style --style?expanded ???

scss：sass的文件夾 ?style：css的文件夾

?Sass-判斷語句

@if 指令是 SASS 中的一個控制指令，用于在表達式滿足條件（true）的時候輸出指定的

樣式，在不滿足條件（false）或者表達式為 null 的情況下輸出其他的樣式

@if 條件 {

// 當條件為真時執行的樣式

}

同樣，也可以通過@else if 和@else 指令結合，進行多條件的判斷

?Sass-數組/map

map 就是列表項目中帶名稱的列表

l ?$map：(key1:value1, key2:value2, key3:value3)

n ?length($map):獲取 map 中的元素對個數

n ?map-get($map, key):獲取$map 中名稱為 key 的值

n ?map-keys($map):獲取指定$map 中所有的 key

n ?map-values($map):獲取指定$map 中所有的 value

n ?map-has-key($map, key):判斷在$map 中是否包含指定的 key

n ?map-merge($map1, $map2):將$map1 和$map2 合并在一起

n ?map-remove($map, key):將指定名稱的 key 從$map 中移除

?

?Sass-循環語句

@for 指令在 SASS 中用于重復處理一組指令

有兩種表現形式

l @for $var from <開始值> through <結束值>

l @for $var from <start> to <end>

to 和 through 都是表示一個區間，唯一的區別就是停止循環的地方不一樣。$var 可以是

任意一個變量名稱如$i，<start>和<end>是 SASS 表達式并且必須是整數

?Sass-function介紹

函數的功能主要是數據的運算，SASS 中可以將一些值交給函數進行處理，具體的處理方式

由定義的函數具體的設計確定。

@function 函數名稱(參數列表){

// 數據處理

}

?

?gulp介紹

gulp 是前端開發過程中對代碼進行構建的工具， 是自動化項目的構建利器； 她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；大大提高我們的工作效率。

?Node環境安裝

?NPM命令

?gulp安裝

n?npm install -g gulp

n?npm install —-save-dev gulp?(安裝到項目目錄下)

?gulp插件安裝（編譯/壓縮/合并/代碼檢查/即時刷新）

npm?install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter

gulp-imagemin --save-dev

插件介紹

gulp-jshint ： 檢查語法錯誤

gulp-concat ： 合并

gulp-uglify ： 壓縮

gulp-rename ： 重命名

gulp-jshint-html-reporter ：語法錯誤報告

gulp-imagemin ： 圖片壓縮

?gulp使用

?結合sass的使用

sass 使用 gulp-sass, 安裝： npm install --save-dev gulp-sass var gulp = require('gulp'), ????sass = require("gulp-sass"); gulp.task('compile-sass', function () { ????gulp.src('sass/*.sass') ????.pipe(sass()) ????.pipe(gulp.dest('dist/css')); });

轉載于:https://blog.51cto.com/13507333/2045931

總結

以上是生活随笔為你收集整理的sass、gulp应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。