初学Less

最新推荐文章于 2024-08-25 20:32:05 发布

azureternite

最新推荐文章于 2024-08-25 20:32:05 发布

阅读量1.8k

点赞数

分类专栏：前端 CSS 文章标签： CSS Less

本文链接：https://blog.csdn.net/azureternite/article/details/52212342

版权

本文介绍了Less，一种CSS预处理器，它扩展了CSS的语法，包括变量、混合、嵌套规则等。文章详细讲解了如何在服务端和客户端使用Less，以及其独特的语言特性，如变量、混合、嵌套规则、运算和函数。同时，还提到了Less在实际项目中的最佳实践，通常推荐在服务端处理以优化性能。

摘要由CSDN通过智能技术生成

Less在CSS语法的基础上进行了扩展，主要包含：

使用Less

npm install -g less

输出到stdout，直接在控制台显示

lessc styles.less

保存为文件

lessc styles.less styles.css

如果需要压缩，要先安装clean-css插件，然后执行命令

lessc --clean-css styles.less styles.min.css

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output) {
   
    console.log(output.css);
});

link中的rel设置成stylesheet/less
先引入less文件，再引入less.js脚本

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

需要注意的是，在浏览器中使用Less虽然入门简单、开发便捷，但在实际项目中因为要考虑性能问题，一般推荐在服务端用node.js或其他第三方工具使用

定义变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
    color: @light-blue;
}

输出

#header {
    color: #6c94be;
}

注意，Less中变量相当于“常量”，因为它们只能被定义一次

变量也可以用在选择器、属性名和字符串拼接中，用@{变量名}形式

/*注意：如果定义成@dialog: .dialog-

关注

专栏目录