SASS占位符教程与实例

SASS中的占位符可以将一组规则声明为基础样式，并将这些样式扩展到其他类中，这就实现了模块化设计的DRY（不要重复你的代码）原则。

下面是一个语法

  %placeholderName { 
    name: value
  }

我们可以使用上述占位符，使用@extend 指令

@extend和 占位符选择器(%) 用于声明和扩展到其他样式。
SASS语法支持sass和scss扩展

用附加样式扩展按钮的例子

• 创建按钮占位符，作为默认样式的基类。
• 为error,info,success,warning按钮创建了额外的扩展样式。
• 使用@extend指令和占位符来扩展样式

%btn {  
  border: none;  
  background-color: white;  
  cursor: pointer;  
  color: white;  
}  
  
.btn-error{  
  @extend %btn;  
  color:red;  
}  
.btn-warn{  
  @extend %btn;  
  color:yello;  
}  
.btn-info{  
  @extend %btn;  
  color:blue;  
}  
  
.btn-success{  
  @extend %btn;  
  color:green;  
}  

当上述sass样式被编译后，CSS的输出如下

  
.btn-error, .btn-warn, .btn-info, .btn-success {  
  border: none;  
  background-color: white;  
  cursor: pointer;  
  color: white;  
}  
  
.btn-error {  
  color: red;  
}  
  
.btn-warn {  
  color: yello;  
}  
  
.btn-info {  
  color: blue;  
}  
  
.btn-success {  
  color: green;  
}  

在媒体查询中使用@extend指令是很棘手的。

如果你扩展了媒体查询之外的选择器，总是会出现错误--你不能在@media中扩展外部选择器，你只能在同一指令中扩展选择器。
为了更好地理解，首先理解媒体查询中的规则声明

  
%heading {  
  color: blue;  
  font-size:18px;  
  
  @media (min-width: 600px) {  
    h1{  
      @extend %heading;  
    font-size:10px;  
    }  
  }  
}  

输出的css将不会生成，而是得到以下错误

You may not `@extend` an outer selector from within @media.  
You may only @extend selectors within the same directive.  
From "@extend %heading" on line 7..  

为了避免这些错误，我们必须对你想在媒体查询中使用的每个选择器使用@mixin ，并在媒体查询中扩展使用混合器

@mixin heading() {  
  color: blue;  
  font-size:18px;  
}  
  
  
@media (min-width: 600px) {  
  h1 {  
    @include heading();  
  }  
}  

生成的CSS是

  
  
.h1 {  
  color: blue;  
  font-size: 18px;  
}  
  
@media (min-width: 600px) {  
  h1 {  
    color: blue;  
    font-size: 18px;  
  }  
}