scss學習總結

vue安裝scss: 

npm install sass-loader node-sass --save-dev

注意事項：

<style lang="scss" scoped>

@import '../../style/common'; //必須加分號，否則會報錯

@import '../../style/ele';

</style>

在main.js文件中直接引入scss文件控制檯會報錯，解決方法：

由於vue-cli已經配置好scss的編譯，

webpack.base.conf.js刪掉下面的配置就能夠了：（不知爲什麼網上的教程裏都讓加這個）

{

　　test: /\.scss$/,

　　loaders: ["style", "css", "sass"]

}

 scss經常使用語法總結：

sass有兩種語法格式，scss和sass。

最先的sass語法，是縮進格式，用縮進代替花括號，用換行代替分號。

scss僅在css3的語法基礎上進行拓展，全部css3語法在scss中都是通用的，同時加入sass的特點功能。

變量

sass使用$符號來標識變量，能夠把反覆使用的css屬性值定義成變量，而後經過變量名引用它們

$bgColor: #00bcd4;

.fj {

　　color: #606266;

　　transition: color .3s;

　　&:hover {

　　　　color: $bgColor;

　　}

}

嵌套

.fj {

　　color: #606266;

　　transition: color .3s;

　　&:hover {

　　　　color: $bgColor;

　　}

}

混合

混合器使用@mixin標識符定義。

在樣式表中經過@include來使用這個混合器，@include調用會把混合器中的全部樣式提取出來放在@include被調用的地方。

導入

@import '../../style/common'; //必須加分號，否則會報錯

@import '../../style/ele';

註釋

sass提供了靜默註釋，其內容不會出如今生成的css文件中。靜默註釋的語法跟JavaScriptJava等類C的語言中單行註釋的語法相同，它們以//開頭，註釋內容直到行末。