scss--混入@mixin、@inclue、占位选择器 %、继承 @extend、插值语法 #{}、

作者：System 时间：2024年08月08日分类：所有,css 字数：841

这篇文章距离上次修改已过278天，其中的内容可能已经有所变动。

SCSS (Sassy CSS) 是一个预处理器，它扩展了 CSS 的功能，提供了一些强大的功能，如变量、嵌套规则、混入 (mixins)、导入 (inline imports) 等。以下是你提到的一些特性的简要介绍和使用示例：

@mixin：Mixins 允许你定义可重复使用的样式块，就像是一个函数，可以传入参数。




@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
 
.button {
  @include border-radius(10px);
}

@include：使用 @include 指令，你可以调用 mixin。
% 占位选择器：%placeholder 选择器是一种不输出到 CSS 文件中的 mixin。




%mt10 {
  margin-top: 10px;
}
 
.button {
  @extend %mt10;
}

@extend：@extend 指令可以共享一个选择器的所有样式到另一个选择器。
{} 插值：#{} 可以在选择器或属性中插入动态值。




$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$text-color: #333;
 
body {
  font-family: #{$base-font-family};
  color: $text-color;
}

以上是 SCSS 的一些基本特性和它们的使用方法。

scss--混入@mixin、@inclue、占位选择器 %、继承 @extend、插值语法 #{}、

{} 插值：#{} 可以在选择器或属性中插入动态值。

评论已关闭

推荐阅读