Less

最新推荐文章于 2020-11-17 18:11:03 发布

zihanzy.com

最新推荐文章于 2020-11-17 18:11:03 发布

阅读量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>

这种方式只能以HTTP的方式打开，不然无法使用less

zihanzy.com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Less

定义Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端下面通过一些例子来加深对它的理解情景一我们知道网页一般有主题色，很多地方都会用到主题色，但如果有一天我们要更换主题色怎么办？是不是要一个一个的替换，这样做是不是显得很麻烦且浪费时间我们想像，既...
复制链接

扫一扫

专栏目录