Question

因此，我试图跟踪一个计数器，该计数器在每次满足循环中的条件时都会增加。这里的收获（实际上有两个）是：

Sass循环不知道要迭代的长度
我需要检查元素是否存在或具有某个类（应该可以工作）

第二点是我现在停留在的位置。必须有某种方式写一个条件来包装计数器的增量，以便仅当满足条件时计数器才会更新。目前，我正在将计数器的增量插入第n个子选择器中。

代码：

$total-cards: 0;
$max-cards: 10;

@for $i from 1 through $max-cards {
  .child:nth-child(#{$i}) {
    $total-cards: $total-cards + 1;
  }
}

@debug $total-cards;

为什么不起作用^：每次都会更新计数器，因为无论该代码块是5个还是10个，该代码块都将运行。

根据我的阅读，我认为使用@if指令无法完成此操作...

Answer 1

一组CSS规则是静态的，因为其结构不会更改。值可能会更改（通过ITextEditor editor; ITextOperationTarget target = (ITextOperationTarget) editor.getAdapter(ITextOperationTarget.class); if (target instanceof ITextViewer) { ITextViewer viewer = (ITextViewer) target; int widgetCaretOffset = viewer.getTextWidget().getCaretOffset(); if (viewer instanceof ITextViewerExtension5) { ITextViewerExtension5 extension = (ITextViewerExtension5) viewer; System.out.println(extension.widgetOffset2ModelOffset(widgetCaretOffset)); } System.out.println(JFaceTextUtil.getOffsetForCursorLocation(viewer)); System.out.println(offset); System.out.println(widgetCaretOffset); System.out.println(viewer.getSelectedRange()); }），但是结构保持不变，并且值以相同的方式应用于相同的事物。

Sass只是编写CSS的另一种方式，添加了语法糖，但没有改变CSS的工作方式。

CSS不知道或不在乎页面中的内容。相反，从概念上讲，页面会针对每个元素询问CSS是否存在与该元素匹配的规则，然后应用关联的样式。

诸如--var()之类的东西不计算元素，也不需要。要与:nth-child(an+b)进行匹配，您不需要知道有多少个元素，否则这些元素将匹配并且具有一个可以使公式适合的索引。其他与子相关的伪选择器只是an+b的快捷方式。

因此，您可以与“倒数第二”，“每三分之一”甚至“每一个奇数，但不是五分之一的东西”进行匹配。

虽然CSS无法计算元素，但是CSS3可用于推断元素的数量并相应地应用规则，如this answer所示：

:nth-child()

这些规则利用了这样一个事实，例如，在一组四个/* one item */ li:first-child:nth-last-child(1) { /* -or- li:only-child { */ width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; }兄弟姐妹中，第一个元素也是倒数第四个元素。规则的第一部分适用于“指标”元素。规则的第二部分适用于该元素的匹配同级。但是CSS仍然不知道有多少个元素，只是知道一个特定的元素碰巧与选择器的横截面匹配。它无法为您提供电话号码，因此您仍然需要自己提供电话号码。

Sass不会更改此设置。它可以让您以更简洁的方式编写CSS，但是最后，它仍将被编译为CSS，因此将具有与CSS相同的限制。

仅在满足条件时更新CSS计数器

1 个答案: