Scss中的嵌套规则

1. Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

2. 父选择器 &

3. 属性嵌套

1. Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

#app {  h1 {text-align: center;}
}

编译结果

#app h1 { text-align: center; }

避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

2. 父选择器 `&`

在上一个例子中如果父子嵌套，但是我想操作 #app 的:hover 此时可以用 & 代表嵌套规则外层的父选择器。

a {font-weight: bold;text-decoration: none;&:hover { text-decoration: underline; }body.firefox & { font-weight: normal; }
}

编译为

a {font-weight: bold;text-decoration: none;
}
a:hover {text-decoration: underline;
}
body.firefox a {font-weight: normal;
}

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递

&所在的位置只代表了他的父亲，也就是说在每一层，指向是都是他所在的父元素。

#main {color: black;a {font-weight: bold;&:hover { color: red; }}
}

编译为

#main {color: black;
}
#main a {font-weight: bold;
}
#main a:hover {color: red;
}

3. 属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {font: {family: fantasy;size: 30em;weight: bold;}
}

编译为

.funky {font-family: fantasy;font-size: 30em;font-weight: bold;
}

命名空间也可以包含自己的属性值，例如：

.funky {font: 20px/24px {family: fantasy;weight: bold;}
}

编译为

.funky {font: 20px/24px;font-family: fantasy;font-weight: bold;
}

Scss中的嵌套规则相关推荐

Less的Mixin嵌套规则
在使用标准CSS时,要为多层嵌套的元素定义样式,要么使用后代选择器从外到内的嵌套定义,要么给这个元素加上类名或 id 来定义.这样的写法虽然很好理解,但维护起来很不方便,因为无法清晰了解到样式之间的关 ...
SCSS 中这些技巧，你可能还不知道！
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:19组清风链接:https://juejin.cn/post/69968554685 ...
SCSS 中这些实用技巧，你可能还不知道！
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:19组清风链接:https://juejin.cn/post/69968554685 ...
一天搞定HTML----标签的嵌套规则06
标签的嵌套规则代码演示 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
浅谈块级元素和内联元素的嵌套规则
1. 替换和不可替换元素从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容. 例如浏览器会根据<img> ...
web前端中的命名规则
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层头部:header --用于头部主要内容:mai ...
HTML 之块级元素、行内元素和行内块元素之间的嵌套规则
一.简介之前对元素之间的嵌套规则没有进行系统的梳理,一直以为各种元素之间可以随意进行嵌套,但在实际敲代码的过程中发现并不是这样,大部分标签之间是可以随意嵌套的,但也存在一些特殊规则,比如:p标签内不 ...
layui totalRow 多层嵌套json_鹏华资产40亿产品兑付追踪：中招嵌套结构或踩雷非标-基金频道...
经济观察报记者洪小棠工商银行(601398,股吧)代销,业绩比较基准,在投资者眼中看起来"稳稳的"资管产品,却发生了逾期事件. 10月份以来,有多位投资者向经济观察报记者反映自 ...

Scss中的嵌套规则

1. Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

2. 父选择器 `&`

3. 属性嵌套

Scss中的嵌套规则相关推荐

最新文章

热门文章