预处理器less

D之光

已于 2022-03-19 21:01:32 修改

阅读量2.2k

点赞数 4

分类专栏：零基础学前端学习笔记文章标签： less css

于 2022-02-01 21:14:52 首次发布

本文链接：https://blog.csdn.net/li520_fei/article/details/122766246

版权

文章目录

预处理器less

预处理器less

less官方网站

bootstrap中less教程

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less能干啥

举个例子

这是css写法，如果写的太多搞不清楚嵌套层级

* {
   
  margin: 0;
  padding: 0;
}
#wrap {
   
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
   
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: pink;
  height: 100px;
  width: 100px;
}

less写法

*{
    margin: 0;
    padding: 0;

    #wrap{
        position: relative;
        width: 300px;
        height: 400px;
        border: 1px solid;
        margin: 0 auto;
        
        .inner{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background: pink;
            height: 100px;
            width: 100px;
        }
    }
}

一、less的使用环境

1.运行时编译

在浏览器环境中使用 Less

不建议使用这种方式，应该预编译

运行时编译(html中样式是less代码，在运行的时候编译【通过引用相关js文件】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/less">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				width: 300px;
				height: 400px;
				border: 1px solid;
				margin: 0 auto;
				.inner{
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					background: pink;
					height: 100px;
					width: 100px;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				
			</div>
		</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
</html>

less文件也可以下载下来，然后引用本地文件<script src="less/less.min.js"></script>
style文件若为单独的.less文件 <link rel="stylesheet/less" type="text/less" href="styles.less" /> 但此时需要考虑跨域的问题

2.预编译

预编译(开发的时候写less文件，然后转化为css文件后引用)

(1).借助考拉编译less

koala 官网

这个不太好用

(2). vscode 插件 Easy LESS

保存拓展名为less 的文件，自动编译为css文件

这个太香了

(3). vscode 插件 Easy LESS

二、less的语法

1. less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

2. less中的变量

使用@来申明一个变量：@pink：pink;

作为普通属性值只来使用：直接使用@pink
作为选择器和属性名：@{selector的值}的形式
变量的延迟加载，及其作用域{}范围

@color:deeppink;
@m:margin;
@selector:#wrap;
@url:'../img/1.jpg';
*{
    @{m}: 0;
    padding: 0;
    background: red url(@url);
    //也可以写为 background: red url("@{url}");
}
@{selector}{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: @color;
        height: 100px;
        width: 100px;
    }
}

//演示变

最低0.47元/天解锁文章

D之光

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
预处理器less

预处理器lessless官方网站bootstrap中less教程less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。less能干啥举个例子这是css写法，如果写的太多搞不清楚嵌套层级* { margin: 0; padding: 0;}#wrap { position: relative; width: 30
复制链接

扫一扫