面向工资编程,面向面试学习!

Sass 嵌套规则与属性

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

如下我们嵌套一个导航栏的样式:

Sass 代码:

nav {  ul {    margin: 0;    padding: 0;    list-style: none}  li {    display: inline-block}  a {    display: block;    padding: 6px 12px;    text-decoration: none}}

实例中,ul, li, 和 a 选择器都嵌套在 nav 选择器中

将以上代码转换未 CSS 代码,如下所示:

Css 代码:

nav ul margin: 0padding: 0list-style: none;}nav li display: inline-block;}nav a display: blockpadding: 6px 12pxtext-decoration: none;}

Sass 嵌套属性

很多 CSS 属性都有同样的前缀,例如:font-family, font-size 和 font-weight , text-align, text-transform 和 text-overflow。

在 Sass 中,我们可以使用嵌套属性来编写它们:

Sass 代码:

font: {  family: Helvetica, sans-serifsize: 18px;  weight: bold;}
text: {  align: center;  transform: lowercaseoverflow: hidden;}

将以上代码转换未 CSS 代码,如下所示:

Css 代码:

font-family: Helvetica, sans-serif;font-size: 18px;font-weight: bold;
text-align: center;text-transform: lowercase;text-overflow: hidden;