Less 简介

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

Less 英文网:https://lesscss.org 

Less 中文网:http://lesscss.cn/#

简单示例

下面通过一个简单示例演示一下 Less 的用法。如下:

// 定义变量,后续详细介绍
// 字体颜色
@baseFontColor: #333333;
// 背景颜色
@baseBgColor: #F0F0F0;

// 设置 box 样式
.box {
   // 引用变量 @baseFontColor,后续介绍
   color: @baseFontColor;
   background: @baseBgColor;
   div {
       font-size: 16px;
       color: @baseFontColor;
   }
}

接着通过命令编译 less,但在编译前需要安装 node.js 和 less 插件,运行如下命令安装 less 插件:

npm install -g less

成功安装 less 插件后,使用 lessc 命令编译 Less,命令如下:

lessc demo1.less

编译后,输出如下 CSS:

.box {
 color: #333333;
 background: #F0F0F0;
}
.box div {
 font-size: 16px;
 color: #333333;
}
说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号