2022-04-18 Sass学习笔记(三) Sass的嵌套:样式的嵌套,父选择器的嵌套,占位符选择器,属性嵌套

本文详细介绍了Sass中的样式嵌套、父选择器的使用,特别是如何利用&符号代表父选择器。此外,文章还探讨了占位符选择器的概念,解释了%占位符与@extend指令的区别。最后,讨论了Sass的属性嵌套,包括命名空间和嵌套属性值的设置方法。

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

1.样式的嵌套

父选择器里可以嵌套子选择器

div{
    height: 100px;
    ul{
        height: 80px;
        li{
           height: 50px;
        }
    }
}
2.父选择器

可以用 & 代表嵌套规则外层的父选择器

a {
  &:active {//此处&指代其父选择器a
    color:blue;
  }
  span {
    &:hover {//此处&指代其父选择器span
      color:green;
    }
  }
}

3.占位符选择器

“占位符”:以 % 开头,必须通过 @extend 指令调用
scss

%placeholder {//占位符选择器
    width: 100px;
    height: 100px;
    color: red;
    &:hover {
        color: blue;
    }
}

.btn {
    @extend %placeholder;//调用占位符选择器
    font-size: 18px;
}

.btn2 {
    @extend %placeholder;
    font-size: 16px;
}

css

.btn, .btn2 {
  width: 100px;
  height: 100px;
  color: red;
}
.btn:hover, .btn2:hover {
  color: blue;
}
.btn {
  font-size: 18px;
}
.btn2 {
  font-size: 16px;
}

注:有点像混入mixin

@extent与混入的区别

混入的mixin-name{}不会在css文件中保留下来.
extend的可以,因为它是把这部分公共样式单独放的

4.属性嵌套
命名空间

有些 CSS 属性具有相同的命名空间

  • 定义字体样式的属性: font-size ; font-weight ; font-family ; 它们具有相同的命名空间 font
  • 定义边框样式的属性:border-radius ; border-color ; 它们具有相同的命名空间 border
sass嵌套属性

Sass 允许将属性嵌套在命名空间中,同时命名空间也可以具有自己的属性值
实现方法:
把属性名从中划线-的地方断开,在该属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中

.box {
  border: {
    radius: 5px;
    color:red;
  }
  font: {
   family:'YaHei';
   size:18px;
   weight:600;
  }
  margin: auto {
    bottom: 10px;
    top: 10px;
  };
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值