How to configure Sass in vue scaffolding

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 }
}

// 编译后

// 其实&相当于是父级
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; // 这种注释内容不会出现在生成的css文件中
 padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

6 Mixer

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

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;
}

混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

(6-1)给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
 color: $normal;
 &:hover { color: $hover; }
 &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
 @include link-colors(blue, red, green);
}

//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

其实@mixin 的方法还有很多 可以官网查看

7 使用选择器继承来精简CSS;

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:

//通过选择器继承继承样式
.error {
 border: 1px solid red;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
 color: red;
 font-weight: 100;
}
h1.error { //应用到hl.seriousError
 font-size: 1.2rem;
}

关于@extend有两个要点你应该知道。

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何用vue快速开发app的脚手架工具

关于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!