代码之家 › 专栏 › 技术社区 › user3541631

使用转义字符将值从mixin传递到类

scss-mixins sass css3 css

user3541631 · 技术社区 · 6 年前

我有一个添加后期粒子的贴图生成器:

@mixin generator {
  @each $key, $value in $config {
        $infix: '\@#{$key}' !global;
        @content
      }
    }

.y- {
  @include generator {
    &-n#{$infix} {
      display: none !important;
    }
    &-in#{$infix} {
      display: inline !important;
    }
  }
}

我得到以下错误:

“&-none”后的CSS无效:应为选择器,为“@”\n

.y-n@key_name1{
    display: none !important;
}

.y-n@key_name2{
        display: none !important;
    }

只有当我们 \@ .

我可以在创建类时添加这个粒子,但就像我说过的那样,我想在多种情况下使用它,并根据条件更改粒子,所以我需要加入mixin。

1 回复 | 直到 6 年前

joshmoto 6 年前

所以这很管用。。。

$config: (
  1: 'a',
  2: 'b',
  3: 'c'
);

@mixin generator {
  @each $key, $value in $config {
        $infix: '-#{$key}' !global;
        @content
      }
    }

.y- {
  @include generator {
    &-n#{$infix} {
      display: none !important;
    }
    &-in#{$infix} {
      display: inline !important;
    }
  }
}

看看这个萨斯迈斯特 https://www.sassmeister.com/gist/324c3c0003a91eb676b00dfe1877cae0

\@

…给你的 $infix 变量键字符串,它抛出一个错误!

$infix: '\@#{$key}' !global;

\@ 这会破坏你的sass/css。

如果你看到 What is the purpose of the '@' symbol in CSS? 你只能使用的问题 @ 符号(示例)。。。

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

你的sass会跑得好吗?

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前