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

前端OnTheRun

已于 2022-10-12 18:52:18 修改

阅读量181

点赞数

分类专栏： sass 文章标签： js sass css 前端 html

于 2022-04-18 20:33:27 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/124258716

版权

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

摘要由CSDN通过智能技术生成

文章目录

1.样式的嵌套

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

div{
   
    height: 100px;
    ul{
   
        height: 80px;
        li{
   
           height: 50px;
        }
    }
}

2.父选择器

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端OnTheRun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

sass学习笔记

反手一个bug的博客

01-20

158

文章目录css功能扩展嵌套规则父选择器&属性嵌套sassScript变量数据类型字符串插值语句变量定义！default@import@media@extend@extend-Only选择器在指令中延伸控制指令@if@for@each@while混合指令定义混合指令引用混合样式@include参数参数变量函数指令 css功能扩展嵌套规则 sass允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器 #main p{ color: #0

sass笔记之嵌套

JASMINECJC的博客

02-28

383

选择器嵌套： nav { a { color: red; header & { color:green; } } } == nav a{ color: red; } header nav a { color: green; } 属性嵌套： nav a{ font{ si

参与评论您还未登录，请先登录后发表或查看评论

Sass中的变量以及选择器嵌套规则

qq_39145827的博客

12-09

611

Sass中的变量以及选择器嵌套规则变量变量名以$符号开头，后面跟:，然后写属性值，且值可以对应css中的规则，允许使用空格分割多个值。 $border: 1px solid red; div { border: $border;/*相当于border：1px solid red */ } 变量名中可以使用中划线-或者下划线_，且两个符号可以混合使用，编译后会被解析为同一个符号...

Sass - 占位符选择器(%placeholder)

王佳斌

09-18

3308

前言如果你已经了解了 @extend指令则直接阅读即可，否则你需要先学习：传送门 %占位符选择器语法：占位选择器看起来很像普通的 class 和 id 选择器，只是 # 或 . 被替换成了 %，他可以像 class 或者 id 选择器那样使用，需要注意的是，它本身的规则不会被编译到 CSS 文件中。 %demo { /* 一些规则 */ } 初识占位符选择器 它取代以前 CSS 中的...

【sass中占位符选择器%foo的作用、使用场景以及与其他占位符的选择方法】

最新发布

xiejunlan的博客

05-20

404

在Sass（Syntactically Awesome Stylesheets）中，占位符选择器（Placeholder Selectors）是一个以开头的特殊类型的选择器。它们的主要作用是允许你定义一个样式规则集，但不会直接应用于任何HTML元素。相反，这些规则集可以通过@extend指令被其他选择器所继承。

【sass父选择器 &简介以及使用方法】

xiejunlan的博客

05-17

745

符号在 Sass 中主要用于@at-root和嵌套规则中。但在嵌套规则中，它的用途最为广泛。当在一个嵌套的规则中使用时，Sass 会将其替换为父选择器的名称。

sass/scss学习笔记

poorguy_aos的博客

12-05

549

简介 scss/sass是css的超集，类似与typescript和JavaScript的关系，最终将转换为css上线,其语法格式有scss和sass(使用“缩进”代替“花括号”)两种本笔记仅参考了中文网中的快速入门和中文文档两个部分，更详细的请参考英文版api 注释多行注释/* */会被编译到css中，单行注释//则不会带!号的多行注释 /*! 版权信息 */ 通常用于加入版权信息，在处于压缩模式的css下也不会被删除变量变量以美元符号开头，赋值方法与 CSS 属性的写法一样 $width

基于《狂神说Java》Vue--学习笔记

wudidahuanggua的博客

06-18

1398

本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟，可以加我好友一起探讨学习。...

sass占位符%选择器的使用

baidu_41564215的博客

08-11

587

%sfqy-basic { // 编译后不会出现在css文件中 float: left; margin-top: 15px; width: 10px; height: 10px; } .sfqy-icon { @extend %sfqy-basic; // @extend继承 background-color: #b1b1b1; } .sfqy-icon-enable { @extend %sfqy-basic; background-color: #2edb2e; }

Sass语法学习（超详细）

qq_51389038的博客

10-19

1220

在一般编写 CSS 的时候呢，我们一遍一遍的编写相同的选择器去处理深层级的样式，而 Sass 给你一种轻松的方式，你可以在一个样式规则中直接编写另一个样式规则，而不是重复相同的选择器，Sass 将自动组合内外部的选择器。通俗点说就是：你可以在父选择器的样式中直接编写子元素的样式，同理你可以在一个子元素的样式中再去编写孙元素的样式，可以一层一层的嵌套着去写样式。字符串函数数字函数列表函数Introspection函数条件函数Map 函数颜色函数@if 指令@each 指令。

Sass--基础：变量、嵌套、导入、注释、混合、继承、运算、可变参数、条件判断、循环语句

小白小白从不日别的博客

07-18

703

特别说明因为sass的环境安装比较复杂，而在我们日后的开发过程中，是不需要这样一个环境的，所以就跳过了安装步骤，那大家可能奇怪如何编译sass，这里我们可以使用其他方式编译sass，例如：考拉软件、构建工具和编辑器都可以做到。如果大家还是希望安装一个sass环境，可以参考官网(opens new window) 使用变量： sass让人们受益的一个重要特性就是它为css引入了变量可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值或者，对于仅使

sass中的占位选择器(%)和@extend

Pzj15817073966的博客

04-26

433

学习sass，对占位选择器(%)的总结

Sass学习笔记 — 3. 深入学习

jiangbo110119的博客

01-30

1636

Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass

Sass 基础教程——语法

老梁的专栏

10-18

1201

Sass 有两种语法，一种是缩进式，和 Ruby 有点像，另一种是大括号式，和 CSS 本身的语法很像。这两种语法要分开使用，不能混用，其中缩进式一般叫做 Sass，对应的文件后缀为，大括号式叫做 SCSS，对应的是。不过两种语法可以通过SCSS 的语法因为和 CSS 非常类似，学习成本比 Sass 低，目前已经成为主流。

一篇文章搞懂sass(scss)预处理器

weixin_53500514的博客

11-30

1775

sass基于Ruby语言开发而成,VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。

03 【Sass语法介绍-嵌套】

DSelegent的博客

08-23

1454

03 【Sass语法介绍-嵌套】

[Sass]嵌套

weixin_33922670的博客

12-09

386

[Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 选择器嵌套属性嵌套伪类...

Sass中的嵌套---结合在线编译详解选择器嵌套、属性嵌套、伪类嵌套

祥哥的说

10-27

727

前端编码规范：优化CSS与Sass的ID、class命名与选择器策略

"本文主要探讨了前端编码规范中关于CSS和Sass (SCSS) 开发的要点，强调了ID和class命名的语义化、避免使用ID进行样式定义、以及减少标签选择器的使用，以提高代码可读性和可维护性。" 在前端编码规范中，CSS和Sass ...