我正在使用&:在mixin中的SASS @if块中进行选择。

@mixin mixin-name {
   @if (condition) {
        .....
   } else {
        &:nth-of-type(...) {}
   }
}

&:Nth-of-type是mixin中最外面的实际选择器。 在我的代码中,我以这种方式使用它:

aside {
    @include mixin-name;
}

我期望在CSS输出中这样:

aside:nth-of-type() {}

相反,我得到这个:

aside else:nth-of-type() {}

显然,SASS正在选择else作为“父”,而不是放在一边。 旧的mixin在mixin中包含aside元素,但是我想使其更加灵活,以便与任何选择器一起使用。

我当前的解决方案是将选择器作为变量传递给mixin并以这种方式使用它:

#{$var} {
    &:nth-of-type() {}
}

这行得通,但是应该选择一段代码而不是实际的选择器似乎是一个错误。 有人有更优雅的解决方案吗?

===============>>#1 票数:1 已采纳

使用@else 您可以在此处查看完整的文档: SASS文档

基本上,SASS认为else是CSS关键字/标识符。 它必须以@

即,您的代码将变为:

@mixin mixin-name {
   @if (condition) {
        .....
   } @else {
        &:nth-of-type(...) {}
   }
}

  ask by Paul translate from so

未解决问题?本站智能推荐:

1回复

如何仅在SASS中为主要父母添加某种样式

我有这个标记: 我需要为主要父项添加一些样式,并为上面的同一项继承一个样式(如上)。 所以我这样做,但这是行不通的... 我知道我可以复制标签并在里面为他指定其他样式,但是总的来说这样记录/写入的可能性吗? 谢谢。
1回复

SASS / SCSS的@if是否选择要使用的图像类型?

我首先尝试使用SASS的@if控制指令 。 我在文件夹中有一个优化图像列表,其中一些图像比JPG的小,而另一些图像比PNG的小。 使用@if规则,我试图说“如果该文件的JPG存在,请使用此@include,否则请使用另一个” 。 (示例中的gif只是在其中,以阐明我是否至少部分
2回复

Sass中的If / Else语句根据列表中的项目数更改CSS

我有一个要用flex样式的项目列表。 它们堆叠在一排。 我想知道是否可以编写基本执行以下操作的if / else语句: 如果列表中有4个或更少的项目,则在两端之间使用justify-content:空格,但是,如果列表中有5个或更多的项目,请使用justify-content:均匀
1回复

根据类别设置SASS变量

我需要根据.withtable和.notable并且元素的位置不同的类来设置vars。 查看图片或查看代码示例: 这个东西怎么解决? 有任何想法吗?
1回复

Sass可以识别尺寸并应用条件吗?

我正在尝试在Sass中实现一个简单的容器。 容器的最小高度为60px,高度为80px,并在一个简单的段落中。 现在,每当我在容器中添加新段落时,高度都会增加,具体取决于我在容器中插入了多少段。 我想知道的是,是否有任何方法可以设置一个条件,即如果容器高度超过100像素,则边框会更改
3回复

我可以检查父元素在sass中有特定的类吗?

如果父元素具有特定的类,我想有条件地分配值。 经验值: 的HTML 的CSS 但如果父元素具有名为“ big”的类 的HTML 我想如下更改值 的CSS 例如如下: 我该如何在SASS中做到这一点?
1回复

sass如何实例化由@if设置的空变量

我认为代码说明了一切,这就是我所拥有的: 我在CSS中得到的就是这个 如何在@if之外实例化变量? 如果我在@if ofc内执行此操作,则不会像正常编程那样在范围外被检测到并标记为“未定义” 请帮忙。 假做相同,空给我错误
1回复

如何在嵌套的Sass映射(SCSS)中执行'if'语句?

当我刚接触SASS(SCSS)时,似乎我的野心目前超过了我的能力。 有人可以协助我完成以下任务。 背景 目前,我们的图标系统具有两种不同的文件格式; 一个是PNG,另一个是SVG。 我们的某些图标具有两种文件类型,有些图标具有PNG或SVG。 我希望能够将它们单独列出。
1回复

如果在scss中否则更改可变颜色

我正在尝试在scss中单击更改对比(向主体添加更改对比类)以更改颜色。 我的静态颜色是: $ primary-color-blue: #2aace2 ; $ mid-blue-color: #2695d2 ; $深蓝色: #124b62 ; 变化的对比: $
2回复

如何使用if语句在SCSS中查找类名?

我有两个不同的班级。 一个是admin ,一个是user 。 我想动态输入边框颜色。 如果父类为admin,则输入边框颜色为白色,如果父类为user,则输入边框颜色为黑色。 这只是一个例子,在我的项目中有两种登录类型,并且想要在使用父类时进行很多更改。