Less 嵌套规则 - 蝴蝶教程

定义

它是一组CSS属性，允许将一个类的属性用于另一个类，并将类名作为其属性。在LESS中，您可以使用类或id选择器以与CSS样式相同的方式声明mixin。它可以存储多个值，并在必要时可以在代码中重用。

示例

以下示例演示了LESS文件中嵌套规则的使用-

nested_rules.html

<!doctype html>
<head>
    <link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
    <div class = "container">
        <h1>第一个标题</h1>
        <p> LESS是一种动态样式表语言，可扩展CSS的功能。</p>
        <div class ="myclass">
            <h1>第二个标题</h1>
            <p> LESS启用网站的可定制，可管理和可重复使用的样式表。</p>
        </div>
    </div>
</body>
</html>

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

style.less

.container {
    h1 {
        font-size: 25px;
        color:#E45456;
    }
    p {
        font-size: 25px;
        color:#3C7949;
    }

    .myclass {
        h1 {
            font-size: 25px;
            color:#E45456;
        }
        p {
            font-size: 25px;
            color:#3C7949;
        }
    }
}

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

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

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

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

style.css

.container h1 {
    font-size: 25px;
    color: #E45456;
 }
 
 .container p {
    font-size: 25px;
    color: #3C7949;
 }
 
 .container .myclass h1 {
    font-size: 25px;
    color: #E45456;
 }
 
 .container .myclass p {
    font-size: 25px;
    color: #3C7949;
 }

输出结果

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

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

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

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