我想根据选择器名称应用文本对齐属性。
正如您在下面看到的,我曾尝试对选择器使用 @if
指令(这是四个 DOM 元素中的两个),但这是无效的。
所有四个 DOM 元素的文本都右对齐,因此它们接收到 @if
语句中的第一个代码块。
此代码块嵌套在 @extend
指令中,该指令依次放入每个选择器的代码块中。
如果使用此方法无法实现,那怎么可能呢?
//global.scss
%project-title {
@media screen and (min-width: 1024px) {
@if ("#project-1" or "#project-3") {
text-align: right;
} @else {
text-align: left;
}
}
}
//_partial-1.scss
#project-1 {
@extend project-title;
}
//_partial-2.scss
#project-3 {
@extend project-title;
}
最佳答案
我认为这样的事情应该可行。请注意,我从未使用过 SCSS(仅使用过 LESS),稍微谷歌搜索帮助我写了这篇文章,但请检查语法错误,特别是调用 mixin 部分,我不确定 SCSS 中如何调用 mixin,我得开始了如果这是错误的,当我回来时更新
@mixin project-title( $projectNumber ) {
@if $projectNumber == '1' or $projectNumber == '3' {
text-align: right;
} @else {
text-align: left;
}
}
#project-1 {
@include project-title(1);
}
一个更好的想法是添加一个左/右类并比较左右而不是元素编号,这样它就可以用于 100 个或更多元素。你会像这样比较
@if $projectNumber == 'left'
因为如果你有一大堆元素标题,编号方式将不会很好地工作
关于css - 如何在 SCSS 中使用@if 和@extend 应用基于选择器的样式规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49615324/