gpt4 book ai didi

css - Compass/Sass 函数和混合语法

转载 作者:行者123 更新时间:2023-11-28 10:19:34 30 4
gpt4 key购买 nike

我目前正在为 Compass/Sass 编写我的第一个 mixin。经过短暂的战斗,我已经得到它来生成我需要的确切 CSS;因此我的问题不是关于修复输出,而是更多关于清理我完成它的方式。

这是我正在使用的代码的两个片段。完整的代码生成一个background-image: CSS规则,带有任意数量的逗号分隔的线性渐变,带有-webkitmoz,并且没有前缀最新 W3C 格式的渐变声明(例如,使用 to top 而不是 bottom)。

正如我所说,我对 API 和输出感到满意。我只想清理这段代码。

首先,在下面的 w3c 条件 block 中,我怎样才能避免我想要的:

@return linear-gradient($direction, $color-stops);

...调用内置的 Compass linear-gradient mixin? (我在我的元素中包含了所有 CSS3 Compass 助手)。我想要的只是输出一个字符串,在括号内插入 $direction$color-stops 的值:

@function -gradient-rule($type, $direction, $color-stops) {
@if $type == ('moz') {
@return -moz-linear-gradient($direction, $color-stops);
}
@if $type == ('webkit') {
@return -webkit-linear-gradient($direction, $color-stops);
}
@if $type == ('w3c') {

// Terrible, terrible hack. Just couldn't work out how to write this without invoking the built-in Compass linear-gradient() function
$prefix: linear-gradient;
@return #{$prefix}unquote("(")#{$direction}, #{$color-stops}unquote(")");
}
}

其次,是否有更简洁的方式来编写下面的代码?我想循环所有的 $gradients,对于每个 $gradient,假设第一项是方向声明,其余的是色标。因此,第一项应设置在变量 $to-direction 中,其余设置在名为 $color-stops 的逗号列表中。我怎样才能做得更好,即不需要 $i 计数器?

@each $gradient in $gradients {

$i: 1;
$to-direction: nth($gradient, 1);
$color-stops: comma-list();

@each $prop in $gradient {
@if $i > 1 {
$color-stops: append($color-stops, $prop);
}
$i: $i+1;
}

// old syntax is the origin of the gradient, not the destination
$from-direction: -from-direction($to-direction);
$moz-value: append($moz-value, -gradient-rule('moz', $from-direction, $color-stops));
$webkit-value: append($webkit-value, -gradient-rule('webkit', $from-direction, $color-stops));

// new syntax is the destination
$w3c-value: append($w3c-value, -gradient-rule('w3c', $to-direction, $color-stops));

...
(continues)
}

非常感谢您提供的任何帮助!

最佳答案

1) 除了将其插入引号外,您无能为力。这是一个更简洁的 hack:

@return #{"linear-gradient("+ $direction +", "+ $color-stops +")"}

PS 你如何使用这个代码?放一个有点奇怪

2) 确实有更简洁的方法!

@for $gradient-number from 2 through length($gradients) {
$gradient: nth($gradients, $gradient-number);

$to-direction: nth($gradient, 1);
$color-stops: comma-list();

@each $prop in $gradient {
$color-stops: append($color-stops, $prop); }

...

$gradient-number$i基本相同,逻辑上差别不大,代码整洁度上差别很大。

当我第一次开始使用这个技巧时,我有点不舒服,但后来我看到 SASS 专家也在使用它(示例:12),所以我可以毫不犹豫地向您推荐它。

关于css - Compass/Sass 函数和混合语法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12856818/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com