sass学习记录及vue实践

第一章：Vue中实践样式文件复用（模块化导入）

说明： 通常项目中复用的样式值（变量）和样式段（mixin）会统一放在一个.scss文件中（common.scss）供项目使用，主要来学习common.scss文件的使用

1. 组件中使用
   在组件的scss文件中直接导入，属于谁用谁引：

@import '../assets/style/common.scss'

2. 全局中使用
   秉着懒的原则，对于这些高度复用的东西，能一次搞定自然是最好的：

// 在main.js中引入全局样式 
import './assets/style/common.scss'

然后在组件中去引用，成功的报错了！！！（这种注册方式适用于普通样式）

解决方案：
不用再main.js中引入了 ，直接利用vue.config.js来配置
报错解决方案一：创建 vue.config.js 文件，写入如下代码：

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                prependData: `@import '~@/assets/style/common.scss';` //新版本
            }
        },
    }
}

采用第1种方法的时候要注意因为它会在所有 sass 文件里添加相同的代码。如果添加的不是变量, mixin 之类的，而是类似下面的代码的话。假设你有20个scss文件的话，下面这段代码就会出现在你最终打包出来的文件20次。
参考：https://blog.csdn.net/weixin_41615439/article/details/104216159

大概的意思是项目自己帮你在每个scss文件中添加你的common.scss代码，建议你只写一些共用的变量和mixin，不要包含普通的样式，不然会在编译后的文件中重复出现。

只有变量的

既有变量，还有普通样式的

可以看见div重复了两次，这种普通样式要全局通用公有，应该单独写在一个 default.scss 文件中，然后全局引入，下图的 div 样式就不会重复了

// main.js 中全局注册默认公用样式
import './assets/style/default.scss'

结论：定义变量和mixin的 scss 单独放在一个文件夹，在vue.config.js中设置后，可全局使用变量和mixin

报错解决方案二：

利用 sass-resources-loader 插件，

npm i sass-resources-loader -D

创建 vue.config.js 文件，写入如下代码：

module.exports = {
    chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: 'src/assets/style/common.scss',//文件的路径

          // Or array of paths
          // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}

与第一种不同，它是将文件中变量和mixin注册到了全局（注意依旧不要写普通样式）

第二章：变量定义和使用

/* $变量名：值 */
$themeColor: red;

/* 使用 */
div{
	background-color: $themeColor;
}

第三章：@mixin混入和@include引入混入

样式代码段的复用，将复用的代码段定义后引入使用：

@mixin name { property: value; property: value; … }

/* 定义混入 */ 
@mixin my-flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 使用混入 */
div{
	@include my-flex-center;
	background-color: red;
}

/* 编译后 */
div{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: red;
}

混入可以接收参数：

@mixin bordered($width, $color){
    border:$width solid $color;
}

div{
	@include bordered(1px, red);
}

/* 编译后 */
div{
	border: 1px solid red;
}

指定默认值：可以都指定，也可以指定其中的几个

@mixin bordered($width: 1px, $color: red){
    border:$width solid $color;
}

div{
	@include bordered(,red); /* 错误的，如果你只想传某些个参数应该指定它，其他的会默认 */
	@include bordered（$color: green） /* 此时$width会取默认值1px*/ 
}

可变参数（类似arguments）

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 … 来设置可变参数。例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

继承 @extend

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.item{
	position: absolute;
}
.item1{
	@extend .item;
	color: red;
}
.item2{
	@extend .item;
	color: green;
}

/* 编译后 */
.item, .item1, .item2 {
	position: absolute;
}
.item1{
	color: red;
}
.item2{
	color: green;
}

好像用继承没有省太多的代码 如下少写一些重复class
使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class=“item item1” ，只需要设置 class=“item1” 类就好了。

Mixins允许我们在项目中复用样式片段，可以传递参数这个特性使得它们非常灵活，强大。同样，我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixin和extend好像做了同样的事情，那我们应该选择哪一个呢？
@mixin主要的优势就是它能够接受参数。如果想传递参数，你会很自然地选择@mixin而不是@extend。
如果没有任何参数，使用@extend来创造DRY应该是个不错的选择。不过要注意的是，使用gzip压缩过的文件可能会破坏代码中的DRY。
在大作数情况下@mixin会比@extend更好，但是它们俩都有自己的一席之地。当样式和选择器之间的关系在某些方面比较紧密的时候，使用@extend。除此之外，你可以使用@mixin在任何地方。

官网原话 意思就是告诉你尽可能(直接使用混入不会有错的)的使用@mixin