less常用方法讲解

1 .安装方式

安装less的同时也安装less加载器 less-loader 在webpack里面配置就可以,webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换less为css 配置详情请点击 .
npm 安装命令
- npm install less less-loader --save
yran 命令
- yarn add less less-loader
在浏览器环境中使用 Less

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

2. 使用方法

变量（Variables）

使用 @ 来定义变量


	@width: 10px;
	@height: @width + 10px;
	#header {
	  width: @width;
	  height: @height;
	}
	
	/*编译为*/
	#header {
	  width: 10px;
	  height: 20px;
	}

混合（Mixins）

混合可以将一个定义好的 class A 轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

	
	.rounded-corners (@radius: 5px) {
	  border-radius: @radius;
	  -webkit-border-radius: @radius;
	  -moz-border-radius: @radius;
	}

	#header {
	  .rounded-corners;
	}
	#footer {
	  .rounded-corners(10px);
	}
	/* 生成的 CSS */
	
	#header {
	  border-radius: 5px;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	}
	#footer {
	  border-radius: 10px;
	  -webkit-border-radius: 10px;
	  -moz-border-radius: 10px;
	}

嵌套（Nesting）

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS

		
	#header {
	  color: black;
	  .navigation {
	    font-size: 12px;
	  }
	  .logo {
	    width: 300px;
	    &:hover { text-decoration: none }
	  }
	}
	/*或者这样写:*/ 
	#header        { color: black;
	  .navigation  { font-size: 12px }
	  .logo        { width: 300px;
	    &:hover    { text-decoration: none }
	  }
	}

	/*编译为*/
	#header { color: black; }
	#header .navigation {
	  font-size: 12px;
	}
	#header .logo { 
	  width: 300px; 
	}
	#header .logo:hover {
	  text-decoration: none;
	}

运算（Operations）

任何数字、颜色或者变量都可以参与运算

	@base: 5%;
	@filler: @base * 2;
	@other: @base + @filler;
	
	color: #888 / 4;
	background-color: #112244 + #111;
	height: 100% / 2 + @filler;
	
	/*编译结果为*/
	color: #222;
	background-color: #223355;
	height: 65%;

calc() 特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

	@var: 50vh/2;
	width: calc(50% + (@var - 20px));
	/*编译*/
	width: calc(50% + (25vh - 20px));

函数（Functions）

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等更多请查看函数手册.

	
	@base: #f04615;
	@width: 0.5;
	
	.class {
	  /*percentage百分比函数将0.5转换为50%*/
	  width: percentage(@width); 
	  /*将颜色饱和度增加5%*/
	  color: saturate(@base, 5%);
	  /*颜色亮度降低25%并且色相值增加8*/
	  background-color: spin(lighten(@base, 25%), 8);
	}

作用域（Scope）

less 中的范围非常类似于CSS。变量和混合变量首先在本域查找，如果找不到它们，则从“父”范围继承它们。

	/*例题1*/
	@var: red;
	#page {
	  @var: white;
	  #header {
	    color: @var; /*white*/ 
	  }
	}
	
	/*例题2*/
	@var: red;
	#page {
	  #header {
	    color: @var;  /*white*/ 
	  }
	  @var: white;
	}

注释（Comments）

块注释和行注释都可以使用：


	/* 一个块注释
	 * style comment! */
	@var: red;
	
	// 这一行被注释掉了！
	@var: white;

导入（Importing）

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带,如果你想导入一个 CSS 文件而且不想 LESS 对它进行处理，只需要使用 .css 后缀就可以,这样 LESS 就会跳过它不去处理它

	@import "lib.less";
	@import "lib";
	@import "lib.css";

1 .安装方式

2. 使用方法

猜你喜欢