So konfigurieren Sie Sass im Vue-Gerüst

In diesem Artikel wird hauptsächlich die Methode zur Konfiguration von Sass im Vue-Gerüst vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Die ausgereifteste, stabilste und leistungsstärkste professionelle CSS-Erweiterungssprache der Welt!

CSS-kompatibel
Sass ist vollständig kompatibel mit allen CSS-Versionen. Wir kontrollieren dies streng, damit Sie jede verfügbare CSS-Bibliothek nahtlos nutzen können.

Funktionsreich
Sass verfügt über mehr Funktionen und Features als jede andere CSS-Erweiterungssprache. Das Sass-Kernteam arbeitet unermüdlich daran, es an der Spitze zu halten.

Mature
Sass wird seit mehr als 8 Jahren von seinem Kernteam sorgfältig entwickelt.

Branchenanerkennung
Immer wieder hat sich die Branche für Sass als CSS-Erweiterungssprache ihrer Wahl entschieden.

Große Community
Mehrere Technologieunternehmen und Hunderte von Entwicklern unterstützen Sass.

Frameworks
Es gibt unzählige Frameworks, die mit Sass erstellt wurden. Wie Compass, Bourbon und Susy.

Ich habe es in Vue Scaffolding installiert

1 Installation

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

2 Konfiguration: webpack.base im Build-Ordner Konfiguration hinzufügen im Regeln von .conf.js

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

3 Ändern Sie das Style-Tag in APP.vue

<style lang="scss">

4 Verwenden Sie

(1) Variablen

1-1) Verwendung von Variablen

Ein wichtiges Merkmal von Sass, das den Menschen zugute kommt, besteht darin, dass es Variablen in CSS einführt. Sie können wiederholt verwendete CSS-Eigenschaftswerte als Variablen definieren und diese dann über Variablennamen referenzieren, ohne den Eigenschaftswert wiederholt schreiben zu müssen. Alternativ können Sie einem Attributwert, der nur einmal verwendet wird, einen leicht verständlichen Variablennamen geben, damit die Benutzer den Zweck des Attributwerts auf einen Blick erkennen können.

Sass verwendet das $-Symbol, um Variablen zu identifizieren (ältere Versionen von Sass verwenden !, um Variablen zu identifizieren. Die Änderung zu $ ​​liegt wahrscheinlich daran, dass! Highlight-Color zu hässlich aussieht.)

1-2 ) Variablendeklaration

$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) Variablenbenennung

, die in sass verwendet wird – und _ sind tatsächlich gleich. Beispielsweise verweisen $link-color und $link_color tatsächlich auf dieselbe Variable.

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

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

(2) Verschachtelte CSS-Regeln

Es ist sehr nervig, Selektoren wiederholt in CSS zu schreiben. Wenn Sie eine große Liste von Stilen schreiben möchten, die auf denselben Block der Seite verweisen, müssen Sie häufig immer wieder dieselbe ID schreiben:

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

In diesem Fall erlaubt Ihnen Sass, sie zu schreiben nur einmal und machen Sie den Stil lesbar. In Sass können Sie Regelblöcke wie eine russische Puppe in Regelblöcken verschachteln. Sass hilft Ihnen beim Umgang mit diesen verschachtelten Regeln bei der Ausgabe von CSS, um wiederholtes Schreiben zu vermeiden.

#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) Die Kennung des Elternselektors &;

Es kann problematischer sein, wenn Nachkommenselektoren und Pseudoklassen verwendet werden. Ich weiß nicht, wie man es schreibt. Zu diesem Zeitpunkt ist & praktisch

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

// 编译后

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

(2-2) Verschachtelung von Gruppenselektoren

Wenn Sie mit Gruppen arbeiten, müssen Sie es nur verwenden, es einfach teilen, und das war's kann ohne Probleme perfekt geparst werden

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

<!--编译后-->

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

Das ist derselbe

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

(2-3) Unterkombinationsselektor und gleichstufiger Kombinationsselektor: >, + und ~

Die oben genannten drei kombinierten Selektoren müssen in Verbindung mit anderen Selektoren verwendet werden, um anzugeben, dass der Browser nur Elemente in einem bestimmten Kontext auswählt.

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

(2-4) Verschachtelte Attribute;

In sass können zusätzlich zu CSS-Selektoren auch Attribute verschachtelt werden. Obwohl die Duplizierung beim Schreiben von Attributen nicht so schlimm ist wie beim Schreiben von Selektoren, ist es auch sehr ärgerlich, immer wieder border-styleborder-widthborder-color und border-* schreiben zu müssen. In sass müssen Sie den Rahmen nur einmal eingeben:

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

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

Sie können sogar so schreiben:

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

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

3 SASS-Datei importieren;

css Eine besonders ungewöhnliche Funktion ist die @import-Regel, die es einer CSS-Datei ermöglicht, andere CSS-Dateien zu importieren. Dies hat jedoch zur Folge, dass der Browser andere CSS-Dateien nur dann herunterlädt, wenn @import ausgeführt wird, was dazu führt, dass die Seite sehr langsam lädt.

Sass hat auch eine @import-Regel, aber der Unterschied besteht darin, dass die @import-Regel von sass beim Generieren von CSS-Dateien verwandte Dateien importiert. Dies bedeutet, dass alle zugehörigen Stile in derselben CSS-Datei zusammengefasst werden, ohne dass zusätzliche Download-Anfragen initiiert werden müssen.

4 Standardvariablenwert

Wenn Sie eine Variable wiederholt deklarieren, ist im Allgemeinen nur die letzte Deklaration gültig und der vorherige Wert wird überschrieben. Zum Beispiel:

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

Aber wenn Sie nicht möchten, dass dies passiert, können Sie das !default-Tag von sass verwenden, um diesen Zweck zu erreichen. Es ist dem Gegenteil des !important-Tags in CSS-Attributen sehr ähnlich. Der Unterschied besteht darin, dass !default für Variablen verwendet wird. Die Bedeutung ist: Wenn die Variable deklariert und ihr ein Wert zugewiesen wird, verwenden Sie andernfalls den Standardwert.

5 Kommentare

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

6 Mixer

Wenn es auf Ihrer Website mehrere kleine ähnliche Stile gibt (z. B. einheitliche Farben). und Schriftarten), dann ist die Verwendung von Variablen zur einheitlichen Behandlung dieser Situation eine sehr gute Wahl. Wenn Ihre Stile jedoch immer komplexer werden und Sie große Abschnitte des Stilcodes wiederverwenden müssen, können unabhängige Variablen diese Situation nicht bewältigen. Mit dem Sass-Mixer können Sie große Abschnitte von Stilen wiederverwenden.

混合器使用@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元素使用方法？

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie Sass im Vue-Gerüst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!