sass、gulp应用
?Sass介紹
n?CSS 不是一個(gè)編程語言，可以用它來開發(fā)網(wǎng)頁(yè)樣式，但是沒有辦法用它進(jìn)行編程。SASS 的
出現(xiàn)，讓 CSS 實(shí)現(xiàn)了通過代碼編程來實(shí)現(xiàn)的方式。
n?SASS 是一種 CSS 開發(fā)工具，提供了許多便利的寫法，讓CSS 的處理實(shí)現(xiàn)了可編程處理。
n?SASS 擴(kuò)展了 CSS3，增加了規(guī)則、變量、混入、選擇器、繼承等等特性，可以生成風(fēng)格良好的 CSS 樣式表文件，易于組織和維護(hù)。
?環(huán)境搭建及編譯指令
n?安裝 ruby(sass的依賴環(huán)境，必須安裝),
n?gem install sass
ruby -v ??gem -v ?gem install sass文件路徑 ????sass -v
n?自動(dòng)編譯命令
sass文件目錄 sass --watch scss文件的路徑 : css文件的路徑
n?編譯輸出格式
默認(rèn)情況下，SASS 提供了四種格式的 CSS 輸入，默認(rèn)情況輸出是嵌套格式
nested ?嵌套
compact ?緊湊?每個(gè)選擇器代碼在一行
expanded ?擴(kuò)展(完全格式化標(biāo)準(zhǔn))
compressed ?壓縮一行
sass文件目錄 sass --watch scss文件的路徑 : css文件的路徑 ?--style expanded
n?sass 擴(kuò)展名
.sass【sass3.0-版本】
.scss【sass3.0+版本，常用】
備注：sass 有兩種后綴名文件：一種后綴名為 sass，不使用大括號(hào)和分號(hào)；另一種就是我們這 里使用的 scss 文件，這種和我們平時(shí)寫的 css 文件格式差不多，使用大括號(hào)和分號(hào)。
在此也建議使用后綴名為 scss 的文件，以避免 sass 后綴名的嚴(yán)格格式要求報(bào)錯(cuò)。
?Sass-變量定義
n?變量：必須是$符號(hào)開頭，后面緊跟變量名，變量名稱和變量值之間要使用冒號(hào):
進(jìn)行分隔（參考 CSS 屬性和值的設(shè)定語法） ，如果值后面加上[!default]就表示默認(rèn)值。
引用變量的值，直接使用變量名稱，即可引用定義的變量的值。
n?特殊變量：一般情況下，我們定義的變量都是屬性值，可以直接使用，但是如果變量作
為屬性或者其他的特殊情況下，必須使用#{$variable}的形式進(jìn)行調(diào)用。
?Sass-嵌套
n?選擇器嵌套，在嵌套的過程中，如果需要用到父元素，在 SASS 中通過&符號(hào)引用父屬性
n?嵌套屬性——不常用
?Sass-mixin函數(shù)
sass 中可以通過@mixin 聲明混合，可以傳遞參數(shù)，參數(shù)名稱以$開始，多個(gè)參數(shù)之間使用
逗號(hào)分隔，@mixin 的混合代碼塊由@include 來調(diào)用。
n?無參數(shù)混合——不建議使用
n?有參數(shù)混合
n?多參數(shù)混合
?Sass-繼承擴(kuò)展--@extend
在 SASS 中，通過繼承/擴(kuò)展來減少重復(fù)代碼，可以讓一個(gè)選擇器去繼承另一個(gè)選擇中所有
的樣式。
?Sass-導(dǎo)入
n?CSS 本身包含一個(gè)指令@import，但是 CSS 中的@import 每次執(zhí)行都會(huì)發(fā)送一次新的請(qǐng)求都會(huì)消耗一定的資源
n?Partials 這樣的文件， 命名規(guī)范是以下劃線開頭的， 這樣的 scss 文件不會(huì)被編譯成 css
文件。
n?Partials 是用來定義公共樣式或者組件的樣式的， 專門用于被其他的 scss 文件 import
進(jìn)行使用的
n?在 SCSS 文件中引入指令@import 在引入Partials 文件時(shí)，不需要添加下劃線和擴(kuò)展名。
編譯多個(gè)scss文件：
sass ??--watch ?. : css --style expanded
sass ?--watch scss/.:style --style?expanded ???
scss：sass的文件夾 ?style：css的文件夾
?Sass-判斷語句
@if 指令是 SASS 中的一個(gè)控制指令，用于在表達(dá)式滿足條件（true）的時(shí)候輸出指定的
樣式，在不滿足條件（false）或者表達(dá)式為 null 的情況下輸出其他的樣式
@if 條件 {
// 當(dāng)條件為真時(shí)執(zhí)行的樣式
}
同樣，也可以通過@else if 和@else 指令結(jié)合，進(jìn)行多條件的判斷
?Sass-數(shù)組/map
map 就是列表項(xiàng)目中帶名稱的列表
l ?$map：(key1:value1, key2:value2, key3:value3)
n ?length($map):獲取 map 中的元素對(duì)個(gè)數(shù)
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-循環(huán)語句
@for 指令在 SASS 中用于重復(fù)處理一組指令
有兩種表現(xiàn)形式
l @for $var from <開始值> through <結(jié)束值>
l @for $var from <start> to <end>
to 和 through 都是表示一個(gè)區(qū)間，唯一的區(qū)別就是停止循環(huán)的地方不一樣。$var 可以是
任意一個(gè)變量名稱如$i，<start>和<end>是 SASS 表達(dá)式并且必須是整數(shù)
?Sass-function介紹
函數(shù)的功能主要是數(shù)據(jù)的運(yùn)算，SASS 中可以將一些值交給函數(shù)進(jìn)行處理，具體的處理方式
由定義的函數(shù)具體的設(shè)計(jì)確定。
@function 函數(shù)名稱(參數(shù)列表){
// 數(shù)據(jù)處理
}
?
?gulp介紹
gulp 是前端開發(fā)過程中對(duì)代碼進(jìn)行構(gòu)建的工具， 是自動(dòng)化項(xiàng)目的構(gòu)建利器； 她不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；大大提高我們的工作效率。
?Node環(huán)境安裝
?NPM命令
?gulp安裝
n?npm install -g gulp
n?npm install —-save-dev gulp?(安裝到項(xiàng)目目錄下)
?gulp插件安裝（編譯/壓縮/合并/代碼檢查/即時(shí)刷新）
npm?install gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter
gulp-imagemin --save-dev
插件介紹
gulp-jshint ： 檢查語法錯(cuò)誤
gulp-concat ： 合并
gulp-uglify ： 壓縮
gulp-rename ： 重命名
gulp-jshint-html-reporter ：語法錯(cuò)誤報(bào)告
gulp-imagemin ： 圖片壓縮
?gulp使用
?結(jié)合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')); }); |
轉(zhuǎn)載于:https://blog.51cto.com/13507333/2045931
總結(jié)
以上是生活随笔為你收集整理的sass、gulp应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 不用正则表达式，用javascript从
- 下一篇： BABOK － 企业分析（Enterpr