前言：
此刻各位老铁们对“lesstocss”都比较珍视，小伙伴们都想要了解一些“lesstocss”的相关内容。那么小编也在网摘上收集了一些有关“lesstocss””的相关文章，希望姐妹们能喜欢，各位老铁们一起来学习一下吧！说到less，我们首先肯定会想到css或者scss。那抛开scss，就单独谈谈为什么选择了less，而非css，他们的区别又有那么些呢？
Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。less扩展了CSS语言，增加了变量、Mixin、函数、运算、继承、嵌套等特性。css可以被浏览器直接识别，less需要先编译为css。使用方法
说白了就是less可以看做是一个工具，让你操作css更方便的工具。既然是工具，在使用它之前肯定就要去“安装”这个工具。less官方也提供了几种“使用工具”的方法：
node环境中使用
通过npm的安装方式全局安装或者项目目录安装
npm install less -g浏览器中使用
通过引入less.js的方法，然后在浏览器中可以自动编译你的.less文件
首先，将.less样式表的rel属性设置为“ stylesheet/less”：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，下载less.js，并将其包含在页面元素中的<script></script>标记中<head>：
<script src="less.js" type="text/javascript"></script>
当然你也可以配置一些设定选项，这个可以转移到官网查看详情配置，这里就不过多赘述。
使用工具/插件装换格式
我用过比较好的一个工具是Koala（考拉），koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。可以直接把less文件装换成css文件，快速方便可配置。
当然有的开发工具也带有转换less为css文件的插件，比如Hbuilder X前端开发工具，安装less转换插件即可，可右键直接生成css文件
常用操作及技巧
当然，前面说的这么多不是今天的重点，重点是下面的一些关于less常用的操作及技巧。
变量（@）通过@符号定义变量并且使用。
@color:#4078cb;.home { background-color:@color;}编辑后：
.home { background-color:#4078cb;}变量也可以用在如：选择器名称，属性名称等@my-selector: banner;@images: "../img";.@{my-selector} { font-weight: bold; background: url("@{images}/white-sand.png");}编译后：
.banner { font-weight: bold; background: url("../img/white-sand.png");}变量运算变量可以进行加减乘除运算，加减法时，以第一个数据的单位为基准，乘除法是，单位要统一。
@width:300px;@color:#222;@fontSize:14px;.top{ width:@width - 20; height:@width - 20*5; color:@color*2; background-color:@color + #111; font-size: @fontSize*2; }编译后：
.top { width: 280px; height: 200px; color: #444444; background-color: #333333; font-size: 28px;}注意：加减运算时要注意符号左右两侧留空格，否则可能会有报错的风险。
嵌套及连接符（&）父母选择器可用过嵌套的方式实现
div { width:100px; a { color:#4078cb; }}编译后：
div {width:100px;}div a {color:#4078cb;}&操作符可实现伪类选择器、连接等操作a { &:hover { color: green; }}编译后：
a:hover { color: green;}.button { &-ok { background-image: url("ok.png"); } &-cancel { background-image: url("cancel.png"); } &-custom { background-image: url("custom.png"); }}编译后：
.button-ok { background-image: url("ok.png");}.button-cancel { background-image: url("cancel.png");}.button-custom { background-image: url("custom.png");}&代表所有父选择器（而不仅仅是最接近的祖先），因此以下示例：
.grand { .parent { & > & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } }}编译后：
.grand .parent > .grand .parent { color: red;}.grand .parent .grand .parent { color: green;}.grand .parent.grand .parent { color: blue;}.grand .parent,.grand .parentish { color: cyan;}less转义通过‘~’符号对其后面的内容进行转义：
p { color: ~"green";}编译后：
p { color: green;}在将LESS代码编译为CSS代码之后，〜“some_text"中的任何内容将显示为 some_text 。为什么需要这样的操作呢，比如在使用calc()方法计算的时候，如果不转义，就会识别出来，所以这个时候就必须要用这个‘~’来进行转义。
注释
可以通过“/**/”或者“//”的方法对代码进行注释，但是后者注释方法在编译后的文件中不显示。
/* 这是一个长注释*/// 这是一个短注释
编译后：
/* 这是一个长注释*/混合mixin模式
混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。
.p1{ color:red;}.p2{ background : #4078cb; .p1();}.p3{ background : #3dcd58; .p1;}编译后：
.p1 { color: red;}.p2 { background: #4078cb; color: red;}.p3 { background: #3dcd58; color: red;}mixins不仅可以包含属性，还可以包含选择器。.hover() { &:hover { background: red; }}a { .hover()}编译后：
a:hover { background: red;}命名空间命名空间用于在通用名称下对mixin进行分组，进行针对性的内容引用继承。使用命名空间可以避免名称冲突，并从外部封装mixin组。
.h1() { background: yellow; .span { color: orange; }}.div { .h1> .span}编译后：
.div { color: orange;}混合参数参数mixin使用一个或多个参数，通过参数和其属性来扩展LESS的功能，以便在混合到另一个块时自定义mixin输出。
.border(@width; @style; @color) { border: @width @style @color;}.home { .border(2px; dashed; green);}编译后：
.home { border: 2px dashed green;}导入@import 伪指令用于在代码中导入文件。 它将LESS代码分布在不同的文件上，并允许轻松地维护代码的结构。 您可以将 @import 语句放在代码中的任何位置。
// import.less.myImport { color:red; font-size:14px}// style.less // 导入 import.less@import "import.less"
style.less编译后：
.myImport { color:red; font-size:14px}合并LESS的一个特性，它允许使用单个属性从多个属性中为逗号或空格分隔列表添加值。为了避免任何无意的联接，在每个联接未决声明上都需要显式+或+_标记。
.mixin() { transform+_: scale(2);}.myclass { .mixin(); transform+_: rotate(15deg);}编译后：
.myclass { transform: scale(2) rotate(15deg);}loops循环Loops语句允许我们多次执行一个语句或一组语句。
.cont(@count) when (@count > 0) { .cont((@count - 1)); width: (25px * @count);}div { .cont(7);}编译后：
div { width: 25px; width: 50px; width: 75px; width: 100px; width: 125px; width: 150px; width: 175px;}颜色函数颜色函数darken(color,amount)darken降低了元素中颜色的亮度，有两个可选参数，color：代表颜色对象，amount：包含0 - 100%之间的百分比。
.myclass1{ height:100px; background-color: hsl(80, 90%, 20%);}.myclass2{ height:100px; background-color: darken(hsl(80, 90%, 20%), 10%);}编译后：
.myclass1 { height: 100px; background-color: #426105;}.myclass2 { height: 100px; background-color: #213003;}颜色函数lighten(color,amount)lighten增加了元素中颜色的亮度，有两个可选参数，color：代表颜色对象，amount：包含0 - 100%之间的百分比。
.myclass1{ height:100px; background-color: hsl(80, 90%, 20%);}.myclass2{ height:100px; background-color: lighten(hsl(80, 90%, 20%), 10%);}编译后：
.myclass1 { height: 100px; background-color: #426105;}.myclass2 { height: 100px; background-color: #639108;}颜色混合函数multiply(color1,color2)将两种颜色相乘。 对应的RGB通道的两个颜色相乘，然后除以255以得到较暗的颜色作为结果。
.color { background: multiply(#111111,#222222);}编译后：
.color { background: #020202;}数学函数ceil()将数字向上舍入为下一个最大整数。
opacity:ceil(0.7); // 编译后： opacity:1;floor()
将数字向下取整为下一个最小整数。
opacity:floor(1.3); // 编译后： opacity:1;percentage()
将浮点数转换为百分比字符串。
opacity:percentage(0.2); // 编译后： opacity:20%;min()
它指定一个或多个参数的最小值。
opacity:min(0.2,0.1,0.3,4); // 编译后： opacity:0.1;max()
它指定一个或多个参数的最大值。
opacity:min(0.2,0.1,0.3,1); // 编译后： opacity:1;类型函数isnumber()
它使用一个值作为参数，如果它是一个数字返回 true ，否则为 false
isstring()
它使用一个值作为参数，如果它是一个字符串返回 true ，否则为 false
iscolor()
它使用一个值作为参数，如果如果值是颜色返回 true ，否则为 false
iscolor(#fff); // trueiscolor(red); // trueiscolor(1234); // falseiscolor(24px); // falseiscolor(7.8%); // falseiscolor("variable"); // falseiscolor(keyword); // falseiscolor(url(...)); // falseisurl()它使用一个值作为参数，如果值为url返回 true ，否则为 false
isurl(url(...)); // trueisurl(keyword); // falseisurl(1234); // falseisurl(24px); // falseisurl(7.8%); // falseisurl(#fff); // falseisurl(red) ; // falseisurl("variable"); // falseispixel()它使用一个值作为参数，如果值是以像素为单位的数字返回 true ，否则为 false
ispixel(24px); // trueispixel(1234); // falseispixel(7.8%); // falseispixel(keyword); // falseispixel(#fff); // falseispixel(red) ; // falseispixel("variable"); // falseispixel(url(...)); // false字符串函数escape()它通过对特殊字符使用URL编码来对字符串或信息进行编码。 您无法编码一些字符，例如，， / ，？ ， @ ，＆amp; ， + ，〜，！ ， $ ，'和您可以编码的一些字符，例如 \ ，#， > ^ ，(，)， {，} ，: >，＆gt; ，，] ， [和 = 。
escape("Hello!! welcome to Tutorialspoint!") // 编译后：Hello%21%21%20welcome%20to%20Tutorialspoint%21e()它是一个字符串函数，它使用string作为参数，并返回不带引号的信息。 它是一个CSS转义，它使用〜“一些内容"转义的值和数字作为参数。
filter: e("Hello!! welcome to Tutorialspoint!"); // 编译后：filter: Hello!! welcome to Tutorialspoint!;% format()此函数格式化一个字符串。 它可以写成以下格式：%(string，arguments ...)
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less"); // 编译后：format-a-d: （"myvalues: 5 myfile: "mydir/less_demo.less"）;其他函数image-size()它用于从文件检查图像的维度。 它检查图像的宽度和高度。
.top { background-image:url("top.jpg"); image-size:image-size("top.jpg");}编译后：
.top { background-image:url("top.jpg"); image-size: 1200px 800px;}image-width()，image-height()分别用于检测图像的宽度和高度。
convert()
数字从一个单位转换为另一个单位。 它包括两个论点; 第一个参数遍编号以及单位和第二个参数包含单位。 当本机兼容时，转换该数字。 如果第一个参数不变，则单位不兼容。
body{ meter:convert(10cm, mm); time:convert(3s, "ms"); no-unit:convert(5, mm);}编译后：
body { meter: 100mm; time: 3000ms; no-unit: 5;}当然上面的内容只是less用例中的一部分，只是开发过程中比较常用的。当然，现在的开发越来越倾向于less或者scss等方式，主要的原因还是相对于css他们大大地减少了开发量，减少了代码冗余，方便了开发者。所以这是一个进步的时代，更是一个不断追求美好的时代！
标签： #lesstocss
