Comment configurer l'échafaudage Sass dans vue

Cet article présente principalement la méthode de configuration de Sass dans vue scaffolding. Maintenant, je le partage avec vous et le donne comme référence.

Le langage d'extension CSS de qualité professionnelle le plus mature, stable et puissant au monde !

Compatible CSS
Sass est entièrement compatible avec toutes les versions de CSS. Nous contrôlons strictement cela afin que vous puissiez utiliser de manière transparente n'importe quelle bibliothèque CSS disponible.

Riche en fonctionnalités
Sass a plus de fonctions et de fonctionnalités que tout autre langage d'extension CSS. L'équipe principale de Sass travaille sans relâche pour la maintenir à l'avant-garde.

Mature
Sass a été soigneusement conçu par son équipe principale depuis plus de 8 ans.

Reconnaissance de l'industrie
À maintes reprises, l'industrie a choisi Sass comme langage d'extension CSS de choix.

Grande communauté
Plusieurs entreprises technologiques et des centaines de développeurs soutiennent Sass.

Frameworks
Il existe d'innombrables frameworks construits avec Sass. Tels que Compass, Bourbon et Susy.

Je l'ai installé dans vue scaffolding

1 Installation

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

2 Configuration : webpack dans le dossier build Ajouter une configuration

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

3 dans les règles de .base.conf.js Modifier la balise de style dans APP.vue

<style lang="scss">

4 Utiliser.

(1) Variables

1-1) Utiliser des variables

Une caractéristique importante de Sass qui profite aux gens est qu'elle introduit des variables dans le CSS. Vous pouvez définir des valeurs de propriété CSS utilisées à plusieurs reprises en tant que variables, puis les référencer via des noms de variables sans avoir à écrire la valeur de propriété à plusieurs reprises. Ou, pour une valeur d'attribut qui n'est utilisée qu'une seule fois, vous pouvez lui donner un nom de variable facile à comprendre afin que les utilisateurs puissent connaître en un coup d'œil l'objectif de la valeur d'attribut.

Sass utilise le symbole $ pour identifier les variables (les anciennes versions de sass utilisent ! pour identifier les variables. Le changement en $ est probablement dû au fait que la couleur de surbrillance a l'air trop moche.)

1-2 ) Déclaration de variable

$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) Nom de variable

utilisé dans sass - et _ sont en fait les mêmes. Par exemple, $link-color et $link_color pointent en fait vers la même chose. variable.

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

//编译后
a {
 color: blue;
}

(2) Règles CSS imbriquées

Il est très ennuyeux d'écrire des sélecteurs à plusieurs reprises en CSS. Si vous souhaitez écrire une grande liste de styles qui pointent vers le même bloc de la page, vous devez souvent écrire le même identifiant encore et encore :

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

Dans ce cas, Sass vous permet de écrivez-le une seule fois et rendez le style plus lisible. Dans Sass, vous pouvez imbriquer des blocs de règles dans des blocs de règles comme une poupée russe. Sass vous aidera à gérer ces règles imbriquées lors de la sortie CSS pour éviter une écriture répétée.

#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) Identifiant du sélecteur parent&;

Cela peut être plus gênant lors de l'utilisation de sélecteurs descendants et de pseudo-classes. Je ne sais pas comment l'écrire. Pour le moment, & est utile

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

// 编译后

// 其实&相当于是父级
article a { color: blue }
article a:hover { color: red }

(2-2) L'imbrication des sélecteurs de groupe

ne doit être utilisé que lorsqu'il s'agit de groupes, il suffit de le diviser, il peut être analysé ; parfaitement sans aucun problème

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

<!--编译后-->

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

C'est la même chose

nav, aside {
 a {color: blue}
}
//编译后
nav a, aside a {color: blue}

(2-3) Sélecteur de sous-combinaison et sélecteur de combinaison de même niveau :> ;, + et ~;

Les trois sélecteurs combinés ci-dessus doivent être utilisés conjointement avec d'autres sélecteurs pour spécifier que le navigateur sélectionne uniquement les éléments dans un contexte spécifique.

article {
 // 同层全体组合选择器
 ~ article { border-top: 1px dashed #ccc }
 // 直接子元素
 > section { background: #eee }
 dl > {
 dt { color: #333 }
 dd { color: #555 }
 }
 // 同层相邻组合选择器
 nav + & { margin-top: 0 }
}

(2-4) Attributs imbriqués ;

Dans sass, en plus des sélecteurs CSS, les attributs peuvent également être imbriqués. Bien que la duplication impliquée dans l'écriture des attributs ne soit pas aussi grave que l'écriture des sélecteurs, il est également très ennuyeux de devoir écrire border-styleborder-widthborder-color et border-* encore et encore. En sass, vous n'avez besoin de taper la bordure qu'une seule fois :

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

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

Vous pouvez même écrire comme ceci

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

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

3 Importer le fichier SASS ;

CSS possède une fonctionnalité particulièrement rare, la règle @import, qui permet à un fichier CSS d'importer d'autres fichiers CSS. Cependant, la conséquence est que le navigateur téléchargera d'autres fichiers CSS uniquement lorsque @import est exécuté, ce qui ralentit le chargement de la page.

Sass a également une règle @import, mais la différence est que la règle @import de sass importe les fichiers associés lors de la génération de fichiers CSS. Cela signifie que tous les styles associés sont combinés dans le même fichier CSS sans qu'il soit nécessaire de lancer des demandes de téléchargement supplémentaires.

4 Valeur de variable par défaut

Généralement, lorsque vous déclarez une variable à plusieurs reprises, seule la dernière déclaration est valide et elle écrasera la valeur précédente. Par exemple :

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

Mais si vous ne voulez pas que cela se produise, vous pouvez utiliser la balise !default de sass pour atteindre cet objectif. C'est très similaire à l'opposé de la balise !important dans les attributs CSS. La différence est que !default est utilisé pour les variables. La signification est la suivante : si la variable est déclarée et qu'une valeur lui est attribuée, utilisez sa valeur déclarée, sinon utilisez la. valeur par défaut.

5 commentaires

body {
 color: #333; // 这种注释内容不会出现在生成的css文件中
 padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

6 Mixer

Si vous en avez quelques petits tout au long de votre site Les styles sont similaires (comme des couleurs et des polices cohérentes), alors utiliser des variables pour gérer cette situation de manière uniforme est un bon choix. Mais lorsque vos styles deviennent de plus en plus complexes et que vous devez réutiliser de grandes sections de code de style, les variables indépendantes ne peuvent pas faire face à cette situation. Vous pouvez réutiliser de grandes sections de styles via le mélangeur 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规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javascript中如何实现最长公共子序列

关于vue如何实现动态加载图片src

关于vue2.0中datepicker使用方法

JavaScript调停者模式（详细教程）

在jQuery中有关Dom元素使用方法？

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!