前言

css的不足

  作为前端界的三大基石，css是每一个前端开发人员必须要会的，css作为一门标记语言，给人的第一印象就是简单易懂，没有什么逻辑性，和编程语言差距较大，短板非常明显，当有新的属性出来时个浏览器也不能同时兼容，为了解决css这个短板，涌现出了一些预处理语言，他们让css可以使用变量，循环，集成，自定义方法等，让其逻辑性大大加增强。

预处理语言

  现在主要流行的有sass、less、stylus 三种

1. Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说 它完全把 CSS 变成了一门编程语言。另外 在国内外都很受欢迎，并且它的项目团队很是强大 ，是一款十分优秀的预处理语言。
2. Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
3. Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充

预处理语言的选择

  sass、less、stylus其实都差不多，在基本功能上也是大同小异，选择less是比较适合初学者的，相比sass和stylus，less能让你更快上手，less保留了所有css的功能个，学习成本低，另外less可以在编辑器里直接编译，在电脑上安装less后只需下载个小插件就可以使用，vscode使用Easy Less扩展就可以直接使用less。

正文

变量

  less定义变量的形式 @变量名:值，这样就可以定义一个变量。使用起来非常简单，比如我们可以定义一个页面的主色调@bgc，这样在反复用到给颜色的地方我们就可以直接使用，注意在css属性中使用变量的时候需要把变量名用大括号包起来，这样才能正确编译。

/**
*@param: bgc 主色调
*@param: fsz 字体大小
*/
@bgc: RGB(88,190,203);
@fsz: 100px;
@wd: width;
@imgurl:"../img/";
html
{
    font-size: @fsz;
}

.wrap
{
    @{wd}: 7.5rem; //属性中使用变量
    height: .89rem;
    background-color: @bgc;
    bckground-image: url("@{imgurl}/pic.jpg");//url中使用变量
}

//编译成css
html {
  font-size: 100px;
}
.wrap {
  width: 7.5rem;
  height: .89rem;
  background-color: #58becb;
}

变量的作用域，当变量被多次定义时，以最后一次定义为准，且从当前作用域向上搜寻

//栗子
@bgc: #333;
.wrap
{
    @bgc: #339;
    .article
    {
        color: @bgc;
    }
}

//编译css
.wrap .article {
  color: #339;
}

//变量是延迟加载的，不一定要在使用之前定义
@bgc: #333;
.wrap
{
    .article
    {
        color: @bgc;
    }
    @bgc: #339;
}

//一样的结果
.wrap .article {
  color: #339;
}

混合（mixin）

混合的概念也很简单.

//比如你写一个border,然后在别的地方应引用它，less管这个叫混合
.border
{
    border: 1px solid #eee;
}
.tab
{
    width: .2rem;
    height: .1rem;
    .border;
}

//编译成css就变成了
.border {
  border: 1px solid #eee;
}
.tab {
  width: .2rem;
  height: .1rem;
  border-top: 1px solid #333;
  border-bottom: 1px solid #eee;
  border: 1px solid #eee;
}

  当然也有更多好玩的用法，举个栗子，这个和函数一样，括号内定义参数，同时可以给参数指定默认值，使用的时候也很简单，直接在需要的地方调用就好，比如想给box加个1px，颜色是#eee的上边框直接写.border(top);就完成任务。（很少写文章写的不太好，毕竟叫less入门）

.border(@direction,@num:1px,@color:#eee)
{
    border-@{direction} : @num solid @color;
}

.box
{
    width: 100px;
    height: 50px;
    .border(top);
}

模块化

  less支持用import引入文件，也就相对有了模块化的写法，比如编写一个head.less,只要在需要该样式的less文件写上import “head.less”，在编译出的css文件里就有了head.less里的样式。

//global.less
@charset "utf-8";
*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    color: #333;
    font-family: "PingFang-SC-Medium" ,"sans-serif";
    background: rgba(0,0,0,0);;
}
//style.less
@charset "utf-8";
@import "global.less";
//style.less编译出来后
@charset "utf-8";
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  color: #333;
  font-family: "PingFang-SC-Medium", "sans-serif";
  background: rgba(0, 0, 0, 0);
}

when

  less提供了when这个关键字功能，when很好理解就是一个判断条件，只有当when的条件达到时才会执行，废话少说直接上代码。

  我们定义一个.area方法，width大于100px的时候加一个radius，小于等于一百的时候不加，注意这时候调用的时候会将100px转化位数值和100比较，用的是unit函数，后面我们会学到。

.area(@width) when (@width > 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
}

.box
{
    .area(200px);
}
//编译后
.base-area {
  height: 100px;
  background: #ff6600;
}

这里我们还可以使用嵌套来对代码进行优化

.base-area
{
    width: @width;
    height: 100px;
}
.area(@width) when (@width > 100)
{
    .base-area;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    .base-area;
}

.box
{
    .area(200px);
    background: #ff6600;
}

loop

less的loop是用when来实现的，下面我们就写一个简单的例子

.fn( @i ) when ( @i < 10 )
{
    width: unit( @i , px );
    .fn(( @i + 1 ));
}
.loopWidth
{
    .fn(1);
}
//编译
.loopWidth {
  width: 1px;
  width: 2px;
  width: 3px;
  width: 4px;
  width: 5px;
  width: 6px;
  width: 7px;
  width: 8px;
  width: 9px;
}

  通过简单例子大概就能明白less中的loop了，下面简单写一个平常能用到的，比如给list的item添加不同的背景图片

@imgurl: "../img";
.bg-loop(@n,@i:1) when (@i < @n)
{
    .list
    {
        .item-@{i}
        {
            background-image: url("@{imgurl}/icon-@{i}.jpg");
        }
    }
   
    .bg-loop(@n,(@i+1));
}
.bg-loop(4);

//编译
.list .item-1 {
  background-image: url("../img/icon-1.jpg");
}
.list .item-2 {
  background-image: url("../img/icon-2.jpg");
}
.list .item-3 {
  background-image: url("../img/icon-3.jpg");
}

匹配模式

举一个写三角形的列子，less提供@_来匹配共同的一些操作.

.triangle(top,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(right,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(bottom,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style:  dashed dashed solid dashed;
}
.triangle(left,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid ;
}
.triangle(@_,@width:100px,@color:#333)
{
    height: 0;
    width: 0;
    overflow: hidden;
}
.target
{
    .triangle(top);
}
//css
.target {
  border-width: 100px;
  border-color: #333 transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  height: 0;
  width: 0;
  overflow: hidden;
}

杂项目

arguments

arguments包含了所有参数

.border(@w:1px,@s:solid,@c:#eee)
{
    border:@arguments;
}
.arg{
    .border;
}
//css
.arg {
  border: 1px solid #eee;
}

避免编译

  有时候一些计算需要到客户端才进行，比如使用calc，在less转css中会被提前计算，这时候就需要避免编译，格式是 ～‘避免编译的内容’

.inner
{
    width: 100px;
    height: ~'calc(1000/2)';
}

！important

less里也可以用！important，这个不建议用

.box{
    width: 200px;
    height: 200px;
    background: #333;
}

.inner
{
    .box !important;
}
//css
.inner {
  width: 200px !important;
  height: 200px !important;
  background: #333 !important;
}

函数

常用的函数

一些常用的函数：

lighten 提高亮度
darken 降低亮度

@bgc:#ff6600;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: lighten(@bgc,20%); //亮度提高百分之二十
}
.box-2
{
    width: 100px;
    height: 100px;
    background: darken(@bgc,20%);//亮度减少百分之二十
}

saturate 提高饱和度
desaturate 降低饱和度

@bgc: skyblue;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: saturate(@bgc,100%); //饱和度提高百分之一百
}
.box-2
{
    width: 100px;
    height: 100px;
    background: desaturate(@bgc,100%);//饱和度减少百分之一百
}

percentage 转换百分比
unit 单位联合
ceil 向上取整
floor 向下取整
round 四舍五入
abs 绝对值

@h:100px;
.box{
    width: percentage(.1); 
    height: round(4.5);
    padding: ceil(4.1);
    border-width: abs(-100);
    margin: floor(4.9);
    font-size: unit(100,px);
    line-height: unit(@h);
}
//css
.box {
  width: 10%;
  height: 5;
  padding: 5;
  border-width: 100;
  margin: 4;
  font-size: 100px;
  line-height: 100;
}

总结

  less的基本知识都大概介绍了，第一次写这样的博文感觉有点吃力，感觉全程在贴代码，不奢求有人看了，主要记录下知识点以便自己回头查阅，漫漫前端路继续加油。