Question

我使用extend设置了样式。问题是，在某些情况下，它不起作用，看起来不合逻辑。

我已经简化了CSS但问题仍然是一样的。这是一些嵌套类：

#how-it-works {
    .timeline {
        & > .timeline-step {

            & > h3:extend(.h3-text) {}
        }
    }
}

在上面的例子中，LESS没有输出CSS。

但是，如果我像这样删除外层：

.timeline {
    & > .timeline-step {

        & > h3:extend(.h3-text) {}
    }
}

我得到了我需要的输出：

.h3-text,
h3:not([class]),
.timeline > .timeline-step > h3,
.legal-info dt,
.call-to-action .rapr {
  color: #424242;
  font-size: 20px;
  line-height: 28px;
}

外部风格是类还是ID无关紧要。

有人对这种情况有所了解吗？

Answer 1

这是一种非常奇怪的行为，目前我没有解释为什么它以这种方式工作，但有一种解决方法。如果我们在实际的嵌套选择器之前的所有级别使用父选择器（&）似乎都有效（除了最里面的选择器之外）。

考虑到:extend()功能存在多长时间以及这种情况似乎有多常见，它可能是一个预期的功能。一旦我找到它，我会添加更多关于原因的解释：）

.h3-text{
    color: #424242;
    font-size: 20px;
    line-height: 28px;
}    
#how-it-works {
    & .timeline {
        & > .timeline-step {
           & > h3:extend(.h3-text) {};
        }
    }
}

另一种似乎也有效的方法是避免在所有级别使用&（父选择器）。对于这种特殊情况，这不应该是一个大问题，因为&基本上什么都不做。

.h3-text{
    color: #424242;
    font-size: 20px;
    line-height: 28px;
}    
#how-it-works {
    .timeline {
        > .timeline-step {
             > h3:extend(.h3-text) {};
        }
    }
}

规则集中的偶数:extend有效。似乎在使用附加到选择器的:extend并且选择器仅在某些级别具有&时会发生问题。

.h3-text{
    color: #424242;
    font-size: 20px;
    line-height: 28px;
} 
#how-it-works {
    .timeline {
        & > .timeline-step {
             & > h3 {
                &:extend(.h3-text);
            }
        }
    }
}

较少CSS扩展功能无法按预期工作

1 个答案: