Less

最新推荐文章于 2022-11-25 14:58:59 发布

zihanzy.com

最新推荐文章于 2022-11-25 14:58:59 发布

阅读量1.3k

点赞数

分类专栏： html5&css3 文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_45143481/article/details/104380889

版权

html5&css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

定义

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端

下面通过一些例子来加深对它的理解
情景一
我们知道网页一般有主题色，很多地方都会用到主题色，但如果有一天我们要更换主题色怎么办？是不是要一个一个的替换，这样做是不是显得很麻烦且浪费时间
我们想像，既然这个主题色可能会变，那能不能像编程语言那样将主题色定义成变量
需要使用主题色的地方我们就使用那个变量即可，如果要换直接改变变量值就是这样是不是就解决我们的问题了
如下代码（代码只做理解并不能正常运行）

var mainColor = skyblue;
#title {
	background-color: mainColor;
}
#person{
	color:mainColor;
}

情景二
我们在编写css的时候有时候可能会写很多重复的样式代码，有时候仅仅因为某个属性的取值不同我们就要不停的复制-----粘贴，这样是不是也很麻烦？
如果我们将那些重复的代码定义成一个”类“，或者一个”函数“是不是可以解决我们的问题
对于属性值的变化我们可以传入参数即可。
如下代码（代码只做理解，并不能正常运行）

.border(color:skyblue){
	border-top 1px solid color;
	border-bottom: 1px solid  color
}//定义一个border类
.div1{
	.border;//不传参数默认边框颜色“天蓝”
}
.div2{
	.border(red);//指定边框颜色”红“
}

相信看了这里你已经感受到了less的便利之处，上面两种只是其简单运用
如果你想了解更多请访问 Less官网，Less中文网，本篇文章只简单介绍less及其less编译css的方法。
在Less中我们定义变量通过@声明，使用变量时也得加@前缀

@width = 20px;

div{
	width:@width;
}

情景二讲到“类”的概念，在Less中称为混合(Mixin)

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

//定义一个Mixin
.border(@color:skyblue){
	border-top: 1px solid @color;
	border-bottom :1px solid @color;

}
div{
	.border;
}

div2{
	.border(red)
}

在Less中也可以使用注释，他的注释分为两种
单行注释“//”这种注释在编译成css文件时会被省略
多行注释 “/**/”这种注释在编译成css文件时不会省略
更多详见官网文档。

Less编译

下面介绍两种编译Less的方法
1.通过命令行进行编译
这种方法使用起来比较复杂但是效率较高。

注意：此方法基于node.js，如果你没有安装node.js请阅读下面步骤安装。

打开node.js的官网https://nodejs.org/zh-cn/
下载node.js 在这里插入图片描述
下载后的文件

双击打开，一路点‘next’

这里同意一下

完成后找到安装目录，出现以下文件安装成功
在这里插入图片描述
为了方便直接在命令行使用我们需为此目录配置环境变量
配置环境变量的方法这里不在阐述
配置完成后，命令行输入 node -v检测node环境是否搭建好

在这里插入图片描述
输入 npm -v检测npm是否搭建好

接下来下载less环境
npm install less -g
通过lessc -v检测less环境是否搭建好
在这里插入图片描述
上述操作完成后我们试着编译less文件
lessc less文件cmd窗口预览编译后的css样式
lessc less文件 > css文件将编译后的less文件写入到css文件中
新建less文件如下

//less测试文件
/* less多行注释 */
@width:800px;
@height:300px;
#container{
    //设置container元素
	width:@width;
	height:@height;
	//设置container里面的nav元素
	#nav{
		width:100%;
		height:100%;
		//设置nav里面的直接子代元素（ul > li）
	  > ul > li{
	  	float: left;
	  	list-style: none;
        //设置 #nav > ul > li 里面的a元素
	  	a{
	  		color:red;
	  		text-decoration: none;
	  	}
	  }
	}
}

编译后的css样式
在这里插入图片描述
写入文件

编译后的css文件

/* less多行注释 */
#container {
  width: 800px;
  height: 300px;
}
#container #nav {
  width: 100%;
  height: 100%;
}
#container #nav > ul > li {
  float: left;
  list-style: none;
}
#container #nav > ul > li a {
  color: red;
  text-decoration: none;
}

2.引入less.js文件编译less文件
这种方式直接在浏览器使用

<link rel="stylesheet/less" type="text/css" href="less.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

//less测试文件
/* less多行注释 */
@width:800px;
@height:300px;
#container{
    //设置container元素
	width:@width;
	height:@height;
	border:1px solid red;
	//设置container里面的nav元素
	#nav{
		width:100%;
		height:100%;
		//设置nav里面的直接子代元素（ul > li）
	  > ul > li{
	  	float: left;
	  	list-style: none;
        //设置 #nav > ul > li 里面的a元素
	  	a{
	  		color:red;
	  		text-decoration: none;
	  	}
	  }
	}
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet/less" type="text/less" href="less.less">
</head>
<body>
<div id='container'>
    <div id="nav">
	    <ul>
		    <li><a href="#">2134567i88i7u6</a></li>
	    </ul>
    </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
</body>
</html>