提供网站建设课程代码,厦门免费自助建站模板,dw制作wap网站怎么做,网站开发为什么需要域名文章目录 前言描述style.less输出后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果出现错误#xff0c;… 文章目录 前言描述style.less输出后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 描述
它是一组 CSS 属性允许将一个类的属性用于另一个类并且包含类名作为其属性。 在 LESS 中可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。 它可以存储多个值并且可以在必要时在代码中重复使用。
例子 下面的例子演示了在 LESS 文件中使用嵌套规则
html
headtitleNested Directives/titlelink relstylesheet typetext/css hrefstyle.css /
/head
body classcontainerh1Example using Nested Directives/h1p classmyclassLESS enables customizable, manageable and reusable style sheet for web site./p
/body
/html
接下来创建文件 style.less。
style.less
span stylefont-weight: normal;span./spanspancontainer/spanspan{/spanspanh1/spanspan{/spanspanfont/spanspan-/spanspansize/spanspan:/spanspan /spanspan25px/spanspan;/spanspancolor/spanspan:#/spanspanE45456/spanspan;/spanspan/spanspan}/spanspanp/spanspan{/spanspanfont/spanspan-/spanspansize/spanspan:/spanspan /spanspan25px/spanspan;/spanspancolor/spanspan:#/spanspan3C7949/spanspan;/spanspan/spanspan}/spanspan/spanspan./spanspanmyclass/spanspan{/spanspanh1/spanspan{/spanspanfont/spanspan-/spanspansize/spanspan:/spanspan /spanspan25px/spanspan;/spanspancolor/spanspan:#/spanspanE45456/spanspan;/spanspan/spanspan}/spanspanp/spanspan{/spanspanfont/spanspan-/spanspansize/spanspan:/spanspan /spanspan25px/spanspan;/spanspancolor/spanspan:#/spanspan3C7949/spanspan;/spanspan/spanspan}/spanspan/spanspan}/spanspan
/spanspan}/span/span您可以使用以下命令将 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 文件将显示如下输出。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
