柚子快報(bào)激活碼778899分享：認(rèn)識Sass

http://yzkb.51969.com/

?sass中文文檔：

Sass: Sass 文檔

1.???? sass的安裝步驟

? ? 1.????? 卸載沖突的Node.js ? ? (1)??? win+R輸入control,找到電腦上的卸載軟件，找到Node.js，右鍵”卸載” ? ? (2)??? win+R輸入cmd,輸入命令:node -v查看結(jié)果。 ? ? 如果提示: 'node' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序,說明【卸載成功】 ? ? 如果提示版本號，說明沒有卸載成功，需要繼續(xù)卸載 ? ? 2.????? 安裝插件： ? ? (1)??? 確保自己的電腦是聯(lián)網(wǎng)狀態(tài) ? ? (2)??? 打開HBuilder,點(diǎn)擊”工具”->”插件安裝”->”安裝新插件”->”前往插件市場安裝(P)” ? ? (3)??? 在打開的頁面中，找到Sass插件，點(diǎn)擊”下載” ? ? (4)??? 在打開的頁面中，選中”使用HBuilderX導(dǎo)入插件” ? ? (5)??? 此時(shí)提示需要登錄，如果沒有賬號，可以先注冊一個賬號再登錄 ? ? (6)??? 登錄后，繼續(xù)選擇頁面上的”使用HBuilderX導(dǎo)入插件” ? ? (7)??? 提示需要安裝HBuilder新版本，點(diǎn)擊”繼續(xù)” ? ? (8)??? 彈窗提示”是否打開HBuilder”選擇”打開” ? ? (9)??? HBuilder提示”是否安裝sass插件？”點(diǎn)擊”是”等待安裝成功即可 ? ? (10) 可以在”工具”->“插件安裝”->”已安裝插件”中找到sass，說明安裝成功 ? ?

2.???? sass的簡介

? ? 平時(shí)寫樣式使用的是CSS,sass可以看作是CSS的“預(yù)處理器”，是一種專門的CSS編程語言 ? ? 增加了變量、函數(shù)、嵌套、判斷、循環(huán)等等的用法，讓CSS編寫更便捷，清晰 ? ? ? ? sass的語法和版本 ? ? .sass是早期sass技術(shù)文件的后綴名，3.0版本之前一直使用的是它，文件編輯語法嚴(yán)格 ? ? 3.0版本之后，后綴名改成了.scss,這種后綴使用的就是CSS語法，學(xué)習(xí)成本大大降低 ? ? ? ? .scss文件必須通過編譯，生成同名的.css文件，才可以被html使用 ? ?

3.???? 入門案例

? ? 步驟： ? ? 1.????? 在目錄下創(chuàng)建scss文件夾 ? ? 2.????? 在scss文件夾下創(chuàng)建01.scss文件，代碼: body{ background-color:#f00; } ? ? 3.????? 選擇“工具”->“外部命令”->“scss/sass編譯”->“編譯scss/sass” ? ? 4.????? 會在scss文件夾下看到生成了一個同名的01.css文件，里面的內(nèi)容與scss文件內(nèi)容一致 ? ?

4.???? HBuilder中配置sass插件自動編譯效果

? ? 1.????? 選擇“工具”->“外部命令”->“scss/sass編譯”->“插件配置” ? ? 2.????? 在打開的package.json文件中，修改第25行和27行的內(nèi)容 ? ? "key":? "ctrl+s" 表示通過保存快捷鍵觸發(fā)? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ? ?? ?? ? ?? ? ?? ? ? ?? ? ? "onDidSaveExecution":? true 表示開啟自動編譯 ? ? 3.????? 保存修改后的配置文件，重啟HBuilder即可 ? ? 4.????? 可能有的同學(xué)重啟后自動編譯未生效，那么需要再自己手動編譯1~2次，就可以自動編譯了 ? ?

5.? sass規(guī)則

1.???? 注釋規(guī)則

? ? //comment注釋 ?sass的注釋方式，這種方式只能在scss文件中使用，不會編譯到CSS文件中 ? ? /*comment注釋*/ CSS的注釋方式，sass中可以使用，并且可以編譯到CSS文件中 ? ?

2.???? sass變量

? ? 為什么要使用變量？ ? ? 比如企業(yè)要設(shè)置主題色，改版時(shí)需要將所有的企業(yè)色改掉，如果我們使用了變量，那么只需要修改變量的顏色就可以改掉出現(xiàn)的所有色值，無需大量更改了 ? ? 所以，變量用于保存需要重復(fù)出現(xiàn)的值，方便代碼的后期維護(hù) ? ? ? ? 變量的加載和讀取順序 ? ? 必須先創(chuàng)建變量，再使用變量，否則報(bào)錯 ? ? ? ? 全局變量和局部變量 ? ? 全局變量是直接寫在scss文件中的 ? ? 局部變量是寫在某個選擇器的{}中的，只有在作用域內(nèi)才能使用，出了此選擇器就用不了了 ? ?

3.???? 父選擇器

? ? 使用&就代表它的上一層選擇器，在嵌套寫法中，使用父選擇器&進(jìn)行站位 ? ? 搭配偽類、偽元素一起使用，保證選擇器的結(jié)構(gòu)正確 ? ? ? ? .box { &：hover { } &>span{ } } ? ? 等價(jià)于： .box:hover{}?? .box>span{} ? ?

4.???? 插值語句

? ? 格式: #{變量名} ? ? 上面我們學(xué)習(xí)到，變量可以保存css的值，但是我們不能直接在css選擇器中直接使用變量 ? ? 如果需要在css選擇器中通過變量名插入變量的值，就需要用#{ }包裹變量名，才可以使用，否則報(bào)錯 ? ? $daohang:nav; $liebiao:list; .#{$daohang}-item { color:#f00;} .#{$liebiao}-item { color: #f00;} ? ?

5.???? 混合指令

? ? 混合指令的語法： ? ? @mixin 創(chuàng)建混合指令的語法，指令的名稱自定義，但注意不能用數(shù)字開頭 ? ? @include 使用混合指令的語法 ? ? ? ? 注意：混合指令可以定義參數(shù)，使用時(shí)要按照定義的順序依次傳參 ? ?

6.???? 繼承

? ? 格式：@extend 被繼承的選擇器 ? ? 繼承：一個元素想要使用另一個元素的全部樣式 ? ? 繼承后會編譯形成群組選擇器，更加優(yōu)化 ? ? 我們還可以同時(shí)繼承多個選擇器的樣式，使用逗號隔開 ? ? 注意:寫的是完整的選擇器，不是只有名字！ ?如：@extend .box2,.box4; ? ?

7.???? 占位符選擇器%

? ? 如：%juxing這是一個選擇器，這個選擇器的樣式可以被繼承走 ? ? 但注意:使用占位符的選擇器的樣式不會被編譯 ? ? %juxing { ??? width: 120px; ??? height: 40px; }? 這個樣式只在scss文件中有，不會編譯到css中！ .box5 { ??? @extend? %juxing; } ? ?

柚子快報(bào)激活碼778899分享：認(rèn)識Sass

http://yzkb.51969.com/

相關(guān)閱讀