我记录的less

时间 2020-01-09

标签记录繁體版

原文原文链接

Less是什么

再说less以前,先说一下你们都知道的css;css做为撑起前端领域的3大基石之一,他的一举一动都是时刻牵动着开发者们的当心脏,css和html同样,都是一种标记性语言,并不像js那样具备逻辑性,并且每当有新的特性出来的时候,必定绕不过兼容问题;在一个就是重复性及其恼火,一样的一个类似样式在一个页面可能要写几回甚至十来次,简直是一种折磨,一样的还有一些难以记忆的色彩,每次可能都要找很久才能找到你上一次写的那个色号;因此就涌现了一些有趣的预编译语言,less就是其中一个佼佼者.css

神奇的预编译语言

什么是预编译语言呢,就个人理解就是一种浏览器不能直接识别语言,浏览器只html,js,css,因此一些特殊的语言须要通过编译处理才能被浏览器识别;html

Sass(scss)

诞生于2007年,基于ruby,因此使用sass(scss)的话须要先装上ruby.sass和scss这两个十分类似,在百度上搜索scss 下面的第一个倒是sass,说的简单的能够理解scss是sass的一个升级版本，彻底兼容sass以前的功能，又有了些新增能力,在语法上有些出入.前端

Stylus

诞生于2010年,来源于node社区的一款预编译语言,跟sass有些相近node

Less

诞生于2009年,受Sass的影响建立的一个开源项目。 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 能够运行在 Node 或浏览器端。（引用于官网）。css3

萝卜青菜

萝卜青菜,各有所爱,市面上的css预处理语言不少,上面3个只是其中一部分,在选择上也是有点儿纠结的,就我的而言,虽然sass和stylus在功能上要比less强,可是说到学习时间和成本那确定是less最优的,只要会css.那么就能够在很短事件里面了解掌握less经常使用精华部分了,掌握这些就足以应对平常工做中所须要的状况了;web

Less经常使用

仍是上面那句话,less的功能不少,可是其实咱们只须要掌握其中最经常使用的那部分就足以应对工做中的问题了;bootstrap

变量

less的变量跟通常语言的变量没什么区别,主要用在一些十分重复的值上,比方色彩,路径;浏览器

语法

定义: @变量名:变量值;
使用: 属性: @变量sass

常见场景

色号使用

@grey-text:grey;
 div{
     color:@grey-text; //不须要加""
 }
 //编译以后获得:
 div{
     color:grey;
 }

这主要用在页面上的一些色号上,每次都重复复制一个色号,并且有时候代码多了又要翻上去找那个色号,让人心烦(☄ฺ◣ω◢)☄ฺ,之后就能够在页面顶部先定义好页面上重复次数多的色号,方便使用;ruby

文件路径

这个主要重在背景图或者其余一些有路径文件的处理上;比方依据起点项目的文件目录来讲,给一个div设置背景图是这样路径

div1{
    background-image:url(../../images/web3.0/xx/xxx.png);
}
div2{
    background-image:url(../../images/web3.0/aa/aaa.png);
}

写多了感受想吐,((유∀유|||)) ,在起点项目里面都是这样的目录,虽然说这个文件目录不会轻易更改,可是保不许那一天变动了就惨了,如今有了less的变量咱们就能够这样

//1,先在less文件顶部定义好全局路径,就是前面那一段重复的
@base-url:"../../images/web3.0/";//加上了引号
//2,而后使用
div1{
    background-image:url("@{base-url}xx/xxx.png");
}
div2{
    background-image:url("@{base-url}aa/aaa.png");//这里也加上了引号,而且使用大括号包裹
}
//之后即便项目路径变动了咱们只须要改最上面的@base-url就能够一次性所有更改了;

好吧,上面的这个文件路径加不加引号还有些奇怪的地方;举个例子

@base-url:img/; //这里没加引号
@base-url-l:"../../qidianv3.0/assets/images/web3.0/";  //加上了引号
@bg-img:background-image; //把属性名当作变量存放也是能够的

.lessa{
    width: 200px;
    height: 200px;
    @{bg-img}:url('@{base-url}bg.png');
}
.lessd{
    width: 200px;
    height: 200px;
    @{bg-img}:url("@{base-url-l}banner@2x.png");

上面两个都获得了正常编译,可是第二个(@base-url-l的属性值)若是不加引号却会出错,获得NameError: variable @base-url-l is undefined的报错,这点让人在乎;难道是单节的能够不加,多节的就必定要加嘛?算了..保险起见都加上吧;

属性名定义

上面提到的变量定义还可定义属性名,我以为这个用在那些较长的属性名上是个不错的注意

background-attachment: fixed;//背景图较小时候是否跟随内部元素滚动,取值:scroll fixed;
//background-attachmen够长,也很差记忆,把他存下来
@bgFixed:background-attachment;
div{
    @{bgFixed}:fixed;
}
//编译获得
div{
    background-attachment:fixed;
}

可是其实这个我以为用处不大,由于sublime安装Emmet css3等插件以后只须要记得这个属性的几个字母就能够提示了,要敲的单词说不定要比自定义的还要少,并且时间更加省;┐(￣ヘ￣)┌,比方上面这个我只须要敲"batf",就能够获得background-attachment:fixed了;

总结:我以为这个变量仍是主要用在色彩和资源路径实用

计算

这个计算仍是很管用的,并且很强大

宽高计算

一个颇有用处的计算属性,他能够直接对经常使用的属性值(数字属性)进行四则运算,一样,新提出的css也增长了相似的calc()计算属性;
**加减法时以第一个数据的单位为基准
乘除法时注意单位必定要统一**
解释下第一条,第二条注意一下单位就好:

下面红块区域

.main{
    height: 100% - 40px;
    border:1px solid red;
}
//最后编译出来
.main {
    height: 60%;
    border: 1px solid red;
}

能够看到,最后他获得了60%;他是把40px当作40%来处理的,这就是上面说的加减法时以第一个数据的单位为基准;
如今咱们来对比一下css3的calc()的计算结果

.main{
    height:calc( 100% - 40px);
    border:1px solid red;
}
//最后编译出来,(编译个毛线啊,这自己就是原生css啊喂ヽ(｀Д´)ﾉ︵ ┻━┻ ┻━┻ )
.main {
    height: calc(100% - 40px);
    border: 1px solid red;
}

能够看到明显对比,下面的本身占据了剩下全部空间,他没有忽视单位的存在,而是真的如同咱们想的进行计算,因此从这一点看来明显是calc()要聪明一些;

色彩计算

这个东西挺有趣的,色彩还能够计算;

@bgcolor:#CB9898; //定义色彩
.main{
    height: calc(100% - 40px);
    box-sizing: border-box;
    border:1px solid red;
    background-color:@bgcolor+#111; //背景色计算
}

;

//编译获得
.main{
    height: calc(100% - 40px);
    box-sizing: border-box;
    border: 1px solid red;
    background-color: #dca9a9;//渲染结果
}

仍是上面那个图,能够看到背景色最后渲染成为了#dca9a9;这个计算过程也很简单,首先把#CB9898换成rgb获得203,152,152,
再把#111换成rgb获得 17,17,17 最后两个rgb对应相加,获得 220,169,169 化成hex就是#dca9a9了;
而后咱们看看calc支持这东西吗?

emm..ヽ(￣▽￣)ﾉ无效的属性值,这一点看来仍是less更加厉害;
那么这一点用在什么地方更加合适呢?毕竟人脑不是电脑,不可能心算出hex->rgb在相加,除非是那种很简单的#111+#222=#333的这种,因此我暂时也还没找到这东西的使用场景;
总结:因此两种计算方式不存在谁好谁坏的说法,关键看使用场景,就我的来讲,外面的布局上用calc比较好,而里面的子元素之间的明确宽高关系仍是用less的计算方法,毕竟每一次都要写calc()仍是挺讨厌的,不是吗?

嵌套

这个我以为是less里面最好用的功能之一了,由于他会造成一种相似做用域的东西,全部的属性或者变量值都只在这个范围生效,能够在必定程度上减轻css交叉引用时相同class所带来的影响,极大程度减轻了咱们写css选择器的烦躁感(￣▽￣)／

嵌套规则

.alread-selectd{
    margin-top: 36px;
        .alread-selectd-head{
            display: flex;
            .alread-selectd-title{
                font-weight: bold;
                &+span{
                    .MIX-font(14px,#999);
                }
            }
        }
    }
    
//编译获得
.alread-selectd {
  margin-top: 36px;
}
.alread-selectd .alread-selectd-head {
  display: flex;
}
.alread-selectd .alread-selectd-head .alread-selectd-title {
  font-weight: bold;
}
.alread-selectd .alread-selectd-head .alread-selectd-title + span {
  font-size: 14px;
  color: #999;
}

做用域

//做用域(或者说就近原则)
@font-color:pink;//全局定义
.main{
    @font-color:red; //重定义
    color:@font-color;
    .in{
        @font-color:blue;  //重定义
        color:@font-color;
    }
}
.footer{
    @font-color:green;  //重定义
    color:@font-color;
}
.mask{
    color:@font-color; //全局定义
}

;
因此简单的说,这个做用域其实也就是个就近原则,他会去找距离本身最近的那个变量,指导最外层;

"&"的用处

&符号表明的就是当前选择器,他用在本身的特定class(或者说状态下)和伪类:after:before是至关有用的;
咱们常常会用到当鼠标点击的时候去切换某个元素的样式,这时候只须要像这样

div{
    background-color:black;
    &.active{
        background-color:red;
    }
}
//而后在点击的时候加上active这个calss就好
//伪类使用
div{
    color:red;
    &:after{
        content:"i'm cute,so please give me money!!"
    }
}

媒体查询器的嵌套

媒体查询器不用写到外面去了,媒体查询器一样能够嵌套在规则层级里面了,只是按照通常习惯,咱们会把全部的要根据媒体查询器来写的样式放在一个媒体查询器里面,而这个却会每个样式都单独生成一个媒体查询区;

div{
    width:300px;
    @media screen and (min-width: 320px) and (max-width: 1200px){
        width:100px;
    }
}
//最后获得
div{
  background-color: pink;
}
@media screen and (min-width: 320px) and (max-width: 1200px){
  div{
    background-color: grey;
  }
}

混合

这也是less里面十分有用的东西,混合(mixture)其实就是一堆预约义的样式的集合;咱们能够把一些常常会出现的,一些固定写法抽出来集合在一起,而后使用的时候很方便的就能够调用了;

不带参数的混合

.MIX-center{ //这是一个常常用到的让元素内部水平垂直居中的东西;
    display:flex;
    align-items: center;
    justify-content: center;
}
div{
    .MIX-center;//亦能够写成.MIX-center();
}

带参数的混合

咱们可能常常会写这种按钮,若是来一个写一个那真的是一种折磨,如今有了less咱们能够这样

.MIX-btn(@width,@height,@font-size,@color,@bdr-color){ //使用混合,把样式都写出来;
    width: @width;
    height: @height;
    font-size: @font-size;
    line-height:@height;
    text-align: center;
    border-radius: @height;
    color:@color;
    border:1px solid @bdr-color;
    text-decoration: none;
}
//而后,咱们这样使用
button{
    .MIX-btn(100px,30px, 12px, #333,black);
    display: inline-block;
}

//实际编译获得
button{
    width: 100px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    border-radius: 30px;
    color: #333;
    border: 1px solid black;
    text-decoration: none;
    display: inline-block;
}

之后遇到这种按钮就能够直接调用.MIX-btn(),依次传入参数就行了;

默认参数的混合

混合参数在指定的时候能够带上默认值,若是不给,那么他就采用默认值

.MIX-border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:1px solid  @color;
    box-shadow: @arguments;//指代的是 所有参数
}
div{
    .MIX-border();
}
//获得
div{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

这种混合我的而言不合适用在具体数字不少的时候,由于页面中这些数字不多有同样的,难以作到通吃,这种数字值不少的状况你还不如就放个变量名,而后全部的值都手动传入更好;因此他适合用在一些'变更很少的常见套路'上
比方第一个里面的居中,可是咱们有时候只会在x上居中,在y上则是从交叉轴起点对齐,比方左边是圆形头像,右边是我的信息,或者其余的什么对齐方式;因此定死的混合就不大合适;可是每次调用的时候咱们都去传参数也是麻烦,毕竟大部分时候咱们用flex居中是最多见的;咱们这时候采用这种带参数的默认居中混合

.MIX-center(@x:center,@y:center){ //不要加'';
    display:flex;
    align-items: @y;
    justify-content:@x;
}
.div{ //传入了参数他就用你指定的参数
    .MIX-center(@y:flex-start); //注意传参方式
}
.div1{
    .MIX-center(); //不给就默认(song)(｀・ω・´);
}
//获得
.div{
    display:flex;
    align-items: @flex-start;//采用咱们的设定值
    justify-content:center; //默认值
}

这样是否是感受好得多了?

混合的命名空间

有些奇怪复杂的使用方式,来一段官网的介绍:

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你能够像下面这样在.space中定义一些属性集以后能够重复使用:

.MIX-space{
    .base{
        width: 200px;
        height: 200px;
    }
    .color{
        color:red;
        .bgcolor{
            background-color: grey;
        }
    }
    .border{
        border: 1px solid black;
    }
}
//0,直接调用父层
.space{
    .MIX-space(); //啥都没有
}
//1, 调用直系子层
.space{
    .MIX-space .base();//只有宽高生效
}
//2, 调用直系子层
.space{
    .MIX-space .border();//只有边框生效
}
//3, 有爷爷级,跨级调用孙子层
.space{
    .MIX-space .bgcolor();//NameError: .MIX-space.bgcolor is undefined;
}
//4, 调用直系子层(含本身子层)
.space{
    .MIX-space .color(); //只生效字体红色
}
//5, 连续调用
.space{
    .MIX-space>.color>.bgcolor() //生效灰色
}
//6, 子层以及子层调用
.space{
    .MIX-space .color();
    .MIX-space>.color>.bgcolor(); //注意这种用法,不能写成 .MIX-space>.color()>.bgcolor();
}
//7, 多属性调用
.space{
    .MIX-space .base();
    .MIX-space .border();//宽高边框生效
}
// 8, (没有爷爷),越过父层跳跃调用
.space{
    .color(); //NameError: .color is undefined
}

因此从上面的几个例子能够看出这东西的意义和用法了;他和通常的混合有些不同,感受更像是其余语言的对象,普通混合是一旦调用,那么就会把这个混合里面全部的样式属性所有应用进去,尽管有时候咱们只想要其中一两个;而混合空间则知足了这个须要,你能够在一个复杂的命名空间里面去挑选你须要的几个属性来使用
其中有几个点须要注意一下
1,直接调用父层是不会如同咱们想象的那样去自动包含他下面的子层样式,只会获得他本身身上的样式,假如他上面没有任何样式,那么你将什么也得不到(0);
2,混合命名空间是绝对禁止直接调用子层或者孙子层的,第一步必定是把混合空间引入,这样才"有混可调" (8);
2,调用以前必须先调用父层,直接调用子层会获得未定义 (3);
3,须要哪些样式就调用哪些样式,调了几个你就要写几个,千万别忘了第一点;
4,孙层前面的父层不要加();
关于混合的一些写法建议:
1,混合不必定用'.'开头,也能够用'#',因此看起来就像通常的class选择器和id选择器
2,写混合的时候建议在前面加上MIX-用做识别,这样作有个好处,能够避免和通常class,id混淆;
3,尽管混合在调用的时候有时候能够不加(),可是建议仍是一直加上吧,把他想一想成为函数吧,想着函数调用不带()那是否是很难受?

继承

继承,less的伪类,很明显,意思就是本身(伪类,本身,那么就联想到'&:')从指定的地方去继承样式(又是一个充满玄学的东西٩(º﹃º٩));
先看一个简单例子

.outer{
    background-color:aliceblue;
}
div{
    &:extend(.outer)//继承不用加();
}
//渲染获得
div{
    background-color:aliceblue;
}

继承就基本而言就是这样使用;可是他也有一些注意的点;如今咱们以上面的命名空间为被继承者,看一两个小东西就明白了
你要开心咱们能够叫他爸爸(●￣(ｴ)￣●);儿子从爸爸那儿继承很正常不是

.MIX-space{
    .base{
        width: 200px;
        height: 200px;
    }
    .color{
        color:red;
        .bgcolor{
            background-color: grey;
        }
    }
    .border{
        border: 1px solid black;
    }
}
//1,继承父
.extend{
    &:extend(.MIX-space)
}
//编译获得
.extend{
    //啥都没获得
}
//2,层级调用
.extend{
    &:extend(.MIX-space .color);
}
//编译获得
.extend{
    color: red;
}
//3,多个继承
.extend{
    &:extend(.MIX-space .color); 
    &:extend(.MIX-space .color .bgcolor); 
}
//编译获得
.MIX-space .color,.extend { //注意这个选择器的变化
  color: red;
}
.MIX-space .color .bgcolor,.extend { //注意这个选择器的变化
  background-color: grey;
}
//跨级继承
.extend{
    &:extend(.color); 
}
//获得警告 extend ' .color' has no matches

从上面几个例子能够看出,继承和命名空间的使用规则实际上是基本一致的,只是他不须要调用加括号而已;另外值得注意一点的是继承者在编译出来以后他获得的选择器会变成'父,继承者'这样的形式,在一个就是继承编译出来的并不会在一个大括号里面,这就像上面的嵌套媒体查询器了!

@import 引入

@import引入,这东西在css里面其实也有,做用其实也差很少,都是在一个css里面去引入另外一个css,可是二者的功能性倒是差的不少;假设在一个页面里面,我想要使用bootstrap的btn样式,可是我又不想把整个bootstrap所有引入,那么这时候咱们能够这样作

@import "../bootstrap-3.3.7/less/variables.less"; //注意着两个东西,这是bootstrap的全局变量定义,一些基本单位(颜色,字体大小,padding,margin以内的)都在这个less文件里面
@import "../bootstrap-3.3.7/less/mixins.less"; //全部的混合样式,这两个都必须放在最前面,且必须引入
@import "../bootstrap-3.3.7/less/buttons.less";

<button type="button" class="abtn btn-info">按钮</button>

//使用
.abtn{
    &:extend(.btn);
}
.table{
    &:extend(.table);
}

](https://static.qidianla.com/1...;
能够看到他就有了基本样式,而后咱们再来看看这个文件大小
;
;
至于上面提到的两个less是有这样的描述

bootstrap.less做用是将其余less文件所有引入，可是引入的顺序仍是有要求的。好比先引入 variables.less 和 mixins.less，是由于后面的less文件用到的less特性都是来自于这两个文件的，若是不先引入，就会出现编译错误的问题。而后再引入 reset.less 重置原有的样式。接着引入网格系统的相关文件，这是整个网格系统创建的关键所在。而后引入一些公用的组件，特定组件，最后就是一些无家可归可是比较有用的样式样式文件：utilities.less。

less里面的@import引入能够附带多个参数,这几个参数的意义和做用目前还有摸透是几个意思

指令	含义
reference	使用文件，但不会输出其内容（即，文件做为样式库使用）
inline	对文件的内容不做任何处理，直接输出
less	不管文件的扩展名是什么，都将做为LESS文件被输出
css	不管文件的扩展名是什么，都将做为CSS文件被输出
once	文件仅被导入一次（这也是默认行为）
multiple	文件能够被导入屡次
optional	当文件不存在时，继续编译（即，该文件是可选的）

色彩函数

好吧,这东西有涉及到一些色彩上的专业知识,原谅我只晓得个rgba; ╮(・o・)╭ 因此仍是找个平时用得上的东西来讲
有时候可能拿到个hex,可是明显这东西还有个透明度通道,那就只有转成rgb,在加个a了...难受...香菇,
而less提供几个好用方法使用

.lighten{
    height: 100px;
    width: 100px;
    background-color: fadeout(#4e5b7a, 40%); //fadeout函数
}
//编译获得
.lighten {
    height: 100px;
    width: 100px;
    background-color: rgba(78, 91, 122, 0.6); //上面是淡出值,因此实际应该获得0.6;
}
//其余两个应该用获得的
mix(@color1, @color2,weight);//混合2个不一样的颜色,第三个参数为alpha值,默认50%;
fade(@color,alpha) //就是直接设置透明度
fadein(@color,alpha) //其实就是很fadeout相反啦

色彩函数里面还有几个看起来很复杂的东西,涉及到什么hsla,hsv,色彩空间,色彩通道什么的...看不懂看不懂ﾍ(* – -)ﾉ

免编译

还记得上面的计算属性嘛?提到在less中使用calc()会被同一单位计算处理掉,可是这很危险,因此我咱们要让less知道这东西你不去动他;
使用 ~''(波浪符号加单引号)这样的格式

div{
    width:~'calc(100% - 80px)'
}
//编译获得
div{
    width: calc(100% - 80px);
}

这样就能够避免一些重要的东西被错误编译了

注释

最后缩一下注释吧
CSS 形式的注释在 LESS 中是依然保留的
Less文件中

Css文件中:

//注释

好吧...关于less的基本用法差很少就是上面这些了,后续再补充吧(滑稽)