less

关键词：

在遇到less之前，一直和css交往，当less出现在我码农生涯的时候，被她给深深地吸引。从此，less成了自己码农生活里面的一房，css退居二房！那么，less到底有什么魅力让我如此迷上她呢？

less初识

Less是一门CSS预处理语言，它扩展了CSS 语言，为CSS赋予了动态语言的特性，增加了变量、Mixin、函数等特性，使CSS 更易维护和扩展。

Less可以运行在node或者浏览器端，对于初学者来说，使用第三方编辑器考拉Koala来学习less

Koala

　　安装Koala → 打开Koala → 面板添加CSS文件夹（先在里面创建.less文件） → 选中.less文件 → 右侧编译选项，默认自动编译 → 选中Refresh（生成相应CSS文件） → 用编辑器打开less文件，实现CSS编写 → 自动生成CSS文件

less语法

变量

　　在页面中，需要重复使用或者后期需要修改的样式提前出来，写成变量。该变量可是一个边框样式、内容样式、像素值……

　　格式：@varablename:value ；

　　less中声明变量使用 @ 符号，且变量不会被编译css文件中；

less文件清单：

@f_color:#ffffff;          　　 //声明一个背景颜色变量
div{
　　background-color:@f_color;  //使用变量
}

编译后css文件清单：

div{
　　background-color:#ffffff;
}

说明：若后期需要修改背景颜色，直接在less中修改变量的值就可以实现，不需要去动css文件。

嵌套规则

　　less中可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量和给特定元素添加clss和id，使得代码看起来更加的清晰。

（1）基本用法

less文件清单：

@f_color:#ffffff;　　　　//声明一个背景颜色变量
div{
　　width:50px;
　　height:50px;
　　span{　　　　　　　　 //div中包含子元素span
　　　　display:inline-block;
　　　　background-color:@f_color;
　　}
}

编译后css文件清单：

div{
　　width:50px;
　　height:50px;
}
div span{
　　display:inline-block;
　　background-color:#ffffff;
}

（2）嵌套一个类

　　该类是html里面className，会在css文件中输出，若html结构中存在该类名，则该类的样式会起作用

less文件清单：

.cur{ 　　　　　　
　　width:50px;
　　height:50px;
}
.wrap{　　　　　　　　 //嵌套类
　　.cur;
}

编译后css文件清单：

.cur{
　　width:50px;
　　height:50px;
}
.wrap{
　　width:50px;
　　height:50px;
}

注：这里的关系比较复杂，在后面混入有详细介绍

（3）选择器继承

　　less中的“&”符号在嵌套规则中是指引用上层（父级）选择器，在伪类选择器和伪元素上用的比较多；
　　less中使用继承时，如果在声明块内书写$，尽量写在开头；

less文件清单：

div{
　　&:hover{　　　　　　　　　　　　 //表示div在hover的时候改变背景色
　　　　background-color:orange;
　　}
　　background-color:green;
}

编译后css文件清单：

div{
　　background-color:green;
}
div:hover{
　　background-color:orange;
}

混入Mixin

(1)直接在目标位置混入另一个类样式（无参数混入）

　　a>混入名称后面不加（）的情况

　　这种情况下，cur作为一个html的类名className，即使不被调用也会被输入到css中

less文件清单：

.cur{ 　　　　　　　　　　//cur是一个类名clssName
　　background-color:red;
}
div{
　　.cur;
}

css文件清单：

.cur{ 　　　　　　　　　　　　//css文件中也输出该样式
　　background-color:red;
}
div{
　　background-color:red;
}

　　b>混入名称后面加上（）的情况
　　　　这种情况下，定义的混入类样式，不会在css中输出，只会存在与less文件中；小括号()内可以加参数，也可以不加　　

less文件清单：

.cur(){ 　　　　　　　　　　//定义不需要输出的混入类样式
　　background-color:red;
}
div{
　　.cur();
}

css文件清单：

div{
　　background-color:red;
}

对于混入的最佳实践：

　　a> 不直接使用混入已有类样式的方式，也就是第一种方式不加（）的混入；
　　b> 先定义混入类样式，然后在需要输出的类样式中直接进行混入该样式；
　　c> 混入时必须加上()来表明这不是一个clssName；

(2)定义一个不输出的样式，在目标位置混入（带参数混入）

　　a> 这种情况下，可以给参数设置默认值，如果在后面混入类样式的时候，需要修改该参数的值，则分下面两种情况：

　　　单个参数，可以直接写参数的值；
　　　多个参数，如需全部重新配置，可以直接依次写参数值；如是只某个配置，必须加上变量名；

　　b> 混入类样式的参数分隔符使用，和；均可，但在同一项目中必须保持统一；

less文件清单：

.br(@w:2px ; @c:red){ 　　　　//这里参数之间采用”；“，也可以采用“，“
　　border:@w solid @c;
}
div{
　　width:50px;
　　height:50px;
　　.br(@c:green); 　　　　  // 只配置了一个参数的值,其他采用默认值
}

编译后css文件清单：

div{
　　width:50px;
　　height:50px;
　　border:2px solid green;
}

四则运算

　　less针对css中数值型的value（数字、颜色、变量等）提供了可以加减乘除的四则运算功能，便于我们处理这类数值之间关系；
less文件清单：

@w:100px ;
@c:#444444;
box1{
　　width:@w;
　　height:@w /2 ;
　　color:@c / 2 ;
}
box2{
　　width:@w + 20 ;
}

css文件清单：

box1{
　　width:100px;
　　height:50px;
　　color:#222222;
}
box2{
　　width:120px;
}

特别说明：计算过程中可以不管单位，less会自动判断；另外，在颜色进行运算的时候，小心踩坑！如#4f25c7，通常不建议对颜色进行运算；

LESS大战浏览器私有前缀

　　这是爱上less原因之所在，以前在写css的时候，一旦用到css3中新增的属性，都要写上各大浏览器厂商的私有前缀，严重扯到项目开发的蛋！less的出现就填了这坑，以圆角为例直接上代码！

less文件清单：

.b_radius(@r:10px){ 　　　　　　//定义一个圆角混入样式
　　-webkit-border-radius: @r;
　　-moz-border-radius: @r;
　　-ms-border-radius: @r;
　　-o-border-radius: @r;
　　border-radius: @r;
}
div{
　　.b_radius(60%);         //这里我就没有带上参数名，因为一个参数，就直接上参数值
}

 css文件清单：

div{
　　-webkit-border-radius: 60%;
　　-moz-border-radius: 60%;
　　-ms-border-radius: 60%;
　　-o-border-radius: 60%;
　　border-radius: 60%;
}

 特别说明：只需在less文件中定义一次，在需要圆角属性的输出样式中直接混入该类样式即可，速度、效率那是杠杠的！

匹配模式

　　匹配模式？简单说就是只要满足某个样式就能调用那个样式，有点if语句的味道吧，以css画小三角为例；

less文件清单：

.triangle(right;@w:20px;@c:red){     　　 //定义右三角样式
　　border:@w solid transparent;
　　border-left:@w solid @c;
　　border-style: dashed solid dashed dashed;
}
.triangle(left;@w:20px;@c:red){　　　　   //定义左三角样式
　　border:@w solid transparent;
　　border-left:@w solid @c;
　　border-style: dashed dashed dashed solid;　　 //这里是为了解决IE6下出现的黑色边
}
.sanjiao{
　　width:0; 
　　height:0;
　　overflow:hidden;
　　.triangle(right);       　　　　　　　　//根据需要（画右三角形）调用上面定义的混入类样式
}

 css文件清单：

.sanjiao { 　　　　　　　　　　　　　　　　　　//画出向右的三角，因为只匹配right这个混入样式
　　border: 20px solid transparent;
　　border-left: 20px solid #ff0000;
　　border-style: dashed solid dashed dashed;
　　width: 0;
　　height: 0;
　　overflow: hidden;
}

说明：很方便吧，上面定义完混入样式，只要在需要三角形的输出样式中直接调用就能画出我们需要的三角形，是不是就完美了呢？没！没！！

匹配模式之爱我你就带上我

　　上面代码有个不足，就是每次我们在页面上其他部分要画三角形时，都得重新写三个小可爱：

width: 0;
height: 0;
overflow: hidden;

　　有没有解决办法呢？有！
　　在上面less文件清单中定义混入样式的时候，只要在加上下面这个样式，就完美咯！！

.triangle(@_,@w:20px;@c:red){ 　　　　　　　　//注意这里的@_
　　width:0; 
　　height:0;
　　overflow:hidden;
}

　　这时候只要在less文件清单中向下面这样调用混入样式也能达到上面的效果，看看代码，少了不少吧！！！

.sanjiao{
　　.triangle(right);
}

　　为什么呢？

　　@_参数，告诉我们每次在调用混入样式时，都要把具有@_参数混入样式里面的属性都带上！

　　@_参数是less的固定用法，记住就好！！

　　注：后面的参数也必须带上且与.triangle（）的参数相同，要不然后果很严重！

注释

　　less的注释可以分为三种：

　　　（1）标准css注释：/*shadow*/,这种注释会保留到编译后的css文件；
　　　（2）单行注释：//,这种注释只保留在less源文件中，不会出现在编译css文件中；
　　　（3）重要注释：/*! @版权归shadow所有*/,这种注释即使css文件压缩也会保留，通常只有在声明版权的时候用，很少用；

　 最佳实践：在实际开发，由于后期维护在less文件上进行，因此，没有必要把全部注释输入到css文件中，常采用单行注释://

@import导入

　　@import 对于模块化开发来说非常有帮助！

　　实际开发中，通常有好几个less文件，但是产品上线的时候，都会合并为一个less文件进行编译，如：
　　　　（1）有文件rest.less/detial.less/index.less ……
　　　　（2）在index.less导入文件rest.less/detial.less,则可在index.less文件的头部：

@import “rest.less”;
@import “detial.less”;

　　　　（3）这里可以去掉文件名后缀，通常不建议这么做

注：less的函数部分在此处不做介绍，如有需要请上less官网查看，http://lesscss.cn/；

less参考资料网址：http://efe.baidu.com/blog/revisiting-css-preprocessors/；

　　　　 　 https://github.com/ecomfe/spec/blob/master/less-code-style.md；

koala下载地址：http://koala-app.com/index-zh.html；

本文属于自己学习总结，仅供参考，希望对你的学习有用！如有不足之处，还望请你提出宝贵的意见，我将在第一时间更改！谢谢！！

sqli-labs通关（less31~less40）(代码片段)

目录Less31Less32Less33Less34Less35Less36Less37Less38Less39Less40Less31这关和前两关也只是闭合不同的差别……思路还是通过HTTP参数污染绕过WAF爆数据的payload：#下面两步找列数http://192.168.101.16/sqli-labs-master/Less-31/login.php?id=1&am 查看详情

less学习笔记(代码片段)

目录less文档less学习笔记less基础注释变量变量的延迟加载（重点）less的嵌套规则less的混合普通混合带参数的混合带默认值的混合命名参数匹配模式arguments变量less运算less继承less避免编译less文档链接:link.less学习笔记less基... 查看详情

less使用入门

LESSS是基于JavaScript，所以，是在客户端处理的。使用less很简单：1下载less.js2新建less文件后缀名称是.less3在页面中引入less文件，跟引入普通的css的是一样的，区别：rel=stylesheet/less  css是stylesheet/css 4在less文件的下方引... 查看详情

浅谈less

less定义：less是css扩展技术 引用变量，mixin混合，运算，以及函数 简化css代码，降低css维护成本 配合使用解析器kolar写less的步骤：建立文件夹，然后再建立.html以及.less的文本 启动kolar 配置路径+找到less文件 写一部分less文件... 查看详情

less一些选择器(代码片段)

Less常见的预处理语言：LessSassStylusLess学习使用Less的方式页面引入js代码文件解析1、我们可以直接在客户端使用.less（LESS源文件），只需要从http://lesscss.org下载less.js文件，然后在我们需要引入LESS源文件的HTML中加入如下代码,也可... 查看详情

less入门

less是一门CSS预处理语言，增加了变量，Mixin，函数等特性，使得CSS更加方便维护，开发；less可以运行在Node或者浏览器，但最终都是将.less文件转换成.css文件，因为浏览器渲染时只能识别.css文件；1.不同情况下使用less编译器编译... 查看详情

less

在本周我们学习了less的基本用法，它是什么，有什么作用？ Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。Less可以运行在Node或浏览器端。如何使用引用less？在页面中加... 查看详情

less

less步骤1.新建文件夹-2、html-less名称.less3.kocla点4＋.找到文件夹5.文件-输入less-进入kocla刷新6.生成用less名称命名的CSS文件6.在HTML中引入的是CSS文件 二在LESS中引入的文件一定是@INPOREANT.1-LESS后缀名可以省略。声明@变量名（自取）--... 查看详情

less

使用在引入less.js前先要把你的样式文件引入：<linkrel="stylesheet/less"type="text/css"href="./less/style.less"><scripttype="text/javascript"src="./js/less.min.js"></script>less.js下载语法1.变量@nice-blue:#5B8 查看详情

less快速入门(代码片段)

概览Less（LeanerStyleSheets的缩写）是一门向后兼容的CSS扩展语言。这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具。因为Less和CSS非常像，因此很容易学习。而... 查看详情

less06引入(importing)

main.less@wp:960px;.colorsss{color:darkgreen;}index.css.color{color:#ff6600;}style.less//@import"main.less";//@import(reference)"main.less";//引用LESS文件，但是不输出//@import(inline)"main.less";//引用LESS文件，但是不进 查看详情

web前端之less简介(代码片段)

目录一、less简介二、安装插件三、编写less四、less语法less注释父子关系嵌套变量其他五、混合函数六、补充一、less简介less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中... 查看详情

sublime编译less

1首先node下全局安装less:npminstallless-g  lessc命令可编译less文件2然后sublime安装less插件：ctrl+shift+p>installPackage>输入less+Enter   支持less高亮3安装将less转换为css的less2Css:ctrl+shift+p>installP 查看详情

less

1.什么是Less？　　Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node、浏览器和Rhino平台上。网上有很多第三方工具帮助你编译Less... 查看详情

less

/*怎么创建less文件呢？有怎么使用less.css呢？今天介绍一下目前最流行的less.css 首先创建一个.less文件，（在哪里引用css，就在那里创建.less文件）如果你是用VisualStudioCode编辑器的话 你可以下载扩展EasyLESS　然后创建一个... 查看详情

vuejs配置less

在webstorm上配置Less 　　首先，全局安装less　　npminstallless-g　　然后，在webstorm上配置less插件，"File"-->"settings"-->"Tools"　　　　在"fileWatchers"-->"+"-->"Less"　　　　在"Program"里填写less的安装路径；　　在"Argument"　里的... 查看详情

less

在遇到less之前，一直和css交往，当less出现在我码农生涯的时候，被她给深深地吸引。从此，less成了自己码农生活里面的一房，css退居二房！那么，less到底有什么魅力让我如此迷上她呢？less初识Less是一门CSS预处理语言，它扩展... 查看详情

css预处理器---less

一、简介:　　Less是一种动态样式语言,可以在样式中使用变量，继承，运算，函数二、使用　　(1)客户端使用　1//引入您的.less样式文件，rel属性区别去css为stylesheet/less2<linkrel="stylesheet/less"type="text/css"href="style.less">3//引入less... 查看详情