丁鹿学堂：css预处理器之less学习（一）

less介绍

less是比较好用的css预处理语言。
less增加了很多好用的新特性。
常用的有变量，混入，嵌套，计算等
我们要注意的是，less不管是在服务器还是在浏览器中，都不能直接被使用，而是要编译成css才能运行。
less文件是以.less结尾的

less 编译的几种方式

1 vscode 插件 easy-less ，可以帮助我们自动去编译less为css
2 引入一个cdn的less编译代码，可以对less进行实时处理，这时候要把引入的less加一个type type=“text/less”
3通过npm安装less工具，试用less工具对less代码进行编译（在webpack中配置以后可以自动编译），这也是项目中最常用的方式。

less嵌套

如果box盒子是container的子类，在css中是这样写的

.container .box{height:100px
}

在less中可以直接嵌套写样式，& 表示所在选择器的名称。下面的& 相当于.box, 常用于添加一些伪类使用。

.container{.box{height:100px&:hover{color:red}}
}

less变量

@colorRed:#dd143c;
.box{color:@colorRed
}

less的运算

less中支持使用运算

.box{height:100px *2
}

丁鹿学堂：css预处理器之less学习（一）相关推荐

前端培训，丁鹿学堂和达内浅析
真是很巧,这两家一个是主打线下的,一个是线上的,也算是两种模式的典型代表了. 达内我是了解的.如果你是北京的,可以去现场听,但是如果不是,就只能听看老师直播了,再配上助教老师,就构成了线下.这个模式好 ...
丁鹿学堂：js字符串转数组常用方法总结
我们在前端实际开发过程中,用的最多的是数组.而且js也为数组提供了大量的api,方便我们处理数据. 在实际开发过程中,我们经常需要做的一点就是把字符串转为数组,利用数组的数据结构和api,可以很方便的 ...
学前端报面授，还是慕课网或者丁鹿学堂？
首先我是不建议报线下班的,线下班学员水平参次不齐,有你这种自学了一段时间插进去的,有零基础小白的,我知道的还有26个字母都不熟的,这就有一个问题,老师想要兼顾那么多人导致进度拖沓,自己不懂的也很难及时 ...
前端培训丁鹿学堂：css伪类选择器（一）
css结构伪类 :nth-child(n) css结构伪类是css比较复杂的选择器.了解了怎么使用以后可以在实际项目中更高效率的写样式. :nth-child(n) 表示当前元素向上查找的父元素的第n ...
丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
CSS预处理器之Sass与Less
本篇内容主要讲述css预编译器sass与less: Sass sass(Syntactically Awesome Stylesheets)是css预处理器,可帮助开发人员复用css代码开发,节省开发 ...
css预编译其器,CSS预处理器之——Less
Less,顾名思义,少,在我看来,它有着与jQuery一样的思想--Write Less,Do More,尽管实际上这两者是完全不同的两个东西. Less是一个CSS预处理器,先不管人们为何这样命名, ...
前端培训丁鹿学堂：vue3之计算数据和watch监听深入
setup函数深入 setup会在beforeCreate之前执行一次,它里面的this指向是undefined setup的参数 1.props 用于在setup函数中使用父组件传递的属性 2.co ...
丁鹿学堂：前端http面试总结，状态码详解
http请求方法总结 get: 从服务器获取资源 post:在服务器创建资源 put:在服务器修改资源 delete:在服务器删除资源注意: post和put的最大区别,在于put具有幂等性.比如你 ...