锐客网

  1. 首页 > 睿知 > it技术 > >

SASS嵌套用法示例

IT知识代码示例

SASS嵌套使我们的工作非常高效, 我们不必一次又一次地重复外部选择器。我们可以按照嵌套选择器在HTML文件中出现的顺序编写它们(即"父-外部选择器"和"子-内部选择器"表单)。 SASS将自动执行合并工作。
请参阅以下示例：
SASS文件：

ul {list-style-type: none; li {display: inline-block; a {text-decoration: none; display: inline-block; padding: 10px 15px; color: blue; }}}

编译的CSS文件：
ul {list-style-type: none; }ul li {display: inline-block; }ul li a {text-decoration: none; display: inline-block; padding: 10px 15px; color: blue; }

SASS还允许嵌套具有不同组合器的选择器。你可以将组合器放在内部选择器的开头或外部选择器的末尾或两个的中间。
请参阅以下示例：
SASS文件：
ul { + li {display: inline-block; }}li {> {a {text-decoration: none; }}}p ~ {span {text-decoration-line: underline; text-decoration-style: double; }}

【SASS嵌套用法示例】编译的CSS文件：
ul + li {display: inline-block; }li > a {text-decoration: none; }p ~ span {text-decoration-line: underline; text-decoration-style: double; }

    推荐阅读


    上一篇：JavaScript面向对象的程序设计及原型链的理解运用全解【重点】

    下一篇：操作系统中目录的结构详细介绍