编辑
拥抱前端开发的未来，掌握Less的魔力！在我们精心撰写的博客文章中，你将发现如何通过学习Less这一强大的CSS预处理器，以更高效、更可维护的方式编写样式代码。无论你是初学者还是经验丰富的开发者，我们的指南将带你逐步了解Less的核心概念和语法。通过实际示例和深入解析，你将从中汲取灵感，提升你的前端技能。加入我们的学习社区，与同行分享知识，一同探索创新、时尚而富有表现力的前端设计世界！
简介
官网
搭建
安装node.js
安装Less
注意：安装不了直接win+x在管理员的终端窗口安装
cnpm install -g less
lessc -v
编译
命令行编译
终端命令：
lessc style.less style.css
直接使用【在服务器运行情况下】
在项目中引入Less文件与解析Less的js文件
<link rel="stylesheet/less" type="text/css" href="style.less"/> <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
下载服务器：
cnpm install -g http-server
运行服务器：
http-server
基础
作用域、注释、导入
注释
块注释和行注释都可以使用
/* 一个块注释 * style comment! */ @var: red;
// 这一行被注释掉了！ @var: white;
导入
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.less或.less文件后缀
@import "library"; // library.less @import "typo.css";
作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从“父”级作用域继承
与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义
嵌套
基础使用
#header { color: black; .logo { width: 300px; } }
:hover伪选择器使用
&表示当前选择器的父级
.box{ width: 100px; height: 100px; background-color: gray; &:hover{ background-color: red; } }
变量
声明变量
@width: 1200px; .container { width: @width; }
变量可以先使用在声明
.container { width: @width; } @width: 1200px;
选择器使用变量
@my-selector: banner; .@{my-selector} { font-weight: bold; }
url地址使用变量
@images: "../img"; body { color: #444; background: url("@{images}/hello.png"); }
属性当作变量
使用$prop语法可以很容易地将属性当作变量来处理 .widget { color: #efefef; background-color: $color; margin: 15px; }
混合
简介
将一个类的属性用于另一个类
.p1 { color: red; } .p2 { background: #64d9c0; .p1(); } .p3 { background: #DAA520; .p1; }
混合添加括号
如果你想创建一个混合，但是你不希望这个混合出现在你的CSS中，在混合定义后面加圆括号
/**不会有效果**/ .my-other-mixin() { background: white; } .class { .my-other-mixin(); }
混合中使用!important
在混合调用后使用!important关键字将它继承的所有属性标记为!important
.foo (@bg: #f5f5f5; @color: #900) { background: @bg; color: @color; } .important { .foo() !important; }
带参数的混合
混合也可以接受参数，这些参数是混合时传递给选择器块的变量
.border-radius(@radius,@color:red) { border-radius: @radius; color: @color } #header { .border-radius(4px,blue); } .button { .border-radius(6px); }
运算
加法
@fontSize: 10px; .myclass { font-size: @fontSize + 10; color: green; }
减法
@fontSize: 10px; .myclass { font-size: @fontSize - 5; color: green; }
乘法
@fontSize: 10px; .myclass { font-size: @fontSize * 2; color: green; }
除法【添加括号】
@fontSize: 10px; .myclass { font-size: (@fontSize / 2); color: green; }
进阶
转义
简介
允许你使用任意字符串作为属性或变量值
任何 ~"anything" 形式的内容都将按原样输出
示例
@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }
函数
percentage 将数值转换为百分比
@width: 0.5; .class { width: percentage(@width); // returns `50%` }
ceil 向上取整
.nav{ width: ceil(199.5); // 200 }
floor 向下取整
.nav{ width: ceil(199.5); // 199 }
