Less 嵌套规则

您所在的位置:网站首页 less的写法 Less 嵌套规则

Less 嵌套规则

2024-04-19 18:23| 来源: 网络整理| 查看: 265

描述

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

例子

下面的例子演示了在 LESS 文件中使用嵌套规则:

Nested Directives Example using Nested Directives

LESS enables customizable, manageable and reusable style sheet for web site.

接下来,创建文件 style.less。

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:

lessc style.less 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.html 文件中。

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

输出 相关教程

CSS教程



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3