sass学习记录及vue实践 -尊龙游戏旗舰厅官网

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

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

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

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

// 在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.storeoneofsmap.foreach(item => {item.use('sass-resources-loader').loader('sass-resources-loader').options({// provide path to the file with resourcesresources: '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 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

总结

以上是尊龙游戏旗舰厅官网为你收集整理的sass学习记录及vue实践的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。