Less CSS预处理器入门-优快云博客

本文链接：https://blog.youkuaiyun.com/lucasxt/article/details/90178583

Less

Less is More ,Than CSS-少即是多，比CSS
什么是Less？

LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
可以通过使用LESS 变量来实现更快的维护。
Less发展历程
Less由 Alexis Sellier 于2009年设计。LESS是一个开源。 LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替。
Less特征
更清晰和更可读的代码可以以有组织的方式编写。
我们可以定义样式，它可以在整个代码中重复使用。
LESS是基于JavaScript的，是超集的CSS。
LESS是一个敏捷工具，可以排除代码冗余的问题。
Less优点
LESS轻松地生成可在浏览器中工作的CSS。
LESS能够使用嵌套编写更干净，组织良好的代码。
通过使用变量可以更快地实现维护。
LESS能够通过在规则集中引用它们来轻松地重用整个类。
LESS提供使用操作，使得编码更快并节省时间。
Less缺点
学习如果是新的CSS预处理需要时间。
由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。
Less类似于Jquery （是CSS的一个库）
LESS CSS是一种动态样式语言，属于CSS预处理语言的一种，它类似于CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS编写和维护
编译工具
Koala编译
- 国人开发SASS/LESS编译工具
- 下载地址：http://koala-app.com/index-zh.html
Nodejs库
浏览器端使用
Koala的基本使用

Less中的注释

LESS的注释：
/* 内容是被编译的，保留进.CSS文件中 */
// 内容不被编译，不出现在.CSS文件中

变量

//声明变量，以@开头，如：@变量名：值;

@w: 500px; 
@h: 300px;
.box {
    width: @w;
    height: @h;
}

混合

不带参数(引用时可不带()括号)：
声明， .bd_radius{}；引用，.box{ .bd_radius }
带参数(引用时必须带()括号)：
① 声明，.bd_radius(@radius){ border-radius: @radius; }
引用，.box{ .bd_radius(5px); }——必须带参数
默认带值
.bd_radius(@radius:10px){ border-radius: @radius; }

匹配模式

相当于JS中的if,但不完全是
满足条件后才能匹配

兼容ie低版本（border-style: dashed）css三角

.triangle(top, @w:5px, @c:#ccc){...}
.triangle(bottom, @w:5px, @c:#ccc){...}
.triangle(left, @w:5px, @c:#ccc){...}
.triangle(right, @w:5px, @c:#ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}

//@_ 变量，无论第一个传的参数是什么，都会匹配这个方法

.triangle(@_, @w:5px, @c:#ccc) {
    width: 0,
    height: 0,
    overflow: hidden;
}

引用：

.sanjiao { .triangle(right, 100px); }

编译后css：

.sanjiao {
   width: 0,
    height: 0,
    overflow: hidden;
    border-width: 100px;
    border-color: transparent transparent transparent #ccc;
    border-style: dashed dashed dashed solid;
}

运算

可以进行加减乘除运算，只要有一个带像素的即可，符号两边需要空格
Less中的运算

@test_01:300px;
.box_02{
  width:@test_01 + 20;
  height: (@test_01 - 200) * 5;
  background:#ccc - 10;
}

嵌套规则

Less嵌套：CSS中选择器的另一种变形，通过CSS选择器的相互嵌套完成到CSS层次选择器的转换。其中 & 代表它的上一层选择器，适用场景，伪类。
嵌套越多，匹配次数越多，影响加载
& 代表上一层选择器

.list {
    li { ... }
    a {
        color: blue;
        &:hover { color: red; }
    }
    span { ... }
}

@arguments变量

终究还是变量，顾名思义，代表多个参数，适用场景，同一个CSS样式属性对应多个属性值，例如border:1px solid pink;如果属性值以参数方式传递，就可以使用@arguments代替对应参数。如何引用？和以往一样，传参时要对应传参，中间可以用",“或者”;"隔开，如果少传，则按顺序匹配。
@arguments 代表所有传递进来的参数

.border (@w:1px, @s: solid, @c: red) {
    border: @arguments;
}

引用：

.test_border {
    .border(20px);
}

编译后css：

.test_border {
    border: 20px solid red;
}

##避免编译、!important以及总结
1 避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法。
要输出这样的值我们可以在字符串前加上一个~
例如：width:~‘calc(100% - 35)’
~’…’
~"…"
2 !important关键字，会为所有混合所带来的样式，添加上!important
!important 样式优先级别最高。