LESS第一课

贵哥的编程之路

发布于 2020-10-28 15:35:31

5550

发布于 2020-10-28 15:35:31

less是什么? css预处理器。升级版的css。有什么优点？赋予了动态语言需要具备的变量函数if for之类的把。那怎么使用运行less代码啊? 第一：先引入less.css与less.js运行，然后是要预编译。在那里预编译？记住哈，编译之前是先.less文件的。然后编译后改成.css文件哈(考拉软件是识别less文件的哈，编译转换成css文件就行了哈。) 开源中国 : https://tool.oschina.net/less 这个网站上编译。或者是在下载考拉软件来编译哈. 考拉客户端: http://koala-app.com/index-zh.html 然后直接把编译完成的文件.放在.css文件中，然后是运行就行了.

注释：多行注释会被编译，凡是编译的什么.less都会出现在编译完成后的css文件中。单行注释不会被编译，所以不会出现在编译完成后的.css文件中。再次提醒一下，先less文件，编译后才成为css文件的哈，不是less文件编译不了的啊！！！！！

变量: 这里的less语法的变量与jsphp什么的变量差不多的啊。格式:@变量名:值; 定义的哈。怎么使用? @变量名; 变量与变量之间可以像话赋值。 @h:@w; 5.和js一样less中的变量也有全局变量和局部变量定义在{}外面的就是全局的变量, 什么地方都可以使用定义在{}里面的就是局部变量, 只能在{}中使用注意定: less中的变量是延迟加载的, 写到后面也能在前面使用 6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响和js一样在访问变量时会采用就近原则我举个例子吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    	/*编译前的less文件*/
    	/*@h:400px;
    	@w:300px;
    	@c:red;
    	.box1
    	{
    		width: @w;
    		height: @h;
			background: @c;
			margin-bottom: 20px;
    	}
    	.box2
    	{
    		width: @w;
    		height: @h;
			background: @c;
    	}*/
    	/*编译后的css文件*/
		.box1 {
		  width: 300px;
		  height: 400px;
		  background: #ff0000;
		  margin-bottom: 20px;
		}
		.box2 {
		  width: 300px;
		  height: 400px;
		  background: #ff0000;
		}

    </style>
</head>
<body>
	<div class="box1"></div>
    <div class="box2"></div>
</body>
</html>