less初探

最新推荐文章于 2023-04-06 08:23:07 发布

树海之光

最新推荐文章于 2023-04-06 08:23:07 发布

阅读量323

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/u012277202/article/details/47375237

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

双休闲着无事于是想试试新技术，于是开始研究LESS.

LESS是css预处理器的一种.说简单点，用他自己的一套规则写然后自动生成css。非常方便。

安装的话less也很简单，下一个koala，然后新建一个.less后缀的文件就能写了。

具体过程的话百度都能找到，不再细说。

接下来让我们看看Less的特性

首先他可以定义变量

//定义变量
@ty:#66ccff;
@border1:1px solid #000;
@px1:5px;
@px2:10px;
div{
   color:@ty;
   border:@border1;
}

如图，我们可以预设变量（语法规则@变量名），比如我用天依蓝为例。设置ty是天依蓝的颜色，然后color:@ty就行了。

//继承,混合
.father(@length:50px){
    color:@ty;
    width:@length;  
    height: @length;  
    border:@border1;
}
.son{
    .father;
}
.son2{
     .father(30px);
 }

我们可以预设类然后其他类调用这个类实现继承。甚至预设参数修改，是不是功能很强大。

//嵌套
.father2{
    font-size:20px;
    .father(40px);
    .son3{
    font-size:12px;
    .father(10px);
    background-color:red;
    }
}

最后我们可以直接嵌套着写，逻辑关系特别清楚。

好了让我们看看最终效果吧。html代码如图，css会通过你的koala自动生成。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="test2.css" type="text/css" media=""/>
	
</head>
<body>
	<div class="son">1</div>
	<div class="son2">2</div>
	<div class="father2">3
	<div class="son3">4</div>
	</div>
</body>
</html>