首頁 > 文章 > web前端 > vue腳手架中配置Sass的方法

vue腳手架中配置Sass的方法

不言原創: 2018-06-29 14:49:271512瀏覽

這篇文章主要介紹了vue腳手架中配置Sass的方法，內容挺不錯的，現在分享給大家，也給大家做個參考。

世界上最成熟、最穩定、最強大的專業級CSS擴充語言！

相容CSS
Sass完全相容於所有版本的CSS。我們對此嚴格把控，所以你可以無縫地使用任何可用的CSS庫。

特性豐富
Sass擁有比其他任何CSS擴充語言更多的功能和特性。 Sass核心團隊不懈努力，一直使其保持領先。

成熟
Sass已經經過其核心團隊超過8年的精心打造。

業界認可
一次又一次地，業界把Sass當作首選CSS擴充語言。

社群龐大
數家科技企業和數百名開發者為Sass提供支援。

框架
有無數的框架使用Sass建構。例如Compass，Bourbon，和Susy。

我是在vue鷹架中安裝的

1 安裝

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

2 設定: 在build資料夾下的webpack.base.conf.js的rules裡面加入設定

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

3 在APP.vue中修改style標籤

<style lang="scss">

##4 使用

(1) 變數

1-1) 使用變數

sass讓人們受益的一個重要特性就是它為css引入了變數。你可以把重複使用的css屬性值定義成變量，然後透過變數名稱來引用它們，而無需重複書寫這一屬性值。或者，僅使用過一次的屬性值，你可以賦予其一個易懂的變數名，讓人一眼就知道這個屬性值的用途。

sass使用$符號來識別變數(舊版的sass使用!來標識變數。改成$是多半因為!highlight-color看起來太醜了。)

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) 子組合選擇器和同層組合選擇器：>、和~;

上邊這三個組合選擇器必須和其他選擇器搭配使用，以指定瀏覽器僅選擇某種特定上下文中的元素。

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中，你只需敲寫一遍border：

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檔案;

css有一個特別不常用的特性，即@import規則，它允許在一個css檔案中導入其他css文件。然而，後果是只有執行到@import時，瀏覽器才會去下載其他css文件，這導致頁面載入起來特別慢。

sass也有一個@import規則，但不同的是，sass的@import規則在產生css檔案時就把相關檔案匯入進來。這意味著所有相關的樣式被歸納到了同一個css檔案中，而無需發起額外的下載請求。

4 預設變數值

一般情況下，你反覆宣告一個變量，只有最後一個宣告有效且它會覆寫前邊的值。舉例說明：

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

但是你不想這種情況你可以使用sass的!default標籤可以達到這個目的。它很像css屬性中!important標籤的對立面，不同的是!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腳手架中配置Sass的方法

相關文章