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的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。