CSS 预处理器 Less

原创已于 2025-02-20 21:54:22 修改 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS库

于 2021-04-12 11:27:52 首次发布

CSS库专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript的URL.createObjectURL方法在网页上预览选择的本地视频文件。通过监听input[type=file]元素的change事件，获取文件并将其赋值给video元素的src属性，实现视频预览。同时，文章提到了createObjectURL生成的URL会在内存中持续存在，直到文档卸载或调用revokeObjectURL进行释放。

Less 是一种 CSS 的预处理器。通过 Less 来编写 CSS 代码更加灵活高效，易于维护。

安装 Less：

浏览器并不支持 Less 代码，因此必须先将 Less 文件预先进行处理，转换为 CSS 代码。

安装：npm install -g less；
创建 test.less 文件，使用 lessc test.less test.css 命令即可将 test.less 文件转换的 css 代码保存在 test.css 文件中。

Less 语法：

Less 语法都和 Sass 语法类似。

导入文件：

Less 中使用 @import 命令导入外部文件。

注释

Less 的注释有两种：单选注释以 // 开头，// 后面的内容为注释的内容；多行注释以 /*开头，以 */ 结束，中间的内容为注释的内容。

变量：

Less 变量名以 @ 开头。

嵌套：

Less 允许选择器嵌套。在嵌套的代码块内部，可以使用父选择器 &。

计算功能：

Less 允许在样式表中进行数学运算。

条件语句：

格式为 statement when(conditons)。

.font when (@size>200px) {
	font-size: 20px;
}

循环语句：

Less 不支持循环语句。

自定义函数：

Less 不支持自定义函数。可以使用混合来模拟函数的行为。

继承：

使用 :extend 关键字，可以把一个选择器与其它已存在的选择器组成并集，而它自己定义的样式会单独为一个选择器。

div{	
	height: 30px;
}
p:extend(div){	
	whidth:30px;
}

// 转换成 CSS 代码后：
div, p {  
	height: 30px;
}
p {  
	whidth: 30px;
}

混合：

混合是可以重用的代码块，允许定义一组样式属性，并在需要的地方重用它们。

被引用的选择器只能是 class 选择器或是 id 选择器。支持传入参数。

.div{	
	height: 30px;
}
p{	
	.div();	
	width:30px;
}

// 转换成 CSS 代码后：
.div{	
	height: 30px;
}
p {  
	height: 30px;  
	width: 30px;
}