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

この記事では主に vue Scaffolding で Sass を設定する方法を紹介しますので、参考にしてください。

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

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

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

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

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

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

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

vue scaffoldでインストールしました

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']
}
// 不知道为什么我配置完就打包不了, 不配置就是好用的

3 APPのスタイルタグを変更します。 in vue

<style lang="scss">

4 使用する

(1) 変数

1-1) 変数を使用する

人々に利益をもたらす Sass の重要な機能は、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;
}

次のように記述することもできます

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

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

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

4 デフォルトの変数値

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

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

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

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

5 コメント

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

6 ミキサー

Web サイト全体でいくつかの小さなスタイルの類似点 (一貫した色やフォントなど) がある場合、変数を使用してこの状況を均一に処理するのが最適です。悪い選択ではありません。しかし、スタイルがますます複雑になり、スタイル コードの大部分を再利用する必要がある場合、独立変数はこの状況に対処できません。 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元素使用方法？

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