Sass变量、嵌套、混和宏、继承、占位符

最新推荐文章于 2025-05-31 16:13:46 发布

幸福滴嘴角上扬

最新推荐文章于 2025-05-31 16:13:46 发布

阅读量748

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： sass 嵌套混和宏继承占位符

本文链接：https://blog.youkuaiyun.com/xiangxiangw29/article/details/77850392

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨Sass的特性，包括如何使用全局和局部变量，有效利用嵌套规则，理解混和宏的强大功能，以及详细解释继承和占位符的概念，帮助提升CSS编写效率。

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

初次学习Sass，做下简单的总结。

1、全局变量和局部变量

$color : green;
span{
  color: $color;//调用全局变量
}
div{
  $color: red;
  p{//选择器嵌套
    color: $color;//调用局部变量
  }
}
i{
  color: $color;//调用全局变量

}

编译后

span {
  color: green;
}

div p {
  color: red;
}

i {
  color: green;
}

2、嵌套（选择器嵌套、属性嵌套、伪类嵌套）

.box{
  margin:{//属性嵌套（属性后加冒号，在大括号里写样式）
    top: 5px;
    bottom: 3px;
  }
}
.wrap{
  &:after{//伪类嵌套（用&符号进行连接 ）
    content: "";
    display: block;
  }
}

编译后

.box {
  margin-top: 5px;
  margin-bottom: 3px;
}
.wrap:after {
  content: "";
  display: block;
}

3、混和宏，分为不传参数、传一个参数、传多个参数
用@mixin声明混和宏，用@include调用声明好的混和宏

@mixin center{//不传参数
  text-align: center;
} 
.sa{
  @include center
}
@mixin center($center){//传一个参数
  text-align: $center;
} 
.sa{
  @include center(center)
}

编译后都是

.sa {
  text-align: center;
}

传多个参数可分两种情况，直接传指定个数的参数和“...”（我叫它省略参数）。

@mixin center($width,$height){//指定个数的参数
  width: $width;
  height: $height;
} 
.sa{
  @include center(500px,300px)
}

编译后

.sa {
  width: 500px;
  height: 300px;
}

省略参数

@mixin center($padding...){//特殊参数 ...
  @if length($padding) >= 1{
    padding: $padding;
  }@else{
    padding: 10px 5px;
  }
} 
.sa{
  @include center(2px,3px)//满足else
}
.sub{
  @include center //满足参数长度不大于等于1
}

编译后

.sa {
  padding: 2px, 3px;
}
.sub {
  padding: 10px 5px;
}

4、继承

.btn{
  border-radius: 5px;
}
#fl{
  float: left;
}
.sa{
  @extend .btn;
  @extend #fl;
}

编译后

.btn, .sa {
  border-radius: 5px;
}

#fl, .sa {
  float: left;
}

5、占位符，缺点很明显，不能合并

%fr{
  float: right;
}
%block{
  display: block;
}
.sa{
  @extend %fr;
  @extend %block;
}

编译后

.sa {
  float: right;
}

.sa {
  display: block;
}

使用&符号，可合并具有相同属性的调用者

%fr{
  float: right;
}
%block{
  display: block;
}
.sub{
  @extend %block;
  &, span{
    @extend %fr;
  }
}

编译后

.sub, .sub span {
  float: right;
}

.sub {
  display: block;
}