css選擇器的分組和嵌套，為什么在css里做的頁面會分開？
因為頁面顯示的是內(nèi)容和相應(yīng)的表單，而CSS可以很好的將這些內(nèi)容進行分塊組裝后，再按照整體的布局進行調(diào)整，可以在后期的改版等方面能夠不動前面的內(nèi)容只是更改布局以及背景、圖片、表現(xiàn)形式等，這樣更便于優(yōu)化，所以才進行了分離；
其實不分離的話就是說每個頁面你都需要給在里面嵌入CSS內(nèi)部樣式，這樣你要是每個頁面的樣式都一樣，那每個頁面的樣式都要重新COPY一邊，對于后面的修改來說更改量太大了，而用CSS和頁面分離的方式可以只要修改一個CSS文件來使得整個網(wǎng)站的樣式進行優(yōu)化，便于修改。
sass系統(tǒng)產(chǎn)品介紹？
Sass是CSS的預(yù)處理器，它提供了許多便利的寫法方法
可以使用變量，常量，嵌套，函數(shù)，混合，繼承等功能，讓css的開發(fā)變得更加簡單可維護。
直接寫出來的sass文件其實就是普通的文本文件，以.sass或.scss作為文件后綴名。
里面可以直接使用css語法以及sass特有的語法特性，完成后通常需要經(jīng)過編譯成合法的css文件以供瀏覽器使用。
sass的安裝
sass基于Ruby語言開發(fā)而成，因此安裝sass前需要安裝Ruby。
安裝完成后需測試安裝有沒有成功,運行CMD輸入以下命令：
ruby -v
如安裝成功會打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
Ruby自帶一個叫做RubyGems的系統(tǒng)，用來安裝基于Ruby的軟件。我們可以使用這個系統(tǒng)來 輕松地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你需要輸入下面的命令：
安裝如下(如mac安裝遇到權(quán)限問題需加 sudo gem install sass)
gem install sass
gem install compass
在每一個安裝過程中，你都會看到如下輸出：
Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed
安裝完成之后，你應(yīng)該通過運行下面的命令來確認(rèn)應(yīng)用已經(jīng)正確地安裝到了電腦中：
sass -v
Sass 3.x.x (Selective Steve)
compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
sass的編譯
1.命令行編譯;
//單文件轉(zhuǎn)換命令
sass input.scss output.css
//單文件監(jiān)聽命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目錄，你也可以告訴sass監(jiān)聽整個目錄：
sass --watch app/sass:public/stylesheets
2.編譯工具Koala
3.使用vscode中的Live Sass Compiler插件來實現(xiàn)scss文件的實時編譯
變量
Sass 讓人們受益的一個重要特性就是它為 CSS 引入了變量。你可以把反復(fù)使用的 CSS 屬性值 定義成變量，然后通過變量名來引用它們，而無需重復(fù)書寫這一屬性值。
變量的定義是以$符號開頭，加上變量名，比如：
$text-warning: red;
$border-radius: 5px;
.tip {
color: $text-warning;
border: 1px solid $border-radius;
}
變量也可以通過加減乘除等運算符號進行計算，比如：
$font-base: 10px;
.article {
font-size: $font-base * 2 - 4px;
border-width: $font-base / 10;
}
變量的注意事項
變量需要提前聲明才能使用，因為編譯是從上往下進行的，如果在還未聲明變量的地方使用，會找不到這個變量。
變量都是全局變量，如果在大括號內(nèi)部定義的變量則屬于局部變量。
嵌套
通常所用到的選擇器嵌套是這樣的，將新的選擇器放到父級選擇器當(dāng)中，并且可以無限多級嵌套。
繼承
如果存在兩個class，他們有一些不同但又有許多相似之處，以前的做法可能是把所有樣式重復(fù)聲明兩次。但是有sass之后更好的做法是創(chuàng)建一個基礎(chǔ)的class，然后在第二個class中用@extend繼承它，同時還可以添加一些額外的樣式，或者對某些樣式進行重寫。比如我們之前學(xué)過bootstrap的按鈕的構(gòu)建思想，是對基礎(chǔ)樣式進行附加和重寫，而現(xiàn)在想要定義自己的樣式時就可以很方便地進行這一操作了。首先聲明一個標(biāo)準(zhǔn)樣式的class，然后繼承這個樣式，然后設(shè)置不同的主題色：
混合
當(dāng)出現(xiàn)大段大段重用樣式代碼時，獨立的變量就難以應(yīng)付，這個時候可以通過sass的混合器@mixin 和 @include 實現(xiàn)大段樣式的重用。在定義mixin時，需要在前面添加@符號，使用時需要用@include來引用該@mixin：
導(dǎo)入
導(dǎo)入規(guī)則可以從外部文件導(dǎo)入mixin混合器等等。在sass中有一個命名慣例，被導(dǎo)入的樣式文件名用下劃線做前綴。導(dǎo)入的語法是@import “xxx”，這里的xxx不需要帶文件后綴和下劃線前綴。也就是說導(dǎo)入“_style.sass”或者“_style.scss”的時候，只需要寫@import “style”就可以了：
1.為什么要使用SASS？
它是預(yù)處理語言，它為CSS提供縮進語法（它自己的語法）。
它允許更有效地編寫代碼和易于維護。
它是包含CSS的所有功能的CSS的超集，是一個開源的預(yù)處理器，以 Ruby 編碼。
它提供了比平面CSS好的結(jié)構(gòu)格式的文檔樣式。
它使用可重復(fù)使用的方法，邏輯語句和一些內(nèi)置函數(shù)，如顏色操作，數(shù)學(xué)和參數(shù)列表。
2.列出SASS的一些功能？
它是更穩(wěn)定，強大，與CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被稱為CSS的語法糖，這意味著它使用戶更容易閱讀或表達(dá)的東西更清楚。
它使用自己的語法并編譯為可讀的CSS。
你可以在更少的時間內(nèi)輕松地編寫CSS代碼。
它是一個開源的預(yù)處理器，被解釋為CSS。
3.SASS的優(yōu)點是什么？
它允許在編程結(jié)構(gòu)中編寫干凈的CSS。
它有助于編寫CSS更快。
它是CSS的超集，幫助設(shè)計師和開發(fā)人員更有效率和快速地工作。
由于Sass兼容所有版本的CSS，我們可以使用任何可用的CSS庫。
可以使用嵌套語法和有用的函數(shù)，如顏色操作，數(shù)學(xué)和其他值。
css選擇器加是什么？
css選擇器加.是類選擇器，選擇與class屬性相匹配的類名