less入门

前言

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