vue-cli支持scss
vue-cli中已經(jīng)內(nèi)置配置好了sass 以及l(fā)ass的配置励两。
如果需要的話直接下載兩個模塊就可以了
webpack它會根據(jù) lang 屬性自動用適當?shù)募虞d器去處理乐导。
npm install node-sass --save-dev
npm install sass-loader --save-dev
// webstrom在vue里的style使用
<style lang="scss" type="text/scss"></style>
當變量定義在css規(guī)則塊內(nèi)，那么該變量只能在此規(guī)則塊內(nèi)使用西傀。如果它們出現(xiàn)在任何形式的{...}塊中（如@media或者@font-face塊）壁公，情況也是如此
1. 聲明變量和引用
$warp-color: #f90;
.warp {
color: $warp-color;
}
//編譯后
.warp { color: #f90 }
2. css嵌套和群組選擇器
#app {
background: #ccc
.cont {
width: 1000px
}
p, h1, h2 {
color: #ff0
}
}
// 編譯后
#app { background: #ccc }
#app .cont { width: 1000px }
#app p { color: #f00 }
#app h1 { color: #ff0 }
#app h2 { color: #ff0 }
3. &標識符表示父元素
// 添加偽類時
#app a{ //&等價于#app a
&:hover {
color: #f00
}
&:after
}
//編譯后
#app a:hover { color:red }
// 在父選擇器之前添加選擇器
.cont{
width: 1000px
#app & {
color: #ff0
}
}
//編譯后
.cont { width: 1000px }
#app .cont { color: #ff0 }
4. 子組合選擇器和同層組合選擇器：>腔寡、+和~
> 選擇p元素下的直接子元素(span)
如：p > span 孫子元素不會選中
+ 選擇p元素后緊跟的span元素
如：p + span
~ 選擇p元素后的同層所有的span元素
如：p ~ span
#warp {
~ p { color: #000 }
> section { background: #eee }
.cont {
& + span {
color: #fff
}
}
}
//編譯后
#warp ~ p { color: #000 }
#warp > section { background: #eee }
#warp .cont + span { color: #fff }
5.嵌套屬性在 - 處斷開
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
div {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//編譯后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
div {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
6. 局部文件創(chuàng)建局部文件 _night-sky.scss
局部文件編譯時不會生成獨立css文件洪添，是專門為@import命令而編寫的sass文件垦页。
ass局部文件的文件名以下劃線開頭如:_night-sky.scss
這樣，sass就不會在編譯時單獨編譯這個文件輸出css干奢，而只把這個文件用作導入
導入文件@import "night-sky"(可以省略開頭_和后綴.scss)
局部文件可以被多個不同的文件引用痊焊。當一些樣式需要在多個頁面甚至多個項目中使用時非常有用
7. 設(shè)置默認變量值!default
如果希望使用可以定制修改sass庫文件中的某些值，可以使用!default:
含義: 如果這個變量被聲明賦值了忿峻，那就用它聲明的值薄啥，否則就用這個默認值.
即: 用戶在導入scss局部文件之前聲明了$warp-color變量,那么局部文件的$warp-color: #f90 !default無效;
$warp-color: #f90 !default;
.warp {
color: $warp-color;
}
8. 嵌套導入@import "bule_theme"
sass允許@import命令寫在css規(guī)則內(nèi) 如：
//_blue-theme.scss 局部文件
aside {
background: blue;
color: white;
}
#warp {
@import "blue-theme"
}
//編譯后
#warp {
aside {
background: blue;
color: white;
}
}
被導入的局部文件中定義的所有變量和混合器，也會在這個規(guī)則范圍內(nèi)生效逛尚。這些變量和混合器不會全局有效垄惧，這樣我們就可以通過嵌套導入只對站點中某一特定區(qū)域運用某種顏色主題或其他通過變量配置的樣式。
相當于塊級作用域
9. 導入原生css和靜默注釋// 注釋內(nèi)容
把原生css的后綴改為.scss, 即可直接導入(不會產(chǎn)生額外下載)
如果直接導入css.css文件绰寞，會造成瀏覽器解析css時額外的下載
// 這塊注釋內(nèi)容不會出現(xiàn)在生成的css中
/* 這塊會出現(xiàn)在生成的css中 */
10. 混合器創(chuàng)建 @mixin 名字, 調(diào)用 @include 名字
通過sass的混合器大段樣式的重用
// 名字必須語義化, 如下面的為: fillet
// 保證易讀性和可維護性
@mixin fillet {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
//調(diào)用
notice {
border: 2px solid #000;
@include fillet
}
混合器中可以包含css屬性到逊、規(guī)則、選擇器和選擇器屬性滤钱，如下代碼:
@mixin no-bullets {
list-style: none;
li {
margin-left: 10px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
// 解析為
ul.plain { color: #444; list-style:none }
ul.plain li { margin-left: 10px }
11. 給混合器傳參數(shù)
可以通過在@include混合器時給混合器傳參賦值給變量觉壶，來定制混合器生成的精確樣式
// 可以以$name: 值, 的形式聲明默認值(css屬性值、其他參數(shù)的引用)
@mixin link-colors(
$normal: #000,
$hover: #000,
$visited: #f00
){
color: $normal;
&:hover { color: $hover }
&:visited { color: $visited }
}
//調(diào)用
p{
@include link-colors(red)
}
//解析后
p { color: red; }
p:hover { color: #000 }
p:visited { color: #f00 }
- 選擇器繼承
@extend .class(類名)
.error {
border: 1px solid red;
background-color: #000;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 上面代碼相當于 元素2的class="seriousError error"
元素2會繼承元素1所有的樣式
