Question

我正在尝试使用变量和缓存功能创建一个mixin。除了一个问题，它工作正常。请参阅下面的示例代码，然后我将解释问题。

首先，这里是mixin（由于空间原因而简化，但实际上这就是它的工作方式）：

mixin($type = apples,
  $color = blue,
  $font-size = 12px,
  $margin = 10px,
  $padding = 20px,
  $border-radius = 30px
  )

if $type == apples
    $color = red

if $type == oranges
    // code
if $type == peas
    // code

+cache('color' + $color)
    color $color     
+cache('font-size' + $font-size)
   font-size $font-size
+cache('margin' + $margin)       
    margin: $margin  
+cache('padding' + $padding)       
    padding: $padding
+cache('border-radius' + $border-radius)       
    border-radius: $border-radius           


.one
    mixin($font-size: 13px)

.two
    mixin($type: oranges)


.three
    mixin($type: peas)

这将输出以下代码：

.one {
  color: #f00;
}
.one {
  font-size: 13px;
}
.one,
.two,
.three {
  margin: 10px;
}
.one,
.two,
.three {
  padding: 20px;
}
.one,
.two,
.three {
  border-radius: 30px;
}
.two,
.three {
  color: #00f;
}
.two,
.three {
  font-size: 12px;
}

这种方法的问题在于选择器被不必要地重复。我们可以轻松地将第一，第二和第三类组合在一起，用于边距，填充和边框半径以及第二和第三类，用于颜色和字体大小。

因此，让我们尝试另一种+缓存技巧：

+cache(
    'color' + $color,
    'font-size' + $font-size,
    'margin' + $margin,
    'padding' + $padding,
    'border-radius' + $border-radius
    )
    color $color     
    font-size $font-size       
    margin: $margin
    padding: $padding
    border-radius: $border-radius

这将输出以下代码：

.one {
  color: #f00;
  font-size: 13px;
  margin: 10px;
  padding: 20px;
  border-radius: 30px;
}
.two,
.three {
  color: #00f;
  font-size: 12px;
  margin: 10px;
  padding: 20px;
  border-radius: 30px;
}

现在我们不必要地输出属性。 margin，padding和border-radius分别提到两次。

我想要的是一种会产生以下结果的方法：

.one,
.two,
.three {
  margin: 10px;
  padding: 20px;
  border-radius: 30px;
}

.one {
  color: #f00;
  font-size: 13px
}

.two,
  color:  #00f;
  font-size: 12px;
}

Answer 1

不幸的是，没有。目前，这是+cache获得的最佳效果。虽然为了让事情更具可读性，你可以使用+cache(arguments)，就像我所做的那样。

mixin($type = apples,
$color = blue,
$font-size = 12px,
$margin = 10px,
$padding = 20px,
$border-radius = 30px
)

  +cache(arguments)

    if $type == apples
      $color = red
    if $type == oranges
      // code
    if $type == peas
      // code

    color $color
    font-size $font-size
    margin: $margin
    padding: $padding
    border-radius: $border-radius

Answer 2

CSS minifier应该做你想要的。例如，cssnano将原始的，冗长的CSS缩减为以下内容（为了便于阅读，我添加了空格）：

.one{
    color:red;
    font-size:13px
}
.one,.three,.two{
    margin:10px;
    padding:20px;
    border-radius:30px
}
.three,.two{
    color:#00f;
    font-size:12px
}

Here is the code in action.

如何在Stylus中正确使用+缓存功能

2 个答案: