良许Linux教程网 干货合集 详解Sass 嵌套规则与属性

详解Sass 嵌套规则与属性

Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。

image-20220315221750748

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: 0;
 padding: 0;
 list-style: none;
}
nav li {
 display: inline-block;
}
nav a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}

Sass 嵌套属性

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

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

Sass 代码:

font: {
 family: Helvetica, sans-serif;
 size: 18px;
 weight: bold;
}

text: {
 align: center;
 transform: lowercase;
 overflow: hidden;
}

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

Css 代码:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

1ad5ad6eddc451da964a8888a6fd5266d0163210
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部