主页 / 问题 / 1257170
Accepted
Руслан Камов
Asked:2022-03-17 22:34:37 +0000 UTC2022-03-17 22:34:37 +0000 UTC

SCSS中难以理解的构造

  • 772

你能告诉我这个结构的名称是什么，箭头所指的是什么？即#{$cols}n作者只是解释说它会直接引用最后一列并设置自己的样式，但是这个语法（正则表达式？）的名称是什么，它的用途是什么 - 保持沉默。

在此处输入图像描述

css

2 个回答

  1. 来自文档：

    插值几乎可以在 Sass 样式表中的任何地方使用，以将 SassScript 表达式的结果嵌入到 CSS 块中。只需在以下任何地方包装一个表达式#{}：

    • 样式规则中的选择器
    • 声明中的属性名称
    • 自定义属性值
    • CSS 规则
    • @扩展
    • 纯 CSS @imports
    • 带引号或不带引号的字符串
    • 特殊功能
    • 纯 CSS 函数名称
    • 大声评论

    您不能将变量粘贴$var在 scss 文件中的任何位置，因此您应该将表达式包装起来#{}以将它们与字符串的其他部分分开。

    俄语 - https://sass-scss.ru/documentation/sassscript/interpolyatsiya/

    同样，例如，在 php 中将变量嵌入到字符串中string {$var}string可以消除可能的歧义。

    • 4
  2. Best Answer

    @mixin这是一种函数，就像在 JS 中一样。

    让我们使用规则

    .cols {
  @import grid(10, 5px); /* $cols, $margin */
}

    然后该块.cols将收到以下规则

    .cols {
  float: left;
  background: #ce3d3d;
  margin-right: 5px;  /* $margin */
  margin-bottom: 5px; /* $margin */
  height: 150px;
}

.cols:nth-child(10n) { /* $cols */
  margin-right: 0;
}

    并且其中的构造${}是变量的插值。

    您还可以使用#{}插值语法在选择器和属性名称中使用 SassScript 变量

    • 3

相关问题