This article mainly introduces the method of configuring Sass in vue scaffolding. The content is quite good. I will share it with you now and give it as a reference.

The most mature, stable and powerful professional-grade CSS extension language in the world!

Compatible with CSS
Sass is fully compatible with all versions of CSS. We strictly control this so you can seamlessly use any available CSS library.

Rich Features
Sass has more functions and features than any other CSS extension language. The Sass core team works tirelessly to keep it at the forefront.

Mature
Sass has been carefully crafted by its core team for more than 8 years.

INDUSTRY RECOGNITION
Time and time again, the industry has chosen Sass as the CSS extension language of choice.

HUGE COMMUNITY
Several technology companies and hundreds of developers provide support for Sass.

Frameworks
There are countless frameworks built with Sass. Such as Compass, Bourbon, and Susy.

I installed it in vue scaffolding

1 Installation

npm install --save-dev sass-loader
//sass-loader依賴于node-sass
npm install --save-dev node-sass

2 Configuration: Add configuration in the rules of webpack.base.conf.js in the build folder

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}
// 不知道為什么我配置完就打包不了, 不配置就是好用的

3 Modify the style tag in APP.vue

##

<style lang="scss">

4 Use

(1) Variables

1-1) Using variables

An important feature of sass that benefits people is that it introduces variables to css. You can define repeatedly used CSS property values ??as variables and then reference them through variable names without having to write the property value repeatedly. Or, for an attribute value that is only used once, you can give it an easy-to-understand variable name so that people can know the purpose of the attribute value at a glance.

Sass uses the $ symbol to identify variables (older versions of sass use! to identify variables. The change to $ is probably because! highlight-color looks too ugly.)

1-2 ) Variable declaration

$back: red
#app
 color: $back
// 變量聲明也分為全局變量和局部變量 

// 這樣也是好用的

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
 border: $highlight-border;
}

//編譯后

.selected {
 border: 1px solid #F90;
}

1-3) Variable naming

used in sass - and _ are actually the same, for example $link-color and $link_color actually point to the same variable.

$link-color: blue;
a {
 color: $link_color;
}

//編譯后
a {
 color: blue;
}

(2) Nested css rules

It is very annoying to write selectors repeatedly in css. If you want to write a large list of styles that point to the same block of the page, you often need to write the same ID over and over again:

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

In this case, sass This allows you to write only once and makes the style more readable. In Sass, you can nest rule blocks within rule blocks like a Russian doll. Sass will help you handle these nested rules when outputting CSS to avoid repeated writing.

#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) The identifier of the parent selector&;

may be when using descendant selectors and pseudo-classes It’s more troublesome and I don’t know how to write it. This time & comes in handy

article a {
 color: blue;
 &:hover { color: red }
}

// 編譯后

// 其實(shí)&相當(dāng)于是父級(jí)
article a { color: blue }
article a:hover { color: red }

(2-2) Nesting of group selectors;

In processing groups When you only need to use it, just segment it, and you can parse it perfectly without any trouble

.container {
 h1, h2, h3 {margin-bottom: .8em}
}

<!--編譯后-->

.container h1 {margin-bottom: .8em}
.container h2 {margin-bottom: .8em}
.container h3 {margin-bottom: .8em}

This is the same

nav, aside {
 a {color: blue}
}
//編譯后
nav a, aside a {color: blue}

(2-3) Subcombination selector and same-level combination selector:>, and~;

The above three combination selectors must be combined with Use other selectors to specify that the browser selects only elements within a specific context.

article {
 // 同層全體組合選擇器
 ~ article { border-top: 1px dashed #ccc }
 // 直接子元素
 > section { background: #eee }
 dl > {
 dt { color: #333 }
 dd { color: #555 }
 }
 // 同層相鄰組合選擇器
 nav + & { margin-top: 0 }
}

(2-4) Nested attributes;

In sass, in addition to CSS selectors, attributes can also be nested. Although the duplication involved in writing attributes is not as bad as writing selectors, it is also very annoying to have to write border-styleborder-widthborder-color and border-* over and over again. In sass, you only need to type the border once:

nav {
 border: {
 style: solid;
 width: 1px;
 color: #ccc;
 }
}

// 編譯后
nav {
 border-style: solid;
 border-width: 1px;
 border-color: #ccc;
}

You can even write like this

nav {
 border: 1px solid #ccc {
 left: 0px;
 right: 0px;
 }
}

// 編譯后
nav {
 border: 1px solid #ccc;
 border-left: 0px;
 border-right: 0px;
}

3 Import SASS files;

css has a particularly uncommon feature, the @import rule, which allows other css to be imported into a css file document. However, the consequence is that the browser will download other css files only when @import is executed, which causes the page to load very slowly.

Sass also has an @import rule, but the difference is that sass's @import rule imports related files when generating css files. This means that all related styles are combined into the same css file without the need to initiate additional download requests.

4 Default variable value

Generally, if you declare a variable repeatedly, only the last declaration is valid and it will overwrite the previous value. For example:

$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}

But if you don’t want this to happen, you can use the !default tag of sass to achieve this purpose. It is very similar to the opposite of the !important tag in CSS attributes. The difference is that !default is used for variables. The meaning is: if the variable is declared and assigned a value, then use its declared value, otherwise use the default value.

5 Comments

##

body {
 color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中
 padding: 0; /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */
}

6 Mixer

如果你的整個(gè)網(wǎng)站中有幾處小小的樣式類似（例如一致的顏色和字體），那么使用變量來(lái)統(tǒng)一處理這種情況是非常不錯(cuò)的選擇。但是當(dāng)你的樣式變得越來(lái)越復(fù)雜，你需要大段大段的重用樣式的代碼，獨(dú)立的變量就沒(méi)辦法應(yīng)付這種情況了。你可以通過(guò)sass的混合器實(shí)現(xiàn)大段樣式的重用。

混合器使用@mixin標(biāo)識(shí)符定義?？瓷先ズ芟衿渌腃SS @標(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ù)的主要特性就是選擇器繼承。基于Nicole Sullivan面向?qū)ο蟮腸ss的理念，選擇器繼承是說(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)有壞處。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

如何用vue快速開(kāi)發(fā)app的腳手架工具

關(guān)于vue如何引入sass全局變量的解析

The above is the detailed content of How to configure Sass in vue scaffolding. For more information, please follow other related articles on the PHP Chinese website!