Sass占位符和Mixins：您的工具包-DEV365 开发者社区

sass中的占位符是一种特殊的选择器，我认为它是混合蛋白和类选择器之间的十字架 - 并且不包含在CSS输出中。在此博客中，我将概述占位符，强大功能以及一些缺点的用途。

我第一次遇到占位符是当我的一位开发人员同事建议在为客户构建静态HTML/CSS组件时使用它时。我们研究了占位符，并决定在我们的SCSS标记中采用它。

占位符和用法

一个占位符由百分比符号%表示，通常是这样写的：

%example-placeholder {
    padding: 20px;
    font-size: 18px;
    line-height: 28px;
    background-color: #fff;
  }

// then we can apply it in our css class

.class-one {
  @extend %example-placeholder;
  border: 1px solid #2596be;
}

在上面的示例中，我们创建了一个带有一组CSS属性的占位符，并使用@extend规则将其应用于.my-class。

让我们在查看CSS输出的外观之前添加另一个类。

// scss file

%example-placeholder {
  padding: 20px;
  font-size: 18px;
  line-height: 28px;
  background-color: #fff;
}

.class-one {
  @extend %example-placeholder;
  border: 1px solid #2596be;
}

.class-two {
  @extend %example-placeholder
}

在这里，我们有两个班级，一个有一个占位符，另一个没有占位符。让我们看看CSS输出。

// css output
.class-two, .class-one {
  padding: 20px;
  font-size: 18px;
  line-height: 28px;
  background-color: #fff;
}
.class-one {
  border: 1px solid #2596be;
}

我们可以从CSS输出中了解到将占位符的属性应用于共享的类。

占位符不包括在COMSS输出中，仅在其受人尊敬的类中。

我们甚至可以在另一个占位持有人内使用PARCEHOUSTER：

%placeholder-one {
  margin-top: 24px;
  background-color: red;
}

%placeholder-two {
  @extend %placeholder-one;
  display: flex;
  flex-direction: column;
}

占位符和混合物的强大组合

我们可以在占位符中使用Mixins来创建一些简单的响应式样式。让我们看一个例子。

// define some mixins for responsive design
@mixin tablet {
  ...properties for tablet screens
}
@mixin desktop {
  ...properties for desktop screens
}

// define placeholders with mixins

%p-default {
  font-size: 16px;
  line-height: 24px

  @include tablet {
    font-size: 20px;
    line-height: 28px;
  }

  @include desktop {
    font-size: 24px;
    line-height: 32px;
  }
}

// apply placeholder

.blog-summary {
  @extend %p-default;
}

.nav-link {
  @extend %p-default;
}

这样，占位符和混合物的组合使我们能够以更有效的方式重新使用相同的属性。