Less 嵌套指令和冒泡

定义

您可以以嵌套选择器的相同方式来嵌套诸如媒体和关键帧之类的指令。您可以将指令放在顶部，并且其相关元素在其规则集中不会更改。这被称为冒泡过程。

示例

下面的示例演示了LESS文件中嵌套指令的使用和冒泡-

nested_directives_bubbling.html

<!doctype html>
<head>
    <link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
    <h1>使用嵌套指令的示例</h1>
    <p class="myclass">通过LESS可自定义，可管理且可重复使用的网站样式表。</p>
</body>
</html>

现在让我们创建一个与CSS非常相似的文件style.less，唯一的区别是它将以.less扩展名保存。 .html和.less这两个文件都应在 F 盘的文件夹lesscode内创建。

style.less

.myclass {
    @media screen {
       color: blue;
       @media (min-width: 1024px) {
          color: green;
       }
    }
    @media mytext {
       color: black;
    }
 }

使用以下命令将style.less文件编译为style.css-

PS F:\lesscode> lessc style.less style.css

当您运行上述命令时，它将自动创建style.css文件。每当您更改LESS文件时，都需要在cmd中运行上述命令，然后style.css文件将得到更新。

运行以上命令时，style.css文件将具有以下代码-

style.css

@media screen {
    .myclass {
       color: blue;
    }
 }
 @media screen and (min-width: 1024px) {
    .myclass {
       color: green;
    }
 }
 @media mytext {
    .myclass {
       color: black;
    }
 }

输出结果

现在让我们执行以下步骤，看看上面的代码如何工作-

将上面的html代码保存在nested_directives_bubbling.html文件中。

在浏览器中打开此HTML文件，将显示以下输出。

如果不懂以上命令操作，请先阅读我们 Less 安装