在我工作的网站上,我们使用的是Scaffold,这是一个基于PHP的系统,类似于Sass。它也可以处理Sass函数\文件。不幸的是,该系统现在是废弃软件,我们正在寻找一种方法来完全转移到Sass。但有一个大的功能与Scaffold,我没有找到一种方法来移植到Sass,变量组。
Scaffold中的变量可以组织成组,并与点分隔的标记一起使用。例如,我将它们定义为:
@variables vargroup1{
variable1: ####;
variable2: ####;
variable3: ####;
variable4: ####;
}
并稍后在代码上使用,例如。
body{ width: vargroup1.variable1; margin: vargroup1.variable2 + 10;}
这对开发有很大帮助,因为你可以将系统中的变量组合在一起,阅读CSS文件,你可以很容易地知道引用什么。我在Sass文档中没有找到类似的东西,有人知道这是否可能吗?或者是否有任何使用Mixin来做这件事的方法?
谢谢
4条答案
按热度按时间7bsow1i61#
我遇到了这个使用
zip
和index
的有点笨拙的解决方案(见Chris Eppstein的回复),显然是SASS的一个维护者为了回答类似的问题而添加了这些内置函数。他的答复如下:
将产生:
“命名变量”来自顶部的列表“
-names
“;然后你可以使用index
这个变量列表中的变量名从另一个变量列表中得到第n个值。zip
用来将单独的列表混合在一起,这样你就可以同时从所有列表中检索相同的索引。将这种行为 Package 在函数中可以更容易地检索集合。0x6upsns2#
Sass中没有对应的函数,但我可以考虑两种变通方法:
**1)**Sass列表及其相关列表函数。
您的代码可能如下所示:
这是不一样的,因为列表索引不能是字符串,所以你没有任何方法来命名你的变量。
**2)**定义自定义函数。请查看Sass参考中的 Function Directives 部分
这种方法不太直观,也不美观,但你可以“命名你的变量”。
4c8rllxm3#
您可以使用SASS列表及其相关函数,方法类似于:
这样就可以调用类似于:
应返回
Header
列表的left属性值,但将其更改为getVar($Footer,top)
将返回“页脚组”(页脚值列表)的top属性值。这在使用值的时候是有效的,但是在定义中,你必须遵循精确的顺序并且不能留下任何空值,我找到的最接近空值的是
#{''}
,意思是“没有引号的空字符串”,一个空值,但是被添加到CSS中。m4pnthwp4#
您可以使用scss/sassMap函数:
Documentation