拥抱前端开发的未来，掌握Less的魔力！在我们精心撰写的博客文章中，你将发现如何通过学习Less这一强大的CSS预处理器，以更高效、更可维护的方式编写样式代码。无论你是初学者还是经验丰富的开发者，我们的指南将带你逐步了解Less的核心概念和语法。通过实际示例和深入解析，你将从中汲取灵感，提升你的前端技能。加入我们的学习社区，与同行分享知识，一同探索创新、时尚而富有表现力的前端设计世界！
简介
官网
https://less.bootcss.com/
搭建
安装node.js
安装Less
注意：安装不了直接win+x在管理员的终端窗口安装
cnpm install -g lesslessc -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
}
