Vue スキャフォールディングで Sass を構成する方法

この記事は主に vue Scaffolding で Sass を設定する方法を紹介しています。非常に優れた内容なので、参考にしてください。

世界で最も成熟し、安定しており、強力なプロ仕様の CSS 拡張言語!

CSS 互換
Sass は、CSS のすべてのバージョンと完全に互換性があります。これは厳密に管理されているため、利用可能な CSS ライブラリをシームレスに使用できます。

機能が豊富
Sass には、他の CSS 拡張言語よりも多くの機能と特徴があります。 Sass コア チームは、常に最前線に立つためにたゆまぬ努力を続けています。

Mature
Sass は、コアチームによって 8 年以上にわたって注意深く作成されてきました。

業界での評価
業界は何度も Sass を CSS 拡張言語として選択してきました。

大規模なコミュニティ
いくつかのテクノロジー企業と何百もの開発者が Sass をサポートしています。

フレームワーク
Sass で構築されたフレームワークは無数にあります。コンパス、バーボン、スージーなど。

vue Scaffoldingにインストールしました

1 インストール

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

2 設定: ビルドフォルダー配下のwebpack.base.conf.jsのルールに設定を追加します

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

app.vueのスタイルタグを変更する

<style lang="scss">

4の使用CSSに変数を導入するということです。繰り返し使用される CSS プロパティ値を変数として定義し、プロパティ値を繰り返し記述することなく、変数名を通じてそれらを参照できます。または、一度しか使用しない属性値には、その属性値の用途が一目でわかるように、わかりやすい変数名を付けることができます。

Sass は、変数を識別するために $ 記号を使用します (sass の古いバージョンでは、変数を識別するために! を使用します。$ への変更の主な理由は、! ハイライトカラーがあまりにも醜いためです。)

1-2) 変数宣言

$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) sass で使用される変数の名前付け

- と _ は実際には同じです。たとえば、$link-color と $link_color は実際には同じ変数を指します。

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

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

(2) ネストされた CSS ルール

CSS でセレクターを繰り返し記述するのは非常に面倒です。ページの同じブロックを指すスタイルの大きなリストを書きたい場合は、同じ ID を何度も何度も書き込む必要があることがよくあります:

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

この場合、sass を使用するとそれを書くことができます。一度だけ読みやすいスタイルにします セックスはより高いです。 Sass では、ロシア人形のようにルール ブロック内にルール ブロックをネストできます。 Sass は、CSS を出力するときにこれらのネストされたルールを処理して、繰り返しの書き込みを避けるのに役立ちます。

#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)親セレクターの識別子&;

子孫セレクターや疑似クラスを使う場合はもっと面倒かも知れません。この時に便利です

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

// 编译后

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

(2-2) グループセレクターのネスト;

グループを扱うときは、それを使用するだけで済み、分割するだけで完全に解析されます 必要ありません面倒

.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) サブコンビネーションセレクターと同レベルのコンビネーションセレクター: >、+、~;

上記の 3 つのコンビネーションセレクターは必ず他のセレクターと組み合わせて使用​​して、ブラウザーが特定のコンテキスト内の要素のみを選択することを指定します。

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 セレクターに加えて、属性もネストできます。属性の書き込みに伴う重複はセレクターの書き込みほど深刻ではありませんが、border-styleborder-widthborder-color と border-* を何度も書かなければならないのも非常に面倒です。 Sass では、境界線を 1 回入力するだけで済みます:

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

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

次のように書くこともできます

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

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

3 SASS ファイルのインポート

には、特に珍しい機能があります。これは @import ルールで、他の CSS ファイルを 1 つの CSS ファイルにインポートすることを許可します。ただし、その結果、ブラウザーは @import が実行された場合にのみ他の CSS ファイルをダウンロードすることになり、ページの読み込みが非常に遅くなります。

Sass にも @import ルールがありますが、異なる点は、sass の @import ルールは CSS ファイルを生成するときに関連ファイルをインポートすることです。これは、追加のダウンロード要求を開始する必要がなく、関連するすべてのスタイルが同じ CSS ファイルに結合されることを意味します。

4 デフォルトの変数値

通常、変数を繰り返し宣言すると、最後の宣言のみが有効となり、前の値は上書きされます。例:

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

しかし、これが起きたくない場合は、sass の !default タグを使用してこの目的を達成できます。これは、CSS 属性の !payment タグの反対とよく似ています。違いは、変数に !default が使用されることです。つまり、変数が宣言されて値が割り当てられている場合は、その宣言された値を使用し、それ以外の場合は、デフォルト値。

5 コメント

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

6 ミキサー

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

以上がVue スキャフォールディングで Sass を構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。