LessLessLess

前言
1. 历史发展（文章看起来正规一些，复制的）
2. Less 引入
3. Less 功能介绍
- 3.1 变量 (都需要+ @声明)
- - 值变量
- - 选择器变量
  - 属性变量
  - url变量
  - 声明变量
  - 变量运算
  - 变量作用域
  - 用变量定义变量
- 3.2 嵌套
- 3.3 混合方法
- - 无参数方法
- 默认参数方法
- 方法的匹配模式
- 方法的命名空间
- 方法的筛选条件
- 数量不定的参数
- 方法使用 !important
- 循环方法
- 属性的拼接方法
- 3.4 继承
- 3.5 导入
- reference
- - once
  - multiple
- 3.6 函数
- - 判断类型
  - 颜色操作
  - 数学函数
- 3.7 其他
- - 注释
  - 避免编译
end

前言

公司最近分享技术，然后总结了下Less的使用大全。入门挺简单，比平常css炫，虽然面试时候说，这是以前的技术了，不过还是总结下，记录下时间的存在。

1. 历史发展（文章看起来正规一些，复制的）

Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。

Stylus 诞生于 2010 年，来自 Node.js社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。

Less 诞生于 2009年，受Sass的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS
更易维护、方便制作主题、扩充（引用于官网）。
官网

2. Less 引入

<style type="text/less">div{color: red;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" type="text/javascript" charset="utf-8"></script>

需要将js放到less样式下方，不然会爆炸

或者

npm install -g less

3. Less 功能介绍

3.1 变量 (都需要+ @声明)

值变量

<div>普通容器</div>
<div id="id">id容器<span>span容器</span>
</div>
<div class="class">class容器
</div>

div{width: 100px;height: 100px;
}@bgcolor:green;@color:white;
div{background: @bgcolor;          //不用大括号color:@color;
}

选择器变量

@id:#id>span;@class:class;
@{id}{         //变量名必须用大括号括住color: red;
}
.@{class}{color: orange;
}

属性变量

@bg:background; //缩写、复用
div{@{bg}:red;     //属性名必须用大括号括住
}

url变量

@img:"../../../img";  //美观、便捷（咆哮魔）
#id{background: url("@{img}/test.png");      //大括号括住
}

声明变量

- 结构: @name: { 属性: 值 ;};
- 使用：@name();@bg:{                     //类似于方法background: red;width:100px;height:100px;
};
div{@bg();         //需要用括号执行
}

变量运算

+ - * / 都可以，为了防止出错，写成calc()格式 两边空格(如果-号不空格会报错，其他还好)
@width:200px;
@bg: #888;
#id{width: @width;background: @bg;
}
.class{width: @width * 2;  background: @bg - #555;        //可以进行颜色的运算
}

变量作用域

@bgcolor:red;
#id{
background: @bgcolor;@bgcolor : blue;             //就近原则
}

用变量定义变量

@red1:red;
@color:red1;
#id{background: @@color;  //@color = red1    @@color = @red1 = red
}

3.2 嵌套

<div class="content"><span class="content_left">我在上</span><div>我是小中</div><span class="content_right">我在下</span>
</div>

.content{border: 1px solid black;&:hover{                    //也可用于伪类选择器color: red;}div{                     //.content div 嵌套关系border: 1px solid pink;}&_right{                 //可以理解为 & = .content   color: blue;            //.content_right 未嵌套 只是引用父元素名字}
}

3.3 混合方法

无参数方法

<div class="column-1">我是孤独的</div>
<span class="column-2 redSize">鲜明对比</span>

.redSize{            // .redSize 或者 #redSize 都可以作为方法使用，color: red;        // 并且都可以加() 区别在于 加了()的变成纯方法，不加的可以解释使用
}                   // .redSize 等于 .redSize()    #redSize 等于 #redSize()
div{.redSize;
}

默认参数方法

.bg(@bg:black,@sizeColor:white){background: @bg;color: @sizeColor;
}
div{.bg;
}
span{.bg(white,black);
}

方法的匹配模式

.border(left,@color:red){border: 5px solid goldenrod;border-left-color: @color;
}
.border(right,@color:red){border: 5px solid goldenrod;border-right-color: @color;
}
.border(right,@color:blue){            //会匹配相同的 ， 并且覆盖border: 5px solid goldenrod;border-right-color: @color;
}
span{.border(right);
}

方法的命名空间

.parent{background: orange;.colorx1(@color1:red){color: @color1;.colorx2(@color2:black){border: 1px solid @color2;color: blue !important;background: @color1;           //可以使用上层变量}}
}
div{.parent;.colorx1;.colorx2;      //调用时候，先要调用父元素，再层层调用，否则报错.parent > .colorx1 ;           //或者 > 调用子元素
}

方法的筛选条件

.content(@width,@height,@bg:red) when (@width >= 3px) and (@height = 20px) {border: @width solid @bg;        //and 相当于 &&height: @height;
}
.content(@width,@height,@bg:blue) when not (@width >= 3px) and (@height = 40px) {border: @width solid @bg;      //not 相当于 ！height: @height;
}
.content(@width,@height,@bg:orange) when (@width >= 3px) , (@height = 80px) {border: @width solid @bg;      // , 相当于 ||height: @height;
}
span{display: inline-block;.content(2px,40px);
}

比较运算有： > >= = =< <。

= 代表的是等于

除去关键字 true 以外的值都被视为 false：

数量不定的参数

.boxshadow(...){box-shadow: @arguments;
}
span{padding: 4px;border: 1px solid #333;.boxshadow(0px -7px 10px -8px #333 inset);
}

方法使用 !important

.red{background: red;
}
.blue{background: blue;
}
div{.red !important;        //超级优先级，比妈妈叫吃饭还优先.blue;
}

循环方法

.colum(@n,@i:1) when (@i<=@n){           //@n生成的样式数量,@i写死的判断参数,i到4生成width:100%,再+1 等于5 不符合when判断 退出.column-@{i}{                     //每次生成一个，然后+1 再次递归width: @i / @n * 100%;          //i是可变的 n是参数 所以用 1/4*100%display: inline-block;background: yellow;}.colum(@n,(@i+1));                    //递归再嵌套
}
.colum(4);                              //调用方法生成的类
.column-1{width:25%;
}
.column-2{width:50%;
}
.column-3{width:75%;
}
.column-4{width:100%;
}

属性的拼接方法

+_ 代表的是 空格；+ 代表的是 逗号

.span{transform+_:scale(2);
}
span{display: inline-block;                 //变成inline-block 才可以transform+_:skewX(-45deg);             //.span;transform+_:translateX(100px);
}

3.4 继承

<div>你好<span class="child1">hi</span></div>

.parent{background: red;.child{color: orange;.child1{color: blue;}}
}
div{&:extend(.parent .child all);           //使用all会匹配里面的方法 (.child1)
}

3.5 导入

import "main";
//等价于
import "main.less";

span{.ab;.center;
}
@import (reference) 'common';        //位置可随意摆放

reference

只导入但是不解析，可以引用好看的css样式

<div>1<span class="div">2</span>    //引入的样式有 .div font-size100 但是未解析
</div>

@import (reference) 'common.less';
div{.rela;width:200px;height:200px;background:red;
}
span{.ab;.center;       //这些都可生效，只引用
}

common.less
.rela{position: relative;
}
.ab{position: absolute;
}
.center{left: 50%;top: 50%;transform: translate(-50%,-50%);
}
.div{font-size: 100px;
}

once

相同文件只会引入一次（如果多次引用的话）

@import (once) "foo.less";
@import (once) "foo.less";

multiple

解析两次

@import (multiple) "foo.less";
@import (multiple) "foo.less";

3.6 函数

判断类型

isnumber 判断给定的值是否是一个数字。

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

iscolor 判断给定的值是否是一个颜色。
isurl 判断给定的值是否是一个 url 。

颜色操作

saturate 增加一定数值的颜色饱和度。
lighten 增加一定数值的颜色亮度。
darken 降低一定数值的颜色亮度。
fade 给颜色设定一定数值的透明度。
mix 根据比例混合两种颜色。

数学函数

ceil 向上取整。
floor 向下取整。
percentage 将浮点数转换为百分比字符串。
round 四舍五入。
sqrt 计算一个数的平方根。
abs 计算数字的绝对值，原样保持单位。
pow 计算一个数的乘方。

函数连接

3.7 其他

注释

/* */ CSS原生注释，会被编译在 CSS 文件中。
/ / Less提供的一种注释，不会被编译在 CSS 文件中。

避免编译

格式 ~“编译代码”

 div{width: 112px;height: 112px;span{display: inline-block;width: ~"calc(100% - 12px)";            //如果不加 编译为 88%}
}

end

写的好像有些仓促，不过每个例子都是自己尝试过的。
现在的我依旧热血澎湃，希望以后还能保持这种上进的心情。
风华正茂，意气风发，正值佳季，enjoy life。

css预处理器——Less大全（看完不会切刁）相关推荐

再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
CSS预处理器sass和less
文章目录 CSS预处理器什么是CSS预处理器 Sass和LESS背景介绍 Sass背景介绍 LESS的背景介绍 Sass 安装Sass 下载Ruby安装文件安装Ruby 安装Sass 编译Sass ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
CSS预处理器-Sass、Less和Stylus-介绍和使用
发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,有不同的语法和功能. 在这篇文章中,我们将介绍三种不同CSS预处器的蛮量.功能以及他们的好处--sass.less 和stylu ...
CSS预处理器的对比 — Sass、Less和Stylus
本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...
学习CSS行内样式，看完不迷茫
面试知识点主要内容包括html,css,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,设计模式,项目等等. html 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2 ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

css预处理器——Less大全（看完不会切刁）