Less 嵌套规则 |
您所在的位置:网站首页 › less的写法 › Less 嵌套规则 |
描述
它是一组 CSS 属性,允许将一个类的属性用于另一个类,并且包含类名作为其属性。 在 LESS 中,可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。 例子 下面的例子演示了在 LESS 文件中使用嵌套规则: Nested Directives Example using Nested DirectivesLESS 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 |