学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学,可以点心心支持一下哈
一、Less介绍
less官方文档 lesscss.org/
less中文文档 less.bootcss.com/
less是一种css预处理器,它扩展了css语言,提供了变量、嵌套、混合、运算等功能,使样式表的编写更加灵活和高效,用来书写css的工具。
通俗的说,less是一种专门编写css代码的语言(工具),通过less来编写css代码变得更灵活,更高效,更容易维护。
二、什么是预处理(预编译)
预处理(或预编译)就像在做甜点之前,你有一份简单的食谱(css),但你想要加入一些特殊的烘焙材料,以便更方便地制作美味的点心。less 就是你的烘焙助手,负责在烘焙之前对这份食谱进行一些特殊的处理,通过预处理,让你更轻松、更有创意地制作出令人垂涎欲滴的点心。 预处理就可以将less文件代码转换为css代码。
注意在less文件中,less代码格式并不能被浏览器识别。想将less文件代码变成css代码,必须先将这个less文件预先进行处理。
三、Less的使用
1. 安装Less
首先,确保你的项目中已经安装了less。你可以使用npm安装less:
npm install -g less
或者通过CDN在HTML文件中引入less:
2. 基础语法
变量
在LESS中,你可以使用变量来存储和重用值。变量以@符号开头。
@width: 100px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
background-color: aqua;
}
在这个例子中,@width是一个变量,它的值是100px。在#header中,我们使用了这个变量来设置背景颜色。
嵌套
LESS允许你使用嵌套规则,使样式表更加清晰和结构化。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
margin-right: 5px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
color: red;
}
}
}
}
在这个例子中,nav规则包含了嵌套的ul、li和a规则。这样可以更容易地理解和组织样式。
混合(Mixin)
混合允许你在一个样式规则中引入另一个样式规则的属性。
.border-radius(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.button {
.border-radius(5px);
}
在这个例子中,.border-radius是一个混合,它接受一个@radius参数,并在.button规则中使用该混合来添加圆角边框。
导入其他Less文件
你可以使用@import导入其他less文件,将样式表模块化。
@import "reset";
@import "variables";
@import "mixins";
这个例子展示了如何导入名为reset.less、variables.less和mixins.less的文件。这样可以将样式表分割成更小的部分,使代码更易维护。
3. 运算
less允许进行基本的数学运算,这对于处理尺寸和颜色等方面很有用。
@base: 30px;
@padding: @base * 2;
.element {
margin: @base + 5px;
padding: @padding;
background-color: aqua;
}
在这个例子中,@padding的值是@base乘以2。less会自动计算结果,你可以在样式规则中直接使用这些运算结果。
4. 函数与操作
less内置了一些函数和操作,用于处理颜色、字符串和其他数据类型。
@color: #3498db;
.darken-bg(@color, @percent) {
background-color: darken(@color, @percent);
}
.container {
.darken-bg(@color, 10%);
}
在这个例子中,darken是less内置的颜色函数,我们通过darken函数降低背景颜色的亮度。
5. 条件语句
less支持使用条件语句,根据条件选择应用样式。
@width: 100px;
.condiction {
width: @width;
height: @width;
& when (@width > 500) {
服务器托管网 background-color: red;
}
& when (@width
在这个例子中,使用& when语法根据@width的值应用不同的背景颜色。
6. 循环
less还支持循环,允许你重复应用样式。
.loop(@counter) when (@counter > 0) {
.class-@{counter} {
width: @counter * 10px;
}
.loop(@counter - 1);
}
.loop(5);
在这个例子中,.loop混合使用了递归来创建一系列带有不同宽度的样式类。
7.嵌套规则的作用域
嵌套规则在less中有自己的作用域,这意味着你可以更灵活地组织样式。
#header {
h1 {
font-size: 26px;
}
}
#footer {
h1 {
font-size: 18px;
}
}
在这个例子中,h1规则在#header和#footer中分别有不同的作用域。
8.字符串插值
字符串插值允许你在样式中动态使用变量。
@property: color;
.widget {
@{property}: #888;
background-@{property}: red;
}
在这个例子中,使用@{}语法插入变量,创建动态的属性名称。
9. 编译Less
要在本地编译 less 文件,你可以使用 lessc 命令行工具。首先,确保你已经在终端或命令提示符中安装了 less:npm install less -g
然后,在less文件所在目录运行以下命令:
lessc your-styles.less output.css
其中,your-styles.less 服务器托管网是你的less文件,output.css 是输出的css文件。 或者使用构建工具,如webpack、gulp等,配置相应的less插件进行自动编译。 编译完成后,你可以在浏览器中链接到生成的css文件,以查看效果。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: Python 二维矩阵加一个变量运算该如何避免 for 循环
Python 二维矩阵加一个变量运算该如何避免 服务器托管网for 循环 引言 正文 方法1——使用 for 循环 方法2——不使用 for 循环 引言 今天写代码的时候遇到了一个问题,比如我们需要做一个二维矩阵运算,其中一个矩阵是 2×2 的…