一厅瞎、簡介

Node是一個基于chrome V8引擎的js運(yùn)行環(huán)境（服務(wù)器端的瀏覽器） 他是運(yùn)行在服務(wù)器的饰潜。

NodeJS不是語言，是運(yùn)行環(huán)境：汪ぁＥ砦怼！锁保！

node官網(wǎng) https://nodejs.org薯酝；node中文網(wǎng) http://nodejs.cn

node.js能做哪些事

1半沽、處理文件與數(shù)據(jù)庫

2、與互聯(lián)網(wǎng)進(jìn)行溝通吴菠，以標(biāo)準(zhǔn)化的格式處理請求并發(fā)送回答（處理客戶端請求）

3者填、用來執(zhí)行編譯 CSS 預(yù)編譯語言、預(yù)編譯橄务、壓縮幔托、混淆 JS、壓縮圖片蜂挪、reload重挑、deploy 等工程化任務(wù)

node.js的優(yōu)點(diǎn)

1、處理高并發(fā)場景性能更高

2棠涮、Java 1G 服務(wù)器 每個客戶端連接耗費(fèi)2M資源 1024=2^10

3谬哀、node 1G 服務(wù)器 動態(tài)分配

4、采用事件驅(qū)動严肪、異步編程史煎，為網(wǎng)絡(luò)服務(wù)而設(shè)計(jì)

5、輕量高效驳糯，運(yùn)行速度是PHP的86倍

6篇梭、包和模塊

7、便于前端學(xué)習(xí)

8酝枢、適用于I/O密集型的應(yīng)用（高并發(fā)）恬偷，不適用CPU（數(shù)據(jù)運(yùn)算）密集型的應(yīng)用。node.js作為中間層

9帘睦、現(xiàn)在node不用考慮兼容袍患，放心用es6

二、使用Node.js

1. 安裝

安裝包：百度網(wǎng)盤18302827830 -- Nodejs工具文件夾 node-v10.16.3-x64.msi 或者 node-v12.13.0-x64.msi

檢查是否安裝成功：

命令行輸入：node-v 竣付、npm-v 诡延，出現(xiàn)版本號就安裝成功

輸入node進(jìn)入node環(huán)境，摁兩次ctrl c 退出node環(huán)境古胆，結(jié)束當(dāng)前正在執(zhí)行的任務(wù)

2. nvm -- node版本管理工具

安裝包：百度網(wǎng)盤18302827830 -- Nodejs工具文件夾 nvm-setup.exe

相關(guān)命令：

nvm v 查看nvm的版本

nvm list 查看當(dāng)前安裝過的node版本

nvm install 8.10.0 安裝8.10.0的node

nvm use 8.10.0 切換使用8.10.0 的node

在安裝Node的時候會安裝npm 肆良，這是Node的包管理工具，node package manager

包：就是被封裝好打包上傳的工具逸绎，我們只需要下載安裝就可以立即使用

npm可以對這些node的包妖滔、模塊進(jìn)行宏觀的管理，例如下載桶良、卸載、更新...

npm擁有最大的開源網(wǎng)站：https://www.npmjs.com

我們需要npm init先來創(chuàng)建一個package.json文件沮翔，加上-y指全部使用默認(rèn)配置項(xiàng)

我們通過npm install 模塊 來安裝模塊陨帆，縮寫：npm i 模塊,默認(rèn)的會安裝到目錄中的node_modules；如果沒有這個文件夾，會自動創(chuàng)建

卸載的話就是npm unintsall 模塊名

全局安裝 -g（全寫上是--global）,全局安裝之后澎嚣，在任意的文件夾都可以訪問到

在本地（當(dāng)前目錄上）安裝（大多是包）不需要加-g虑椎，可以--save指的是保存在本地的package.json里

因?yàn)閚pm在是國外服務(wù)器，所以下載速度比較慢纲爸，所以可以使用cnpm（淘寶國內(nèi)鏡像）來下載

下載cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意亥鸠，cnpm不是真正的npm，下載的資源來自與taobao服務(wù)器识啦，下載到的東西和npm下載的是不一樣;cnpm 不一定能使用list负蚊、info等等操作

3. Node.js相關(guān)模塊

分為：自定義模塊（CommonJS規(guī)范 ：module.exports導(dǎo)出、require引入）颓哮、核心模塊（ os家妆、fs、http等）和第三方模塊（ gulp等冕茅，需要在命令行中執(zhí)行 npm install 模塊名稱伤极； 模塊之間不能循環(huán)依賴）

3.1 核心模塊

3.1.1 os模塊：系統(tǒng)模塊

const os = require（'os'） //引入os模塊
os.cpus()  //讀取到當(dāng)前電腦cpu的信息

3.1.2 fs模塊：文件模塊

const fs = require('fs')   //引入fs模塊
//如果文件不存在，會創(chuàng)建文件姨伤，如果文件存在哨坪，會覆蓋已有內(nèi)容
fs.writeFile('data.txt','hello er',(err) => { if(err) throw err;//拋出異常 
    console.log('文件被保存')
})
//如果文件不存在，會創(chuàng)建文件乍楚，如果文件存在当编，在已有的內(nèi)容后面追加  這里的空格有效
fs.appendFile('data.txt','   yayaya',(err) => {
    if(err) throw err;
    console.log('文件追加成功')
})
//讀文件
fs.readFile('文件路徑',(err,data) => {
     if(err) throw err
    else console.log(data)
}) 
//刪文件
fs.unlink('data.txt', err => {
    if(err) throw err
    else console.log('刪除文件成功')
})

//對于文件夾的操作
//創(chuàng)建文件夾
 fs.mkdir('public', err => {
   if (err) throw err   
   else console.log('創(chuàng)建文件夾成功')
})
//刪除文件夾
//只能刪除空目錄  如果想要刪除有內(nèi)容的文件夾，要先把內(nèi)容清空再刪文件夾
 fs.rmdir('public', err => {
   if (err) throw err
   else console.log('done.')
})

3.1.3 http模塊

//引入http模塊
const http = require('http')
const fs = require('fs')

//創(chuàng)建一個服務(wù)器
const server = http.createServer((req, resp) => {
    //req 就是來自前端的請求信息
    //resp 就是服務(wù)器要向前端返回的響應(yīng)  可以返回多個
    //resp.write('<h1>hello world</h1>')
    //resp.write('hello world')
    //resp.end()
     if (req.url === '/'){
         fs.readFile('public/index.html', (err, data) => {
        if(err) throw err
        else resp.end(data)
    })   
    }else if(req.url === 'list'){
    fs.readFile('public/list.html', (err, data) => {
        if(err) throw err
        else resp.end(data)
    }) 
  }
})
//讓服務(wù)器一直處于監(jiān)聽狀態(tài) 端口號兩到四位
server.listen(端口號)

修改之后要重啟服務(wù)器
$ node index

三炊豪、gulp工具

前端自動化構(gòu)建工具凌箕，可以完成代碼的編譯、壓縮词渤、混淆等工作牵舱。與之相似的還有：grunt webpack

grunt -- js的構(gòu)建工具 現(xiàn)在用得少

gulp webpack -- 用的比較多

1. 使用步驟：

1. 全局安裝gulp

yarn add gulp@3 -g

上面那個沒有用的時候用下面這個

yarn global add gulp@3

2.新建一個目錄，放項(xiàng)目

3.進(jìn)入項(xiàng)目目錄缺虐，初始化項(xiàng)目芜壁。在項(xiàng)目里面打開命令行：

yarn init -y

采用默認(rèn)方式，會多一個package.json文件

4.當(dāng)前項(xiàng)目局部安裝gulp

yarn add gulp@3

注意：

圖片.png

5.規(guī)劃項(xiàng)目目錄結(jié)構(gòu)

src文件放源代碼

libs文件夾放其他第三方的東西

圖片.png

6.在項(xiàng)目目錄下新建一個gulpfile.js（必須要叫這個名字）高氮，在這個文件里寫gulp任務(wù)來完成各種對代碼的操作慧妄。

7.在gulpfile.js文件中，壓縮html文件

//體驗(yàn)gulp
const gulp = require('gulp')
//task 制定任務(wù)剪芍，第一個參數(shù)是任務(wù)名塞淹，第二個參數(shù)是函數(shù)，函數(shù)里就是這個任務(wù)要執(zhí)行的操作
//         默認(rèn)
gulp.task('default', () => {
    console.log('default gulp task')
})

在命令行里執(zhí)行任務(wù)

圖片.png

//制定html文件
const gulp = require('gulp')
//引入htmlmin
const htmlmin = require('gulp-htmlmin')
//任務(wù)名：html
gulp.task('html', () => {
    //**所有目錄  *文件  取出所有目錄下后綴名為.html文件
    gulp.src('src/**/*.html') //取
    .pipe(htmlmin({
        //配置項(xiàng)
    }))  //壓縮
    .pipe(gulp.dest('dist'))  //放到目標(biāo)的dist目錄里
})

配置完成后在命令行輸入：

npm i gulp-htmlmin

npm i gulp-connect

然后gulp罪裹，點(diǎn)擊Ctrl和左鍵 端口

8.壓縮js

yarn add gulp-uglify

總結(jié)gulp

gulp

自動化構(gòu)建工具（fis3饱普、gulp运挫、grunt）
使用：http://www.ydcss.com/archives/18
gulp是基于Nodejs的自動任務(wù)運(yùn)行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試套耕、檢查谁帕、合并、壓縮冯袍、格式化匈挖、瀏覽器自動刷新、部署文件生成康愤，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟儡循。
使用流程：
    安裝nodejs -> 全局安裝gulp -> 項(xiàng)目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運(yùn)行任務(wù)

1. 安裝 nodejs
node -v
npm -v

使用 npm 安裝包：node package manager
npm install <package-name> -g （--save-dev）

-g 全局安裝
--save 局部安裝并保存到package.json配置中
-dev  存在package.json的devDependencies配置項(xiàng)里，意思是生產(chǎn)環(huán)境依賴的模塊

文件：package.json(NodeJS項(xiàng)目的配置文件)

選擇性安裝 cnpm （http://npm.taobao.org/）:
npm install -g cnpm --registry=https://registry.npm.taobao.org
可以使用 cnpm 替代 npm 來安裝資源

2. 全局安裝 gulp
npm install gulp@3 -g
或：
cnpm install gulp@3 -g
測試：gulp -v

以下步驟在項(xiàng)目目錄下操作：

3. 在項(xiàng)目目錄下生成 package.json 文件：
npm init -y
或
cnpm init -y

4. 在項(xiàng)目目錄中本地安裝 gulp：
npm install gulp@3 --save-dev
本地安裝成功后翘瓮，會生成 node_modules 文件夾

5. 在項(xiàng)目目錄中本地安裝 gulp 插件(https://www.npmjs.com)：

壓縮CSS：gulp-clean-css
npm install gulp-clean-css --save-dev

壓縮JS：gulp-uglify
npm install --save-dev gulp-uglify

壓縮Html：gulp-htmlmin
npm install --save-dev gulp-htmlmin


gulpfile.js

const gulp = require('gulp');
const cleanCss = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const htmlmin = require('gulp-htmlmin');

gulp.task('default', function() {
    // 將你的默認(rèn)的任務(wù)代碼放在這
    console.log('gulp啟動成功');
});

gulp.task("hello", function(){
    console.log("hello gulp");
});

gulp.task("html", function(){
    gulp.src("src/index.html")
        .pipe(htmlmin({
               removeComments: true,//清除HTML注釋
               collapseWhitespace: true,//壓縮HTML
               collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
               removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
               removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
               removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
               minifyJS: true,//壓縮頁面JS
               minifyCSS: true//壓縮頁面CSS 
           })
        )
        .pipe(gulp.dest("dist"))
});

gulp.task("css", function(){
    gulp.src("src/css/*.css")
        .pipe(cleanCss())
        .pipe(gulp.dest("dist/css"));
});

gulp.task("js", function(){
    gulp.src("src/js/*.js")
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"));
});


將ES6轉(zhuǎn)換為ES5：gulp-babel

npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulpfile.js中修改js任務(wù)
var babel = require('gulp-babel');
gulp.task('js', function(){
    gulp.src('src/**/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});


服務(wù)器：gulp-connect

npm install --save-dev gulp-connect

gulpfile.js中新增代碼

var connect = require('gulp-connect');

gulp.task('server', function() {
    connect.server({
        livereload: true,
        port: 2333,
        root: 'dist'
    });
});


gulpfile.js中修改js任務(wù)
var concat = require("gulp-concat");
gulp.task("js", function(){
    gulp.src("src/js/**/*.js")
 .pipe(babel({
   presets: ['@babel/env']
 }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});


watch：監(jiān)聽文件的的變化執(zhí)行對應(yīng)的任務(wù)

給每一個任務(wù)加上pipe(connect.reload())

gulp.task('watch',function(){
    gulp.watch('./src/css/*.scss',['sass']);
    gulp.watch('./src/*.html',['html']);
    gulp.watch('./src/css/*.css',['css']);
    gulp.watch('./src/js/*.js',['js']);
})

gulp.task("default", ["sass", "html", "js", "connect", "watch"]);


處理圖片

gulp.task("img", function(){
    gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})
gulp.task("default", ["sass", "html", "minijs", "connect", "watch", "img"]);


sass轉(zhuǎn)css  gulp-sass

npm install node-sass gulp-sass --save-dev

var sass = require('gulp-sass');

gulp.task('sass', function(){
    gulp.src('src/css/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});


另：文件合并（項(xiàng)目當(dāng)中暫時用不著贮折，但是要熟悉）

cnpm install --save-dev gulp-concat

項(xiàng)目中的注意事項(xiàng)

• 我們在npm或者yarn安裝的時候依賴包和版本號會存入package.json的dependencies字段里，我們在項(xiàng)目傳輸?shù)臅r候不需要傳輸node_modules這個目錄资盅，別人拿到這個項(xiàng)目以后直接運(yùn)行 npm install 或者yarn 命令就可以根據(jù)依賴把這些依賴包全部自動安裝好调榄。
• 在安裝的時候 npm install [包] --save-dev 這里的 --save指的是將依賴的說明信息保存在package.json里（現(xiàn)在用的高版本npm會自動save，咱們就不用加這個參數(shù)了）呵扛， -dev 參數(shù)指的是開發(fā)依賴（將來上線不需要的依賴包） 每庆，對應(yīng)的yarn的參數(shù) yarn add [包] -D （yarn也會自動save）

四、sass工具

sass是需要編譯的今穿，sass不能直接用于頁面缤灵。它可以極大地提高編程效率（對于使用熟練的人來說）。

sass想要應(yīng)用在項(xiàng)目中需要編譯成css文件蓝晒。用gulp腮出！

sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號芝薇；另一種就是我們這里使用的scss文件胚嘲，這種和我們平時寫的css文件格式差不多，使用大括號和分號洛二。本節(jié)課所有sass文件都指后綴名為scss的文件馋劈。在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴(yán)格格式要求報(bào)錯晾嘶。

1.導(dǎo)入

sass中如導(dǎo)入其他sass文件妓雾，最后編譯為一個css文件，優(yōu)于純css的@import

@import "reset";

二垒迂、變量

必須以$開頭械姻， 后面加上！default那就代表這個是當(dāng)前變量的默認(rèn)值机断。

$font-size:16px;
div{
  font-size: $font-size;
}

2.1 復(fù)雜變量的使用

$linkColor: #b6b6b6 #ddd!default;
div{
  color: nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

一般我們都將變量當(dāng)做屬性值來使用楷拳， 但是也有極特殊情況下我們會將變量當(dāng)做class里的類來使用材部。 這時候， 我們必須以#{$name}的方式來使用變量名唯竹；

$name:top !default;
.class-#{$name}{
  border-#{name}:1px solid #b6b6b6;
}

2.2 多值變量：map 和 list(復(fù)雜變量)

多值變量代表的是多維數(shù)據(jù)的存儲方式，換句話說苦丁，list相當(dāng)于js中的數(shù)組map相當(dāng)于js中的對象浸颓。 list數(shù)據(jù)一般用空格分割， 但是也可以用 逗號 或者小括號分割多個值旺拉。

2.2.1 list:

$list : (20px 40px)(30px 20px)(40px 30px);//相當(dāng)于多維數(shù)組产上，其他格式同理；
$list : 20px 30px 40px 50px 60px;
$list : 20px,30px,40px,50px,60px;

使用：
對于list的使用那蛾狗， 我們可以使用 nth($list,num)去調(diào)用晋涣； 當(dāng)然我們還可以去使用其他方式；

length($list)                                                  返回list的長度

nth($list, $n)                                                 返回索引的項(xiàng)目

set-nth($list, $n, $value)                              設(shè)置list中第n個的值

join($list1, $list2, [$separator])                     將兩個列表鏈接在一起

append($list1, $val, [$separator])               追加一個值到列表最后

zip($lists…)                          將幾個列表組合成多維列表

index($list, $value)                返回一個列表中值的位置

2.2.2 map:

map的數(shù)據(jù)是以鍵值對形式出現(xiàn)的沉桌， 期中value可以是list谢鹊。 格式為：

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

最常用的取值方法就是用

map-get（$map,$key）

進(jìn)行取值。

關(guān)于map還有很多函數(shù)：

map-get($map, $key)                返回key值留凭；

map-merge($map1, $map2)      合并兩個$map佃扼；

map-remove($map, $keys…)         刪除某個value并返回value值；

map-keys($map)      以list形式返回所有$map 的key;

map-values($map)      以list形式返回所有$map中的value;

map-has-key($map, $key)     查看當(dāng)前的$map是否有這個key

keywords($args)         返回一個關(guān)鍵字

$headers:(h1:20px,h2:30px,h3:40px);

@each $key, $value in $headers{
  #{$key}{
    font-size: $value;
  }
}

這里的each用法那和我們js中的for in 用法基本一致蔼夜，只不過寫法不同兼耀。 $key 相當(dāng)于for in 中的 變量 $value相當(dāng)于 for in 中的 obj[i]；

2.3嵌套

sass可以進(jìn)行選擇器的嵌套求冷，表示層級關(guān)系瘤运，看起來很有bigger。

選擇器嵌套：

ul{
  li{
    list-style: none;
    color:nth($linkColor,1);
  }
}

屬性嵌套：

.class{
  border:{
    style:solid;
    left:none;
    right:1px;
    color:#b6b6b6;
  }
}

@at-root

跳出當(dāng)前選擇器嵌套匠题。

.class{
  color:f10;
  .child{
    width:100px;
  }
}
.class2{
  @at-root .child{
    color:#b6b6b6;
  }
}

@at-root (without: ...)和 @at-root (with: ...)

默認(rèn)@at-root只會跳出選擇器嵌套拯坟，而不能跳出@media或@support，如果要跳出這兩種梧躺，則需使用@at-root (without: media)似谁，@at-root (without: support)。這個語法的關(guān)鍵詞有四個：all（表示所有）掠哥，rule（表示常規(guī)css）巩踏，media（表示media），support（表示support续搀，因?yàn)锧support目前還無法廣泛使用塞琼，所以對其忽略）。我們默認(rèn)的@at-root其實(shí)就是@at-root (without:rule)禁舷。

@media screen and (max-width:641px){
    .parent{
      color:#b6b6b6;
      @at-root .child{
        width:100px;
      }
    }
}

在這里.child只會跳出.parent 和.parent類作為同級彪杉，而不會跳出@media 那么我們?nèi)绾巫屗鯜media那毅往？

@media screen and (max-width:641px){
    .parent{
      color:#b6b6b6;
      @at-root (without:media) {
        .child{
          width:100px;
        }
      }
    }
}

這種編譯模式會將我們的css編譯成

@media screen and (max-width: 641px) {
  .parent {
    color: #b6b6b6;
  }
}
.parent .child {
  width: 100px;
}

也就是說， 這時候我們的 .child 帶著他的父級跳出了media嵌套派近。

@media screen and (max-width:641px){
    .parent{
      color:#b6b6b6;
      @at-root (without:all) {
        .child{
          width:100px;
        }
      }
    }
}

和剛才的執(zhí)行結(jié)果有稍微的一點(diǎn)差異,變成了這個樣子攀唯；

@media screen and (max-width: 641px) {
  .parent {
    color: #b6b6b6;
  }
}
.child {
  width: 100px;
}

注意：這次的跳出是不帶父級的。

小技巧：

@at-root 其實(shí)有很多的組合配合渴丸，和 &配合可以改變css的從屬關(guān)系侯嘀；

.parent{
  @at-root .child &{
    color:#b6b6b6;
  }
}

mixin（混合）

sass中使用@mixin聲明混合，可以傳遞參數(shù)谱轨，參數(shù)名以$符號開始戒幔，多個參數(shù)以逗號分開，也可以給參數(shù)設(shè)置默認(rèn)值土童。聲明的@mixin通過@include來調(diào)用诗茎。

sass中可用mixin定義一些代碼片段，且可傳參數(shù)献汗，方便日后根據(jù)需求調(diào)用敢订。從此處理css3的前綴兼容輕松便捷。

無參數(shù) mixin :

@mixin marginCenter{
  margin-left:auto;
  margin-right:auto;
}
.container{
  @include marginCenter;
}

有參數(shù) minxin

1）必須傳參數(shù)的應(yīng)用

@mixin transform($type){
  -webkit-transform:$type;
  -moz-transform: $type;
  -ms-transform: $type; 
  -o-transform: $type;
  transform:$type;
}
div{
  @include transform(scale(1.2))
}

2）設(shè)置默認(rèn)情況的mixin

當(dāng)你不傳入?yún)?shù)直接使用的話那會調(diào)用默認(rèn)值雀瓢。

@mixin opacity($opacity:50){
  opacity: $opacity/100;
  filter:alpha(opacity=$opacity)
}
.box{
  @include opacity(80)
}

多個參數(shù)mixin

調(diào)用時可直接傳入值枢析，如@include傳入?yún)?shù)的個數(shù)小于@mixin定義參數(shù)的個數(shù)，則按照順序表示刃麸，后面不足的使用默認(rèn)值醒叁，如不足的沒有默認(rèn)值則報(bào)錯。除此之外還可以選擇性的傳入?yún)?shù)泊业，使用參數(shù)名與值同時傳入把沼。

@mixin line($border:1px dashed #ccc, $padding:10px){
  border-bottom:$border;
  padding-top:$padding;
  padding-bottom:$padding;
}
.imgtext-h li{
  @include line(1px solid #ccc);
}
.imgtext-h--product li{
  @include line($padding:15px);
}

多組值參數(shù)mixin

如果一個參數(shù)可以有多組值，如box-shadow吁伺、transition等饮睬，那么參數(shù)則需要在變量后加三個點(diǎn)表示，如$variables...篮奄。

@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

@content

@content在sass3.2.0中引入捆愁，它可以使@mixin接受一整塊樣式，接受的樣式從@content開始窟却。

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
@include max-screen(480px) {
  body { color: red }
}

擴(kuò)展/繼承

sass可通過@extend來實(shí)現(xiàn)代碼組合聲明昼丑，使代碼更加優(yōu)越簡潔。

.active{
  border:1px solid #b6b6b6;
  padding:10px;
  color: #333;
}

.success{
  @extend .active;
  width:100px;
}

顏色

sass中集成了大量的顏色函數(shù)夸赫，讓變換顏色更加簡單菩帝。

$linkColor:(red,green);
a{
  color: nth($linkColor,1);
  &:hover{
    color:darken(nth($linkColor,1),20%)
  }
}

運(yùn)算

sass可進(jìn)行簡單的加減乘除運(yùn)算等 , 當(dāng)我們拿到一張需要轉(zhuǎn)換成百分比布局的設(shè)計(jì)稿， 這時候我們有福了。

.container{
  width: 100%;
}
.aside{
  width:600px/960px*100%;
}
article{
  width:300px/960px*100%;
}

函數(shù)

sass定義了很多函數(shù)可供使用呼奢，當(dāng)然你也可以自己定義函數(shù)宜雀，以@fuction開始。實(shí)際項(xiàng)目中我們使用最多的應(yīng)該是顏色函數(shù)握础，而顏色函數(shù)中又以lighten減淡和darken加深為最辐董，其調(diào)用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個參數(shù)都是顏色值禀综，第二個參數(shù)都是百分比郎哭。

$baseFontSize:10px;
$gray:#ccc;
@function pxToRem($px){
@return $px/$baseFontSize*1rem;
}
body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

這個和我們JS中的函數(shù)那非常的相似，可以和我們js中的函數(shù)一樣使用菇存。 同時注意， 這里的返回值幾乎是必須的所以請?jiān)诿總€函數(shù)結(jié)束時邦蜜，使用@return去返回需要的返回值依鸥。

@if判斷

@if可一個條件單獨(dú)使用，也可以和@else結(jié)合多條件使用

$lte7: true;
$type: monster;
.ib{
  display:inline-block;
  @if $lte7 {
    *display:inline;
    *zoom:1;
  }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

三目判斷

語法為：if($condition, $if_true, $if_false)悼沈。三個參數(shù)分別表示：條件贱迟，條件為真的值，條件為假的值絮供。

if(true, 1px, 2px) => 1px

if(false, 1px, 2px) => 2px

for循環(huán)

for循環(huán)有兩種形式衣吠，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$var表示變量壤靶，start表示起始值缚俏，end表示結(jié)束值，這兩個的區(qū)別是關(guān)鍵字through表示包括end這個數(shù)贮乳，而to則不包括end這個數(shù)忧换。

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@each循環(huán)

語法為：@each $var in <list or map>。其中$var表示變量向拆，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)亚茬。

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

多個字段list循環(huán)；

$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

多字段map循環(huán)浓恳；

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}