sass公共样式

clearly_lll1

于 2024-01-03 10:44:19 发布

阅读量579

点赞数 7

文章标签： sass 前端 css

本文链接：https://blog.youkuaiyun.com/qq_48612020/article/details/135357856

版权

本文详细介绍了如何在SASS中使用变量定义主题颜色，混合（Mixin）实现代码复用，以及占位选择器（PlaceholderSelector）的原理和应用。通过实例展示了如何在CSS样式中灵活运用这些特性来提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SASS使用公共样式

一、定义变量

用$符号定义变量，通过给变量赋值

$primary-color: #008CBA;

使用

div {
  background-color: $primary-color;
  border: 1px solid darken($primary-color, 10%);
}

二、定义混合

混合（Mixin）是SASS提供的一个非常强大的功能，它允许我们将一段样式的复用

1.不带参数

@mixin text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

使用

div {
  @include text-overflow;
}

2.带参数

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
 
.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数\
}
 
.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数\
}

/* 混入多个参数，用... */
@mixin box-shadows($shadow...) {  
    box-shadow: $shadow;  
}

.container {  
    @include box-shadows(0px 1px 2px #333, 2px 3px 4px #ccc);  
}

三、定义占位选择器

占位选择器（Placeholder Selector）是一种只包含样式的选择器，不会生成任何CSS样式，只有在被继承时才会生成实际的样式。它与混合类似，不同的是占位选择器只能被继承，而不能被直接使用。

%base {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

使用

div {
  @extend %base;
  font-weight: bold;
}