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