给CSS加点料——Less（二）

Hello 小伙伴们你们好，今天咱们继续less的分享，上次的分享看过以后你们有自行进行安装吗？！兔妞来收做业了哦～咱们今天就来用用试试吧！仍是像别的语言同样，咱们今天仍是从变量开始吧！css

♚

变量html

在CSS中不可以定义变量，因此在不少元素互相依赖大小时，假若须要改其中一个大小，咱们就要从头改到尾，为了减小这个困扰，less引出了变量的概念，咱们能够将值的大小定义为变量，直接在各处引用变量便可，须要更改时，工做量就会大大减少了，同时也会避免由于落下了某几项而产生的问题。webpack

举个🌰：好比我想定义一个长度，宽与高都与这个长度有关，咱们即可这样定义：web

@length: 100px;.item { width: 2*@length; height: @length; background: red;}//是否是清晰不少

♚

嵌套typescript

嵌套也是less的一大特点。想想在使用css的时候，咱们若是想定位到一个元素，就要经过各类选择器去定位，这就会有两个问题，要么起不少id、class名（浪费文采），要么经过各类子选择器、后代选择器等进行定位（浪费体力，还不减肉！），这都不是咱们所但愿的。而有了less，咱们则能够根据html的层级关系对css进行嵌套，根据层级关系进行定位，再经过编译生成那种咱们看着巨恶心的长长的选择器。管他呢，咱们本身写着方便就好了呀！浏览器

在嵌套过程当中同html同样，咱们经过缩进来表现层级关系，从而让咱们更容易去定位元素，debug啦。在less的嵌套中还有一个&的存在，想一下假若咱们要对某个元素进行操做，而这个操做要影响其父级的样式，要怎么办呢，这时就用到了&。&能够用来引用父级选择器。下面咱们就来试试吧～微信

♚

Have a Try！less

下面咱们就来试试吧～
ui

好比兔妞就写了一个这样的页面：
url

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div class="container"> <div class="row"> <div class="item"></div> </div> </div></body></html>

如今会是什么样的呢？固然是什么也看不到的啦，div默认宽度100%，没有高度呀。咱们下面就用less来写样式！

兔妞又写了一个这样子的样式文件：

@length: 100px;
.container { width: 6*@length; height: 3*@length; background: yellow; .row { width: 4*@length; height: 2*@length; background: orange; .item { width: 2*@length; height: @length; background: red; } }}

咱们看目录是这样滴：

显然这是不能用滴！咱们要怎么办！编译呀～上一篇说的的呀～（不过在下那是生活中，咱们不多这样去编译，且不说有不少编译软件的存在，不少IDE中也是有编译插件的，或者经过webpack打包的工程咱们是能够设置为热更新的，此为后话）

lessc style.less style.css

（别忘了换成本身less文件名以及想要转换的文件名哦～）

当当当当！多出来一个css文件哦！如今浏览器是什么效果呢？

变成了这个效果呢？那么咱们再来看看解析成的CSS：是否是省去了不少步骤呢～

咱们再来试试&：

@length: 100px;.item { width: 2*@length; height: @length; background: red;}
.container { width: 6*@length; height: 3*@length; background: yellow; .row { width: 4*@length; height: 2*@length; background: orange; .item { width: 2*@length; height: @length; background: red; &:hover{ border: 1px solid #ccc; } } }}

这个编译出来会是什么样呢？指向的就是定义元素位置的父元素，如此处则为item；

好啦～今天的分享就到这里啦，有话和兔妞说请到公众号中留言哟～喜欢兔妞文章就请在看+关注吧，也欢迎你们多多提出宝贵意见与观点！

本文分享自微信公众号 - 萌兔it（mengtu_it）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。