Question

％在scss中表示什么？

在上下文中使用％：（来源：https://codepen.io/FWeinb/pen/GrpqB?editors=1100）

@import "compass/css3";

.box{
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  line-height: 10em;
  overflow: hidden;
}

%box__dir{
  position: absolute;
  width: inherit;
  height: inherit;          
  text-align: center;
  line-height: inherit;
  transition:transform .4s ease;
}

“ box_dir”前的百分号表示什么？

Answer 1

在SCSS中，%表示placeholder selector。

[占位符]与类选择器非常相似，但是不使用开头的句点（.），使用百分号（%）。占位符选择器具有不会不会的其他属性显示在生成的CSS中，只有扩展它们的选择器才会包含在输出中。

因此，如果您将其包含在SCSS中的某个位置但从未使用（扩展），它将不会出现在您生成的CSS中。

%box__dir {
 position:absolute;
 width:inherit;
 height:inherit;
 text-align:center;
 line-height:inherit;
 transition:transform .4s ease;
}

一旦使用placeholder，它就会按预期出现在生成的CSS中。

.something {
  color: red;
  @extend %box__dir;
}

生成CSS：

.something {
  color: red;
  position:absolute;
  width:inherit;
  height:inherit;
  text-align:center;
  line-height:inherit;
  transition:transform .4s ease;
}

在SCSS中，％符号表示什么？

1 个答案: