Sass @include用法示例

 

Sass引用混合样式@include

使用@include指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）。

 

举一个文本溢出处理样式的例子

mixin.scss

@mixin fontEllipsis() {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在需要的页面（比如main.scss）导入mixin.scss

main.scss

@import "mixin";

.page-title {
  @include fontEllipsis;
  padding: 4px;
  margin-top: 10px;
}

main.scss .page-title 编译后

.page-title {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
    margin-top: 10px;  
}

 

end.