來(lái)源：廣州日?qǐng)?bào)
6月16日（美國(guó)當(dāng)?shù)貢r(shí)間6月15日）起，
微軟公司永久關(guān)閉IE瀏覽器。
IE瀏覽器曾是
使用最廣泛的網(wǎng)頁(yè)瀏覽器，
占據(jù)全球95%的市場(chǎng)份額。
IE瀏覽器正式退役后，
其功能將由Edge瀏覽器接棒。
微軟IE瀏覽器6月16日起永久關(guān)閉
6月16日起，微軟徹底終止支持Internet Explorer瀏覽器（以下簡(jiǎn)稱IE）。微軟向用戶推薦使用該公司在2015年推出的Edge瀏覽器。
推出于1995年的IE瀏覽器全稱為“Internet Explorer”，是Windows第一個(gè)默認(rèn)瀏覽器。隨著Windows系統(tǒng)快速占領(lǐng)市場(chǎng)，IE瀏覽器曾成為全球使用最廣泛、市場(chǎng)占有率最高的網(wǎng)絡(luò)瀏覽器。
2021年5月20日，微軟宣布將在2022年6月16日徹底終止支持IE，同年，微軟發(fā)布Windows 11，IE被徹底從Windows操作系統(tǒng)中移除，將用戶推向2015年推出的Edge瀏覽器。
“微軟IE瀏覽器6月16日正式退役”
的話題一度沖上熱搜，
不少網(wǎng)友稱：
“爺青結(jié)”，
IE瀏覽器見(jiàn)證了幾代人的青春，
“E網(wǎng)情深”將成為歷史。
有人感慨：
“回看IE瀏覽器27年歷史，
有過(guò)輝煌巔峰，
也曾淪為笑柄，
承載幾代人的回憶，
終于不‘再見(jiàn)’”。一度輝煌
曾占據(jù)全球市場(chǎng)95%的份額
1995年8月，微軟發(fā)布操作系統(tǒng)Windows 95，首次將“窗口”概念引入PC市場(chǎng)，同時(shí)開(kāi)創(chuàng)了可視化PC時(shí)代的大幕，時(shí)至今日，PC可視化操作仍是主流操作模式。
作為Windows 95的默認(rèn)瀏覽器，IE瀏覽器飛速占領(lǐng)市場(chǎng)，可謂是“出道即巔峰”，三年后成為全球市場(chǎng)份額第一的瀏覽器。
2001年，IE瀏覽器推出了最“經(jīng)典”的6.0版本，并在2003年走上巔峰，IE瀏覽器各個(gè)版本占據(jù)全球市場(chǎng)95%的份額。那是IE瀏覽器的黃金時(shí)代。
但“成也經(jīng)典、敗也經(jīng)典”，IE瀏覽器的6.0版本一用就是5年，直到2006年，微軟才更新了換湯不換藥的IE 7——實(shí)際上，除了更卡，網(wǎng)友感知沒(méi)啥區(qū)別。
2011年微軟推出IE 9，有了較大改變，但“IE速度慢”觀念已深入人心，IE 9無(wú)力回天。在2015年，微軟宣布，開(kāi)始孵化它的另一個(gè)瀏覽器“兒子”Edge瀏覽器。
在這期間，市場(chǎng)上各個(gè)瀏覽器百花齊放，出現(xiàn)Chrome、火狐、Safari、360、百度、搜狗、QQ等瀏覽器，甚至做網(wǎng)站導(dǎo)航的網(wǎng)站幾乎都有自己的瀏覽器。
不過(guò)，面對(duì)來(lái)勢(shì)洶洶的競(jìng)爭(zhēng)對(duì)手，IE瀏覽器依然保持了不緊不慢的發(fā)展節(jié)奏，直至現(xiàn)在即將退役，至此IE 11成為了微軟IE瀏覽器的終結(jié)者。27年歷史，IE瀏覽器僅僅更新了11代。跟不上時(shí)代的步伐
常被被網(wǎng)友吐槽調(diào)侃
IE瀏覽器是如何被用戶一步步“拋棄”的？
在IE瀏覽器的使用過(guò)程中，IE瀏覽器的缺點(diǎn)不斷暴露出來(lái)，速度慢、反應(yīng)遲鈍、兼容性不佳、動(dòng)不動(dòng)還“崩潰”。當(dāng)然，IE瀏覽器的競(jìng)爭(zhēng)對(duì)手如雨后春筍般出現(xiàn)也加速了IE瀏覽器的“死亡”。
微軟Edge瀏覽器截圖
終于，在2010年，谷歌瀏覽器Chrome第一個(gè)支持Windows、Linux等三個(gè)操作系統(tǒng)的穩(wěn)定版發(fā)布，這為IE瀏覽器的噩夢(mèng)拉開(kāi)序幕。在之前，Chrome已進(jìn)行了一年多的測(cè)試。
Chrome推出后短短兩年，有調(diào)研公司數(shù)據(jù)顯示，在2012年，Chrome瀏覽器已成為全球第一大瀏覽器，約占市場(chǎng)份額的三分之一，IE瀏覽器緊隨其后，約占市場(chǎng)32%的市場(chǎng)份額。在2015年，IE瀏覽器市場(chǎng)份額跌破20%。
時(shí)至今日，有調(diào)查數(shù)據(jù)顯示，IE瀏覽器的全球市場(chǎng)份額已下滑至2%以下。而Chrome市場(chǎng)份額超60%。
網(wǎng)上對(duì)IE瀏覽器的吐槽隨處可見(jiàn)：
“作為一個(gè)開(kāi)發(fā)人員，希望IE趕緊退役，省的還要兼容IE。”
“IE的作用就是下載其他瀏覽器，我這樣說(shuō)沒(méi)人反對(duì)吧？”
“是誰(shuí)給IE的勇氣，詢問(wèn)是否將它設(shè)為默認(rèn)瀏覽器？”
有甚至網(wǎng)友還惡搞評(píng)選出世界上最慢的幾樣?xùn)|西，“樹(shù)懶，烏龜、海星和IE。”
由于用戶體驗(yàn)不佳，IE瀏覽器逐漸成為了“緩慢” “卡頓”等的代名詞，甚至由此誕生出了很多“段子”。
“IE 27年的旅程，從今以后，這條路由Edge替IE繼續(xù)走下去。不久前Edge瀏覽器桌面市場(chǎng)份額終于突破10%，遙望IE曾經(jīng)的輝煌，小E深感路漫漫其修遠(yuǎn)兮，吾將上下而求索。”微軟對(duì)IE進(jìn)行總結(jié)不忘為Edge鋪路。
不過(guò)Edge能否重IE曾經(jīng)的輝煌，仍待時(shí)間驗(yàn)證。
你用過(guò)IE瀏覽器嗎？
有哪些感受？
評(píng)論區(qū)見(jiàn)~
# 總結(jié)：代碼復(fù)用性低；不易于維護(hù)
# 注：現(xiàn)在，現(xiàn)在的CSS是可以定義變量的！！！
:root{
--red: #f3e1e1;
}SASS (.scss)。于2007年誕生，最早也是最成熟的CSS預(yù)處理器，擁有ruby社區(qū)的支持和compass這一最強(qiáng)大的css框架，目前受LESS影響，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS。
LESS (.less)。于2009年誕生，借鑒了SASS的長(zhǎng)處，并兼容了CSS語(yǔ)法，使得開(kāi)發(fā)者使用起來(lái)更為方便順手，但是相比于SASS，其編程功能不夠豐富，反而促使SASS進(jìn)化成為了SCSS。
Stylus (.styl)。于2010年誕生，出自Node.js社區(qū)，主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，人氣較前兩者偏低。
簡(jiǎn)而言之：
Sass有兩套語(yǔ)法：
1.第一種或更新的語(yǔ)法被稱為SCSS。它是CSS語(yǔ)法的擴(kuò)展。這意味著每個(gè)有效的CSS樣式表都是具有相同含義的有效SCSS文件。下文描述的Sass功能增強(qiáng)了此語(yǔ)法。使用此語(yǔ)法的文件擴(kuò)展名為.scss。
2.第二種或更舊的語(yǔ)法被稱為SASS。提供了一種更為簡(jiǎn)潔的CSS編寫(xiě)方式。它使用縮進(jìn)而不是方括號(hào)來(lái)表示選擇器的嵌套，并使用換行符而不是分號(hào)來(lái)分隔屬性。使用此語(yǔ)法的文件擴(kuò)展名為.sass。
任何一種格式可以直接 導(dǎo)入 (@import) 到另一種格式中使用，或者通過(guò) sass-convert 命令行工具轉(zhuǎn)換成另一種格式CSS預(yù)處理器為CSS增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題。支持嵌套、變量和邏輯等。可以讓CSS更加簡(jiǎn)潔、提高代碼復(fù)用性、邏輯分明等等css的文件體積和復(fù)雜度不可控；增加了調(diào)試難度和成本等。less、scss(sass)和stylus代碼并不能被瀏覽器直接解析，所以必須先將它們編譯成css代碼
現(xiàn)有框架已經(jīng)提供了css預(yù)處理器選項(xiàng)，編譯相關(guān)配置會(huì)自動(dòng)幫我們生成！所以只有在"練習(xí)"情況下才有必要安裝該環(huán)境# 全局安裝scss預(yù)處理器，使用終端命令實(shí)現(xiàn)編譯
a. Node環(huán)境下的node-sass模塊
b. Node環(huán)境下的dart-sass模塊
c. Ruby環(huán)境下的sass模塊
d. Dart環(huán)境下的sass模塊
# 注：這里的推薦順序針對(duì)的是"練習(xí)"場(chǎng)景，而開(kāi)發(fā)環(huán)境下推薦使用的是dart-sass
# 本質(zhì)：某個(gè)語(yǔ)言的第三方庫(kù)或者命令行工具a. IDE代表：Webstrom前提是安裝上述"1"中的命令行編譯工具，配置自動(dòng)命令，另安裝一個(gè)代碼提示插件scss
b. 編輯器代表：vscode 安裝Easy Sass（編譯）和Sass（代碼提示）兩個(gè)插件1. 安裝node https://nodejs.org(官網(wǎng)) 或 https://npm.taobao.org/mirrors/node(鏡像)
2. *安裝cnpm(不推薦直接將源換為淘寶鏡像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安裝node-sass $npm i -g node-sass 或 $cnpm i -g node-sass
4. 檢查是否安裝成功$node-sass -v1. 安裝node https://nodejs.org(官網(wǎng)) 或 https://npm.taobao.org/mirrors/node(鏡像)
2. *安裝cnpm(不推薦直接將源換為淘寶鏡像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安裝dart-sass $npm i -g sass 或 $cnpm i -g sass
# 注：該模塊為第三方庫(kù)，所以可以考慮使用cnpm i sass -D(-D==--save-dev)僅對(duì)某個(gè)小項(xiàng)目當(dāng)做開(kāi)發(fā)時(shí)依賴進(jìn)行使用/* 該模塊的官方文檔：https://sass-lang.com/documentation/js-api */
const sass=require('sass');
sass.render({file: scss_filename}, function(err, result) { /* ... */ });
// OR
const result=sass.renderSync({file: scss_filename});
// 注：默認(rèn)情況下renderSync()的速度是render()的兩倍以上，這是由于異步回調(diào)所帶來(lái)的開(kāi)銷而導(dǎo)致的1.安裝Rubyhttps://rubyinstaller.org/downloads
2.*配置鏡像$gem sources -a https://gems.ruby-china.com/ -r https://rubygems.org/
3.*查看源 $gem sources -l # 確保只有g(shù)ems.ruby-china.com一個(gè)源
4.安裝scss $gem install sass
5.檢查是否安裝成功 $sass -v#注：如果出現(xiàn)了SSL錯(cuò)誤，修改 ~/.gemrc 文件，增加 ssl_verify_mode: 0 配置
# ~表示用戶根目錄，windows的文件位置為C:\Users\用戶名\.gemrc
---
:sources:
- https://gems.ruby-china.com
:ssl_verify_mode: 0# 注：最好帶上"-C --sourcemap=none "參數(shù)
# 注：Sass 命令行工具根據(jù)文件的拓展名判斷所使用的語(yǔ)法格式，沒(méi)有文件名時(shí) sass 命令默認(rèn)編譯 .sass 文件，添加 --scss 選項(xiàng)或者使用 scss 命令編譯 SCSS 文件。1.安裝Darthttps://dart.dev/tools/sdk/archive
2.*配置鏡像，添加環(huán)境變量 https://pub.flutter-io.cn 或 https://mirrors.tuna.tsinghua.edu.cn/dart-pub/
windows打開(kāi)此電腦,添加系統(tǒng)變量 PUB_HOSTED_URL=https://pub.flutter-io.cn
Linux鍵入$echo 'export PUB_HOSTED_URL="https://pub.flutter-io.cn"' >> ~/.bashrc 或 /etc/profile
4.安裝sass
全局安裝：$pub global activate sass(可執(zhí)行文件)
項(xiàng)目安裝：pubspec.yaml填寫(xiě)好依賴后，執(zhí)行 $pub get (.dart代碼)
5.檢查是否安裝成功$sass -v2.運(yùn)行.dart代碼
// 前提是在pubsepc.yaml文件中添加依賴
// dev_dependencies:
//sass: lastest
// main.dart
import 'package:sass/sass.dart' as sass;
void main(List<String> args) {
print(sass.compile(args.first));
}
// or
void main(List<String> args) {
var result=sass.compile(arguments[0]);
new File(arguments[1]).writeAsStringSync(result);
}
// dart main.dart styles.scss styles.css在 CSS 屬性的基礎(chǔ)上 Sass 提供了一些名為 SassScript 的新功能。SassScript 可作用于任何屬性，允許屬性使用變量、算數(shù)運(yùn)算等額外功能。
弱類型語(yǔ)言, 對(duì)語(yǔ)法要求沒(méi)那么嚴(yán)格例如：
/*
hello
world!
*/
// compile scss files to css
// it's ready to do it.
$pink: #f3e1e1;
html{
background-color: $pink;
}
$author: 'gdream@126.com';
/*!
Author: #{$author}.
*/開(kāi)發(fā)模式編譯后:
/*
hello
world!
*/
html{
background-color: #f3e1e1;
}
/*!
Author: 'gdream@126.com'.
*/壓縮輸出模式編譯后：
html{
background-color: #f3e1e1;
}
/*!
Author: 'gdream@126.com'.
*/變量以美元符號(hào)開(kāi)頭，賦值方法與 CSS 屬性的寫(xiě)法一樣
$width: 1600px;
$pen-size: 3em;直接使用變量的名稱即可調(diào)用變量
#app {
height: $width;
font-size: $pen-size;
}變量支持塊級(jí)作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量），不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）。將局部變量轉(zhuǎn)換為全局變量可以添加 !global 聲明
#foo {
$width: 5em !global;
width: $width;
}
#bar {
width: $width;
}編譯后：
#foo {
width: 5em;
}
#bar {
width: 5em;
}SassScript 支持 7 種主要的數(shù)據(jù)類型：
SassScript 也支持其他 CSS 屬性值，比如 Unicode 字符集，或 !important 聲明。然而Sass 不會(huì)特殊對(duì)待這些屬性值，一律視為無(wú)引號(hào)字符串。
判斷數(shù)據(jù)類型的方式：type-of($value)
SassScript 支持 CSS 的兩種字符串類型：有引號(hào)字符串 (quoted strings)，和無(wú)引號(hào)字符串 (unquoted strings)。
$name: 'Tom Bob';
$container: "top bottom";
$what: heart;
// 注：在編譯 CSS 文件時(shí)不會(huì)改變其類型。只有一種情況例外，使用 `#{}` (interpolation) 時(shí)，有引號(hào)字符串將被編譯為無(wú)引號(hào)字符串，這樣便于在 mixin 中引用選擇器名SassScript支持兩種數(shù)字類型：帶單位數(shù)字和不帶單位數(shù)字。（可正可負(fù)可為零，可正可浮點(diǎn)）
$my-age: 19;
$your-age: 19.5;
$height: 120px;
// 注：?jiǎn)挝粫?huì)和數(shù)字當(dāng)做一個(gè)整體，進(jìn)行算數(shù)運(yùn)算只有一個(gè)取值null
$value: null;
// 注：由于它代表空，所以不能夠使用它與任何類型進(jìn)行算數(shù)運(yùn)算只有兩個(gè)取值：true和false
$a: true;
$b: false;
// 注：只有自身是false和null才會(huì)返回false，其他一切都將返回true通過(guò)空格或者逗號(hào)分隔的一系列的值。事實(shí)上，獨(dú)立的值也被視為數(shù)組 —— 只包含一個(gè)值的數(shù)組。索引從1開(kāi)始
$list0: 1px 2px 5px 6px;
$list1: 1px 2px, 5px 6px;
$list2: (1px 2px) (5px 6px);數(shù)組中可以包含子數(shù)組，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個(gè)數(shù)組的數(shù)組。如果內(nèi)外兩層數(shù)組使用相同的分隔方式，需要用圓括號(hào)包裹內(nèi)層，所以也可以寫(xiě)成 (1px 2px) (5px 6px)。變化是，之前的 1px 2px, 5px 6px 使用逗號(hào)分割了兩個(gè)子數(shù)組 (comma-separated)，而 (1px 2px) (5px 6px) 則使用空格分割(space-separated)。
當(dāng)數(shù)組被編譯為 CSS 時(shí)，Sass 不會(huì)添加任何圓括號(hào)（CSS 中沒(méi)有這種寫(xiě)法），所以 (1px 2px) (5px 6px) 與 1px 2px, 5px 6px 在編譯后的 CSS 文件中是完全一樣的，但是它們?cè)?Sass 文件中卻有不同的意義，前者是包含兩個(gè)數(shù)組的數(shù)組，而后者是包含四個(gè)值的數(shù)組。
用 () 表示不包含任何值的空數(shù)組（在 Sass 3.3 版之后也視為空的 map）。空數(shù)組不可以直接編譯成 CSS，比如編譯 font-family: () Sass 將會(huì)報(bào)錯(cuò)。如果數(shù)組中包含空數(shù)組或空值，編譯時(shí)將被清除，比如 1px 2px () 3px 或 1px 2px null 3px。
基于逗號(hào)分隔的數(shù)組允許保留結(jié)尾的逗號(hào)，這樣做的意義是強(qiáng)調(diào)數(shù)組的結(jié)構(gòu)關(guān)系，尤其是需要聲明只包含單個(gè)值的數(shù)組時(shí)。例如 (1,) 表示只包含 1 的數(shù)組，而 (1 2 3,) 表示包含 1 2 3 這個(gè)以空格分隔的數(shù)組的數(shù)組。
Maps必須被圓括號(hào)包圍，可以映射任何類型鍵值對(duì)（任何類型，包括內(nèi)嵌maps，不過(guò)不推薦這種內(nèi)嵌方式）
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)CSS原有顏色類型，十六進(jìn)制、RGB、RGBA、HSL、HSLA和色彩單詞
SCSS提供了內(nèi)置Colors函數(shù)，從而更方便地使用顏色
$color0: green;
$color1: lighten($color, 15%);
$color2: darken($color, 15%);
$color3: saturate($color, 15%);
$color4: desaturate($color, 15%);
$color5: (green + red);SassScript 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)，如果必要會(huì)在不同單位間轉(zhuǎn)換值
如果要保留運(yùn)算符號(hào)，則應(yīng)該使用插值語(yǔ)法
大前提：兩端必須為數(shù)字 或 前部分?jǐn)?shù)字后部分字符
返回值：true or false
作用范圍：相等運(yùn)算 ==, != 可用于所有數(shù)據(jù)類型
返回值：true or false
$a: 1==1px; // true
$b: "a"==a; // true
// 總結(jié)：
前部分為不帶引號(hào)數(shù)字時(shí)，對(duì)比的僅僅是數(shù)字部分；反之，忽略引號(hào)，要求字符一一對(duì)應(yīng)SassScript 支持布爾型的 and or 以及 not 運(yùn)算。
$a: 1>0 and 0>=5; // fasle
// 總結(jié)：
值與"and"、"or"和"not"之間必須要有空格，否則會(huì)被看做字符串顏色值的運(yùn)算是分段計(jì)算進(jìn)行的，也就是分別計(jì)算紅色，綠色，以及藍(lán)色的值
通過(guò) #{} 插值語(yǔ)句可以在選擇器、屬性名和屬性值中使用變量。
但大多數(shù)情況下，這樣使用屬性值可能還不如直接使用變量方便，但是使用 #{} 可以避免 Sass 運(yùn)行運(yùn)算表達(dá)式，直接編譯 CSS。
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: $name;
}
// 編譯后：
p.foo {
border-color: foo;
}&為父選擇器
a {
color: yellow;
&:hover{
color: green;
}
&:active{
color: blank;
}
}可以在變量的結(jié)尾添加 !default 給一個(gè)未通過(guò) !default 聲明賦值的變量賦值，此時(shí)，如果變量已經(jīng)被賦值，不會(huì)再被重新賦值，但是如果變量還沒(méi)有被賦值，則會(huì)被賦予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
// 編譯為：
#main {
content: "First content";
new-content: "First time reference"; }注意：變量是 null 空值時(shí)將視為未被 !default 賦值。
將局部變量提升為全局變量
如果 @extend 失敗會(huì)收到錯(cuò)誤提示，比如，這樣寫(xiě) a.important {@extend .notice}，當(dāng)沒(méi)有 .notice 選擇器時(shí)，將會(huì)報(bào)錯(cuò)，只有 h1.notice 包含 .notice 時(shí)也會(huì)報(bào)錯(cuò)，因?yàn)?h1 與 a 沖突，會(huì)生成新的選擇器。
如果要求 @extend 不生成新選擇器，可以通過(guò) !optional 聲明達(dá)到這個(gè)目的.
簡(jiǎn)而言之：當(dāng)@extend相關(guān)代碼出現(xiàn)語(yǔ)法錯(cuò)誤時(shí)，編譯器可能會(huì)給我們"亂"編譯為css，我們加上這個(gè)參數(shù)可以在出現(xiàn)問(wèn)題后不讓他編譯該部分代碼
Sass 拓展了 @import 的功能，允許其導(dǎo)入 SCSS 或 SASS 文件。被導(dǎo)入的文件將合并編譯到同一個(gè) CSS 文件中，另外，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。
通常，@import 尋找 Sass 文件并將其導(dǎo)入，但在以下情況下，@import 僅作為普通的 CSS 語(yǔ)句，不會(huì)導(dǎo)入任何 Sass 文件。
如果不在上述情況內(nèi)，文件的拓展名是 .scss 或 .sass，則導(dǎo)入成功。沒(méi)有指定拓展名，Sass 將會(huì)試著尋找文件名相同，拓展名為 .scss 或 .sass 的文件并將其導(dǎo)入。
@import "foo.scss";
@import "foo";
// 以上兩種方式均可
// 以下方式均不可行
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);Sass 允許同時(shí)導(dǎo)入多個(gè)文件，例如同時(shí)導(dǎo)入 rounded-corners 與 text-shadow 兩個(gè)文件：
@import "rounded-corners", "text-shadow";導(dǎo)入文件也可以使用 #{ } 插值語(yǔ)句，但不是通過(guò)變量動(dòng)態(tài)導(dǎo)入 Sass 文件，只能作用于 CSS 的 url() 導(dǎo)入方式：
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
// 編譯為：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");如果你有一個(gè) SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯為一個(gè) CSS 文件， 這時(shí)，你就可以在文件名前面加一個(gè)下劃線，就能避免被編譯。這將告訴 Sass 不要把它編譯成 CSS 文件。然后，你就可以像往常一樣引入這個(gè)文件了，而且還可以省略掉文件名前面的下劃線。
除此之外，還支持嵌套 @import,但是不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點(diǎn)額外的功能：允許其在 CSS 規(guī)則中嵌套。如果 @media 嵌套在 CSS 規(guī)則內(nèi)，編譯時(shí)，@media 將被編譯到文件的最外層，包含嵌套的父選擇器。這個(gè)功能讓 @media 用起來(lái)更方便，不需要重復(fù)使用選擇器，也不會(huì)打亂 CSS 的書(shū)寫(xiě)流程。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
// 編譯為
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
@media`的 queries 允許互相嵌套使用，編譯時(shí)，Sass 自動(dòng)添加 `and
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
// 編譯為：
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }@media 甚至可以使用 SassScript（比如變量，函數(shù)，以及運(yùn)算符）代替條件的名稱或者值
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
// 編譯為：
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px; } }@extend即繼承。在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候常常遇到這種情況：一個(gè)元素使用的樣式與另一個(gè)元素完全相同，但又添加了額外的樣式。
總的來(lái)看：支持層疊繼承、多繼承、允許延伸任何定義給單個(gè)元素的選擇器（但是允許不一定好用）
a. 基本延伸
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 上面代碼的意思是將 .error 下的所有樣式繼承給 .seriousError，border-width: 3px; 是單獨(dú)給 .seriousError 設(shè)定特殊樣式，這樣，使用 .seriousError 的地方可以不再使用 .error。@extend 的作用是將重復(fù)使用的樣式 (.error) 延伸 (extend) 給需要包含這個(gè)樣式的特殊樣式（.seriousError）
注意理解以下情況：
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
// .error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }當(dāng)合并選擇器時(shí)，@extend 會(huì)很聰明地避免無(wú)謂的重復(fù)，.seriousError.seriousError 將編譯為 .seriousError，不能匹配任何元素的選擇器也會(huì)刪除。
b. 延伸復(fù)雜的選擇器：Class 選擇器并不是唯一可以被延伸 (extend) 的，Sass 允許延伸任何定義給單個(gè)元素的選擇器，比如 .special.cool，a:hover 或者 a.user[href^="http://"] 等
c. 多重延伸：同一個(gè)選擇器可以延伸給多個(gè)選擇器，它所包含的屬性將繼承給所有被延伸的選擇器
d. 繼續(xù)延伸：當(dāng)一個(gè)選擇器延伸給第二個(gè)后，可以繼續(xù)將第二個(gè)選擇器延伸給第三個(gè)
e.*選擇器列：暫時(shí)不可以將選擇器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸給其他元素，但是，卻可以將其他元素延伸給選擇器列。
盡量不使用合并選擇器列，因?yàn)槿绻麘{個(gè)人推理的話，會(huì)出現(xiàn)排列組合的情況，所以SASS編譯器只會(huì)保留有用的組合形式，但依舊會(huì)存在排列組合的情況，有可能會(huì)留下隱患。
f. 在指令中延伸
在指令中使用 @extend 時(shí)（比如在 @media 中）有一些限制：Sass 不可以將 @media 層外的 CSS 規(guī)則延伸給指令層內(nèi)的 CSS.
g. %placeholder為選擇器占位符，配合@extend-Only選擇器使用。
效果：只定義了樣式，但不會(huì)對(duì)原有選擇器匹配的元素生效
// example1:
%img {
color: red;
}
.path{
@extend %img;
}
// 編譯后：
.path {
color: red;
}
// example2:
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
// 編譯后：
.notice {
@extend %extreme;
}
// 注：必須是"."和"#"選擇器The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors. It can either be used with a single inline selector
譯文：@at root指令使一個(gè)或多個(gè)規(guī)則在文檔的根發(fā)出，而不是嵌套在其父選擇器下。它可以與單個(gè)內(nèi)聯(lián)選擇器一起使用
且@at-root 使多個(gè)規(guī)則跳出嵌套
@at-root默認(rèn)情況下并不能使規(guī)則或者選擇器跳出指令，通過(guò)使用without和with可以解決該問(wèn)題
了解即可
用于調(diào)試，按標(biāo)準(zhǔn)錯(cuò)誤輸出流輸出
$size: 9px;
.file{
@debug $size;
}用于警告，按標(biāo)準(zhǔn)錯(cuò)誤輸出流輸出
用于報(bào)錯(cuò)，按標(biāo)準(zhǔn)錯(cuò)誤輸出流輸出
序列 | @-rules | 作用 |
1 | @import | 導(dǎo)入sass或scss文件 |
2 | @media | 用于將樣式規(guī)則設(shè)置為不同的媒體類型 |
3 | @extend | 以繼承的方式共享選擇器 |
4 | @at-root | 轉(zhuǎn)到根節(jié)點(diǎn) |
5 | @debug | 用于調(diào)試，按標(biāo)準(zhǔn)錯(cuò)誤輸出流輸出 |
6 | @warn | 用于警告，按標(biāo)準(zhǔn)錯(cuò)誤輸出流輸出 |
7 | @error | 用于報(bào)錯(cuò)，按標(biāo)準(zhǔn)錯(cuò)誤輸出流輸出 |
三元運(yùn)算符
表達(dá)式：if(expression, value1, value2)
p {
color: if(1 + 1=2, green, yellow);
}
// compile:
p{
color: green;}條件語(yǔ)句
當(dāng) @if 的表達(dá)式返回值不是 false 或者 null 時(shí)，條件成立，輸出 {} 內(nèi)的代碼
@if 聲明后面可以跟多個(gè) @else if 聲明，或者一個(gè) @else 聲明。如果 @if 聲明失敗，Sass 將逐條執(zhí)行 @else if 聲明，如果全部失敗，最后執(zhí)行 @else 聲明
循環(huán)語(yǔ)句
表達(dá)式：@for $var from <start> through <end> 或 @for $var from <start> to <end>
through 和 to 的相同點(diǎn)與不同點(diǎn)：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
// compile:
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }循環(huán)語(yǔ)句
表達(dá)式：@while expression
@while 指令重復(fù)輸出格式直到表達(dá)式返回結(jié)果為 false。這樣可以實(shí)現(xiàn)比 @for 更復(fù)雜的循環(huán)，只是很少會(huì)用到
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
// compile:
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }循環(huán)語(yǔ)句
表達(dá)式：$var in $vars
$var 可以是任何變量名
$vars` 只能是`Lists`或者`Maps混合指令（Mixin）用于定義可重復(fù)使用的樣式，避免了使用無(wú)語(yǔ)意的 class，比如 .float-left。混合指令可以包含所有的 CSS 規(guī)則，絕大部分 Sass 規(guī)則，甚至通過(guò)參數(shù)功能引入變量，輸出多樣化的樣式。
注意：這不是函數(shù)！沒(méi)有返回值！！
混合指令的用法是在 @mixin 后添加名稱與樣式，以及需要的參數(shù)（可選）。
// 格式：
@mixin name {
// 樣式....
}
// example：
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}使用 @include 指令引用混合樣式，格式是在其后添加混合名稱，以及需要的參數(shù)（可選）。
// 格式：
@include name;
// 注：無(wú)參數(shù)或參數(shù)都有默認(rèn)值時(shí)，帶不帶括號(hào)都可以
// example：
p {
@include large-text;
}
// compile:
p {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
}格式：按照變量的格式，通過(guò)逗號(hào)分隔，將參數(shù)寫(xiě)進(jìn)Mixin名稱后的圓括號(hào)里
支持默認(rèn)值；支持多參數(shù)；支持不定參數(shù)；支持位置傳參和關(guān)鍵詞傳參
@mixin mp($width) {
margin: $width;
}
body {
@include mp(300px);
}@mixin mp($width) {
margin: $width;
}
body {
@include mp($width: 300px);
}@mixin mp($width: 500px) {
margin: $width;
}
body {
@include mp($width: 300px);
// or
@include mp(300px);
}官方：Variable Arguments
譯文：參數(shù)變量
有時(shí)，不能確定混合指令需要使用多少個(gè)參數(shù)。這時(shí)，可以使用參數(shù)變量 … 聲明（寫(xiě)在參數(shù)的最后方）告訴 Sass 將這些參數(shù)視為值列表處理
@mixin mar($value...) {
margin: $value;
}在引用混合樣式的時(shí)候，可以先將一段代碼導(dǎo)入到混合指令中，然后再輸出混合樣式，額外導(dǎo)入的部分將出現(xiàn)在 @content 標(biāo)志的地方
可以看作參數(shù)的升級(jí)版
@mixin example {
html {
@content;
}
}
@include example{
background-color: red;
.logo {
width: 600px;
}
}
// compile:
html {
background-color: red;
}
html .logo {
width: 600px;
}索引第一個(gè)為1，最后一個(gè)為-1；切片兩邊均為閉區(qū)間
函數(shù)名和參數(shù)類型 | 函數(shù)作用 |
quote($string) | 添加引號(hào) |
unquote($string) | 除去引號(hào) |
to-lower-case($string) | 變?yōu)樾?xiě) |
to-upper-case($string) | 變?yōu)榇髮?xiě) |
str-length($string) | 返回$string的長(zhǎng)度(漢字算一個(gè)) |
str-index($string，$substring) | 返回$substring在$string的位置 |
str-insert($string, $insert, $index) | 在$string的$index處插入$insert |
str-slice($string, $start-at, $end-at） | 截取$string的$start-at和$end-at之間的字符串 |
函數(shù)名和參數(shù)類型 | 函數(shù)作用 |
percentage($number) | 轉(zhuǎn)換為百分比形式 |
round($number) | 四舍五入為整數(shù) |
ceil($number) | 數(shù)值向上取整 |
floor($number) | 數(shù)值向下取整 |
abs($number) | 獲取絕對(duì)值 |
min($number...) | 獲取最小值 |
max($number...) | 獲取最大值 |
random($number?:number) | 不傳入值：獲得0-1的隨機(jī)數(shù)；傳入正整數(shù)n：獲得0-n的隨機(jī)整數(shù)（左開(kāi)右閉） |
函數(shù)名和參數(shù)類型 | 函數(shù)作用 |
length($list) | 獲取數(shù)組長(zhǎng)度 |
nth($list, n) | 獲取指定下標(biāo)的元素 |
set-nth($list, $n, $value) | 向$list的$n處插入$value |
join($list1, $list2, $separator) | 拼接$list1和list2；$separator為新list的分隔符，默認(rèn)為auto，可選擇comma、space |
append($list, $val, $separator) | 向$list的末尾添加$val；$separator為新list的分隔符，默認(rèn)為auto，可選擇comma、space |
index($list, $value) | 返回$value值在$list中的索引值 |
zip($lists…) | 將幾個(gè)列表結(jié)合成一個(gè)多維的列表；要求每個(gè)的列表個(gè)數(shù)值必須是相同的 |
函數(shù)名和參數(shù)類型 | 函數(shù)作用 |
map-get($map, $key) | 獲取$map中$key對(duì)應(yīng)的$value |
map-merge($map1, $map2) | 合并$map1和$map2，返回一個(gè)新$map |
map-remove($map, $key) | 從$map中刪除$key，返回一個(gè)新$map |
map-keys($map) | 返回$map所有的$key |
map-values($map) | 返回$map所有的$value |
map-has-key($map, $key) | 判斷$map中是否存在$key，返回對(duì)應(yīng)的布爾值 |
keywords($args) | 返回一個(gè)函數(shù)的參數(shù)，并可以動(dòng)態(tài)修改其值 |
函數(shù)名和參數(shù)類型 | 函數(shù)作用 |
type-of($value) | 返回$value的類型 |
unit($number) | 返回$number的單位 |
unitless($number) | 判斷$number是否帶單位，返回對(duì)應(yīng)的布爾值 |
comparable($number1, $number2) | 判斷$number1和$number2是否可以做加、減和合并，返回對(duì)應(yīng)的布爾值 |
Sass 支持自定義函數(shù)，并能在任何屬性值或 Sass script 中使用
Params: 與Mixin一致
支持返回值
基本格式：