scss总结

写在前面:本文章主要记录一些scss使用过程中,一些常用的报错及应对方案,以及在新项目的如何全局使用scss,还有就是scss的一些常用语法

1. 安装sass。

npm i -D sass sass-loader(安装sass和sass编译器)

报错处理方案:

1. 切换下载源:

//查看源
npm config get registry
//更换源
npm config set registry https://registry.npmjs.org
//淘宝源
npm config set registry https://registry.npm.taobao.org
复制代码

npm不能安装输入: npm config set strict-ssl false

2. 安装对应版本sass和loader

sass-loader 4.1.1，node-sass 4.3.0 
sass-loader 7.0.3，node-sass 4.7.2 
sass-loader 7.3.1，node-sass 4.7.2 
sass-loader 7.3.1，node-sass 4.14.1
npm install sass-loader@版本号 node-sass@版本号  --save-dev  //安装对应的版本
复制代码

2. 使用Scss

3. 安装插件实现全局变量

npm install sass-resources-loader –save-dev

4. vue.config.js配置css

{
    loaderOptions: {
    scss: {
        //data: `@import "@/styles/_variable.scss";`//换成下面的
    data: `@import "@/style/global.scss";`
      }
    }
  }
复制代码

3. 语法

1. 嵌套写法

.hello{
    //选择器嵌套
    .box{
        color:red;
    }
    h3{
        color:yellow;
    }
    //选择器嵌套
    border:{
        top : red solid 1px;
        right : blue solid 2px;
    }
    //选择父元素
    &:hover{
        color:red;
    }
}
复制代码

2. 继承@extend

.class1{
    color：red;
}
.class2{
    @extend .class1;
    font-size : 14px;
}
复制代码

3. 模板字符串

通过 #{$color} 可以在scss里属性名属性值里面使用变量

4. 选择器占位符

%placeholder , 配合@extend-Only选择器使用.

5. 循环

$flex-jc:(fs:flex-start,
	center:center,
	fe:flex-end,
	sb:space-between,
	sa:space-around);
$flex-ai:(fs:flex-start,
	center:center,
	fe:flex-end,
);
//each循环 , key和val分别表示上面数据键和值,#{}是插值表达式
@each $key,$val in $flex-jc {
	.jc-#{$key} {
		justify-content: $val;
	}
}
复制代码

6. 混合

关于sprite图

处理网站：这里;

.sprite{
    background: url("index.png") no-repeat;
    background-size: 375px 455px;
    display:inline-block;
    .sprite-XXX{
        background-position: 10% 10%;
        width: 20px;
        height: 20px;
    }
}
复制代码