Scss的变量基本使用问题

刚才在写模块的时候无意中发现scss这个变量有点儿意思了...

下面是我的公共样式,好多地方都要用到,原来只能把同一种样式的css代码复制粘贴,其实回头看的话会感觉很冗余,于是我想再次试试scss的变量

我之前对less和scss的变量只使用过键值对这种类型,一个变量只能设置一个属性,比如说$color : red;如果我有用到红色的地方,可以使用这个变量$color;以前真的因为这个觉得变量这玩意儿很鸡肋,但是没办法,所以只能再次试试...

最开始我是瞎尝试的,比如这样写:

或者这样写:

 以上两种瞎写的结果都是错误的,于是我去百度试着查了下其他的方法,找到了这个帖子中对@mixin的使用的介绍,发现它不仅可以将多个css样式赋值给一个变量,还可以传参(虽然我没用过传参),但是第一个功能就足够满足我的需求了:

https://www.csdn.net/tags/NtjaAgzsMzM0ODItYmxvZwO0O0OO0O0O.htmlicon-default.png?t=M3C8https://www.csdn.net/tags/NtjaAgzsMzM0ODItYmxvZwO0O0OO0O0O.html有兴趣可以看看,讲的很全,我这个只是其中一部分,对我来说够用了...

根据这个知识点呢,我知道原来用@mixin 和 @include可以实现我的想法,所以最终的写法是这样的:

声明变量:

 在需要的地方使用这个变量:

以上仅为个人对此处的理解,如有错误还请指正,谢谢哈...

猜你喜欢

转载自blog.csdn.net/weixin_44016350/article/details/124304305
今日推荐