摘要:然后就可以在你的樣式表中通過(guò)來(lái)使用這個(gè)混合器,放在你希望的任何地方。如果像下邊這樣寫(xiě)最終生成編譯后混合器太好用了,一不小心你可能會(huì)過(guò)度使用。
世界上最成熟、最穩(wěn)定、最強(qiáng)大的專(zhuān)業(yè)級(jí)CSS擴(kuò)展語(yǔ)言! 我是在vue腳手架中安裝的 1 安裝
npm install --save-dev sass-loader //sass-loader依賴于node-sass npm install --save-dev node-sass2 配置: 在build文件夾下的webpack.base.conf.js的rules里面添加配置
// 如果你是.sass文件要設(shè)置 { test: /.sass$/, loaders: ["style", "css", "sass"] }3 在APP.vue中修改style標(biāo)簽 4 使用 (1) 變量
sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量,然后通過(guò)變量名來(lái)引用它們,而無(wú)需重復(fù)書(shū)寫(xiě)這一屬性值?;蛘?,對(duì)于僅使用過(guò)一 次的屬性值,你可以賦予其一個(gè)易懂的變量名,讓人一眼就知道這個(gè)屬性值的用途。
sass使用$符號(hào)來(lái)標(biāo)識(shí)變量(老版本的sass使用!來(lái)標(biāo)識(shí)變量。改成$是多半因?yàn)?b>!highlight-color看起來(lái)太丑了。)
$back: red #app color: $back // 變量聲明也分為全局變量和局部變量 // 這樣也是好用的 $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //編譯后 .selected { border: 1px solid #F90; }
在sass中使用-和_其實(shí)是一樣的 例如$link-color和$link_color其實(shí)指向的是同一個(gè)變量。
$link-color: blue; a { color: $link_color; } //編譯后 a { color: blue; }(2) 嵌套css規(guī)則
css中重復(fù)寫(xiě)選擇器是非常惱人的。如果要寫(xiě)一大串指向頁(yè)面中同一塊的樣式時(shí),往往需要 一遍又一遍地寫(xiě)同一個(gè)ID:
#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
像這種情況,sass可以讓你只寫(xiě)一遍,且使樣式可讀性更高。在Sass中,你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。sass在輸出css時(shí)會(huì)幫你把這些嵌套規(guī)則處理好,避免你的重復(fù)書(shū)寫(xiě)。
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } } /* 編譯后 */ #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }(2-1) 父選擇器的標(biāo)識(shí)符&;
使用后代選擇器和為了偽類(lèi)的時(shí)候可能就是比較麻煩了 不知道怎么寫(xiě)。這個(gè)時(shí)候&就派上用場(chǎng)了
article a { color: blue; &:hover { color: red } } // 編譯后 // 其實(shí)&相當(dāng)于是父級(jí) article a { color: blue } article a:hover { color: red }(2-2) 群組選擇器的嵌套;
在處理群組的時(shí)候只需要用,分割就好了,就能完美的解析不用內(nèi)么麻煩
.container { h1, h2, h3 {margin-bottom: .8em} } .container h1 {margin-bottom: .8em} .container h2 {margin-bottom: .8em} .container h3 {margin-bottom: .8em}
這種也是一樣的
nav, aside { a {color: blue} } //編譯后 nav a, aside a {color: blue}(2-3) 子組合選擇器和同層組合選擇器:>、+和~;
上邊這三個(gè)組合選擇器必須和其他選擇器配合使用,以指定瀏覽器僅選擇某種特定上下文中的元素。
article { // 同層全體組合選擇器 ~ article { border-top: 1px dashed #ccc } // 直接子元素 > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } // 同層相鄰組合選擇器 nav + & { margin-top: 0 } }(2-4) 嵌套屬性;
在sass中,除了CSS選擇器,屬性也可以進(jìn)行嵌套。盡管編寫(xiě)屬性涉及的重復(fù)不像編寫(xiě)選擇器那么糟糕,但是要反復(fù)寫(xiě)border-styleborder-widthborder-color以及border-*等也是非常煩人的。在sass中,你只需敲寫(xiě)一遍border:
nav { border: { style: solid; width: 1px; color: #ccc; } } // 編譯后 nav { border-style: solid; border-width: 1px; border-color: #ccc; }
你甚至還可以這樣寫(xiě)
nav { border: 1px solid #ccc { left: 0px; right: 0px; } } // 編譯后 nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }3 導(dǎo)入SASS文件;
css有一個(gè)特別不常用的特性,即@import規(guī)則,它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而,后果是只有執(zhí)行到@import時(shí),瀏覽器才會(huì)去下載其他css文件,這導(dǎo)致頁(yè)面加載起來(lái)特別慢。
sass也有一個(gè)@import規(guī)則,但不同的是,sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中,而無(wú)需發(fā)起額外的下載請(qǐng)求。
一般情況下,你反復(fù)聲明一個(gè)變量,只有最后一處聲明有效且它會(huì)覆蓋前邊的值。舉例說(shuō)明:
$link-color: blue; $link-color: red; a { color: $link-color; // red }
但是你不想這種情況你可以使用sass的!default標(biāo)簽可以實(shí)現(xiàn)這個(gè)目的。它很像css屬性中!important標(biāo)簽的對(duì)立面,不同的是!default用于變量,含義是:如果這個(gè)變量被聲明賦值了,那就用它聲明的值,否則就用這個(gè)默認(rèn)值。
5 注釋body { color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中 padding: 0; /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */ }6 混合器
如果你的整個(gè)網(wǎng)站中有幾處小小的樣式類(lèi)似(例如一致的顏色和字體),那么使用變量來(lái)統(tǒng)一處理這種情況是非常不錯(cuò)的選擇。但是當(dāng)你的樣式變得越來(lái)越復(fù)雜,你需要大段大段的重用樣式的代碼,獨(dú)立的變量就沒(méi)辦法應(yīng)付這種情況了。你可以通過(guò)sass的混合器實(shí)現(xiàn)大段樣式的重用。
混合器使用@mixin標(biāo)識(shí)符定義??瓷先ズ芟衿渌?b>CSS @標(biāo)識(shí)符,比如說(shuō)@media或者@font-face。這個(gè)標(biāo)識(shí)符給一大段樣式賦予一個(gè)名字,這樣你就可以輕易地通過(guò)引用這個(gè)名字重用這段樣式。下邊的這段sass代碼,定義了一個(gè)非常簡(jiǎn)單的混合器,目的是添加跨瀏覽器的圓角邊框。
@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
然后就可以在你的樣式表中通過(guò)@include來(lái)使用這個(gè)混合器,放在你希望的任何地方。@include調(diào)用會(huì)把混合器中的所有樣式提取出來(lái)放在@include被調(diào)用的地方。如果像下邊這樣寫(xiě):
notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; } //sass最終生成: // 編譯后 .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
混合器太好用了,一不小心你可能會(huì)過(guò)度使用。大量的重用可能會(huì)導(dǎo)致生成的樣式表過(guò)大,導(dǎo)致加載緩慢。所以,首先我們將討論混合器的使用場(chǎng)景,避免濫用。
(6-1)給混合器傳參;混合器并不一定總得生成相同的樣式。可以通過(guò)在@include混合器時(shí)給混合器傳參,來(lái)定制混合器生成的精確樣式。當(dāng)@include混合器時(shí),參數(shù)其實(shí)就是可以賦值給css屬性值的變量。如果你寫(xiě)過(guò)JavaScript,這種方式跟JavaScript的function很像:
@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
當(dāng)混合器被@include時(shí),你可以把它當(dāng)作一個(gè)css函數(shù)來(lái)傳參。如果你像下邊這樣寫(xiě):
a { @include link-colors(blue, red, green); } //Sass最終生成的是: a { color: blue; } a:hover { color: red; } a:visited { color: green; }
其實(shí)@mixin 的方法還有很多 可以官網(wǎng)查看
7 使用選擇器繼承來(lái)精簡(jiǎn)CSS;使用sass的時(shí)候,最后一個(gè)減少重復(fù)的主要特性就是選擇器繼承?;?b>Nicole Sullivan面向?qū)ο蟮?b>css的理念,選擇器繼承是說(shuō)一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過(guò)@extend語(yǔ)法實(shí)現(xiàn),如下代碼:
//通過(guò)選擇器繼承繼承樣式 .error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
.seriousError不僅會(huì)繼承.error自身的所有樣式,任何跟.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承,如下代碼:
//.seriousError從.error繼承樣式 .error a{ //應(yīng)用到.seriousError a color: red; font-weight: 100; } h1.error { //應(yīng)用到hl.seriousError font-size: 1.2rem; }
關(guān)于@extend有兩個(gè)要點(diǎn)你應(yīng)該知道。
跟混合器相比,繼承生成的css代碼相對(duì)更少。因?yàn)槔^承僅僅是重復(fù)選擇器,而不會(huì)重復(fù)屬性,所以使用繼承往往比混合器生成的css體積更小。如果你非常關(guān)心你站點(diǎn)的速度,請(qǐng)牢記這一點(diǎn)。
繼承遵從css層疊的規(guī)則。當(dāng)兩個(gè)不同的css規(guī)則應(yīng)用到同一個(gè)html元素上時(shí),并且這兩個(gè)不同的css規(guī)則對(duì)同一屬性的修飾存在不同的值,css層疊規(guī)則會(huì)決定應(yīng)用哪個(gè)樣式。相當(dāng)直觀:通常權(quán)重更高的選擇器勝出,如果權(quán)重相同,定義在后邊的規(guī)則勝出。
混合器本身不會(huì)引起css層疊的問(wèn)題,因?yàn)榛旌掀靼褬邮街苯臃诺搅薱ss規(guī)則中,而繼承存在樣式層疊的問(wèn)題。被繼承的樣式會(huì)保持原有定義位置和選擇器權(quán)重不變。通常來(lái)說(shuō)這并不會(huì)引起什么問(wèn)題,但是知道這點(diǎn)總沒(méi)有壞處。
以上就是我在官網(wǎng)所了解到的信息, 不算全面, 但是覺(jué)得在日常開(kāi)發(fā)肯定夠用了. 附上官網(wǎng)地址
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/90640.html
摘要:借助,我們通過(guò)非常簡(jiǎn)單的問(wèn)答形式,方便地初始化一個(gè)工程,完全不需要擔(dān)心繁復(fù)的配置等等。簡(jiǎn)單來(lái)說(shuō),就是不僅僅能初始化工程,理論上能夠初始化一切工程,包括,等等等等,只要你有一份能夠運(yùn)行的模板,就能夠通過(guò)進(jìn)行工程的初始化。 相信對(duì)于大部分使用過(guò)VueJS的同學(xué)來(lái)說(shuō),vue-cli是他們非常熟悉的一個(gè)工具。借助vue-cli,我們通過(guò)非常簡(jiǎn)單的問(wèn)答形式,方便地初始化一個(gè)vue工程,完全不需要...
摘要:簡(jiǎn)單項(xiàng)目腳手架地址使用技術(shù)棧需要學(xué)習(xí)的知識(shí)內(nèi)容相當(dāng)多,尤其是教程,官方腳手架雖然相當(dāng)完整齊全,但是修改起來(lái)還是挺花時(shí)間,于是自己參照網(wǎng)上的資料和之前做過(guò)的項(xiàng)目用到的構(gòu)建工具地去寫(xiě)了一個(gè)簡(jiǎn)單項(xiàng)目腳手架。 簡(jiǎn)單vue項(xiàng)目腳手架 github地址 使用技術(shù)棧 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1...
摘要:初來(lái)乍到,請(qǐng)多多關(guān)照也許這是第一套基于搭建基于的項(xiàng)目教程。年月初升級(jí)到了新的版本版,跟版本項(xiàng)目結(jié)構(gòu)發(fā)生了很大的改變,目錄結(jié)構(gòu)更簡(jiǎn)潔更科學(xué)。并且可以選配,在此之前配置略麻煩,是的超級(jí),靜態(tài)類(lèi)型,便捷的注解,使前端代碼優(yōu)雅。 前言 hello~ 大家好。 初來(lái)乍到,請(qǐng)多多關(guān)照 ?(??????)??也許這是第一套基于 vue-cli 3.x 搭建基于 typescript 的vue項(xiàng)目教程...
閱讀 559·2023-04-25 17:26
閱讀 1560·2021-08-05 09:58
閱讀 2019·2019-08-30 13:17
閱讀 1015·2019-08-28 17:52
閱讀 1127·2019-08-26 18:27
閱讀 1467·2019-08-26 14:05
閱讀 3682·2019-08-26 14:05
閱讀 1684·2019-08-26 10:45