SCSS mixin，如何连接单元？ （px，％，em）[重复]

Posted 2023-02-16

【中文标题】SCSS mixin，如何连接单元？ （px，％，em）[重复]

【英文标题】：SCSS mixin, how to concatenate units? (px,%,em) [duplicate]

【发布时间】：2016-01-05 18:16:24

【问题描述】：

我想定义类

.bg-1 
   width: 1%

.bg-2 
   width: 2%

我正在尝试这个：

@for $i from 1 through 100     
  .bg-#$i 
    width: #$i;
  

这至少可以编译，但会打印出来

    .bg-1 
       width: 1;
    
    .bg-2 
       width: 2;
    

问题是如果我添加：

width: #$i%;

我明白了：

error sass/screen.scss (Line 294 of sass/modules/_classes.scss: Invalid CSS after "   $var: ": expected expression (e.g. 1px, bold), was "%;")

【问题讨论】：

试试width: #$i + '%'; 或width: #$i'%';

这会生成.bg-95width:95+"%" 或.bg-95width:95"%"...

@cimmanom 如果你的意思是我应该 $percent: 1% 然后 'width: #$i*$percent;` 我在问之前试过......结果是.bg-95width:95*1%"跨度>

【参考方案1】：

试试这个解决方案。它有效。

@for $i from 1 through 100     
   .bg-#$i 
     $percentage: unquote("%");
     width: #$i$percentage;
   

或者这个：

 @for $i from 1 through 100     
  .bg-#$i 
    width: #$iunquote("%");
  

【讨论】：

绝对不是，这是100%错错错了，千万不要这样做。

你能告诉我为什么这样错吗？

是的，为什么？你不能只说不详细..

【参考方案2】：

或者类似的，比较流行的。

@for $i from 1 through 100     
  .bg-#$i 
    width: round(percentage($i/100)); // Math function
    height: #$ipx; // For px or em just concat
  

【讨论】：

绝对不是，这是100%错错错了，千万不要这样做。

你在说什么！？它构建得很好，不是黑客。这不是一个问题，而是一个实际的问题，但它是否可以完成。 Sass 不会抛出错误，因此它是正确答案。

仅仅因为它编译并不能使它成为“正确”的答案。

我看到您链接了一个涉及计算和手动工作的不同答案，而在我的解决方案中，您按预期使用了 Sass 函数。在这种情况下，正确答案是什么？它被编译成 CSS，然后被不关心它是什么类型的值的浏览器使用。这是一个有多个答案的无事实问题。我认为你犯了一个错误。

我回答的时候不是重复的。可以将其标记为一个。我确实使用了他的代码并为他找到了解决方案，他投票认为它有效。让我开心。我帮助了一个人。当您在这种情况下使用它时，它将始终有效。这是一种编程。如果它不能以一种方式工作，您可以随时选择退出并以您喜欢的方式编写它。这个问题有很多答案，仅受 Sass 抛出错误的限制。我猜我们同意不同意？