![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Less
菜同学
这个作者很懒,什么都没留下…
展开
-
Less学习(一)----变量(Variables)
变量(Variables)1. @变量名:值;@width:400px;注意:变量实际上是“常量”只能被定义一次2. 变量不仅可以控制CSS规则里的值,还可以用于其他地方,例如 选择器名,属性名,URLs,@import语句选择器名先定义一个变量变量应用于选择器,因为举得例子是类选择器,所以 @ 前面是 ‘.’ ,当是id选择器的时候 @ 前面是 ‘#’.@{变量}{样式规则...原创 2019-08-02 16:42:39 · 1206 阅读 · 0 评论 -
Less学习(二)----混合(Mixins)
混合(Mixins)1.为什么使用混合一个选择器里设置的属性,你想用在另一个选择器里,以往只能复制一遍,而现在你可以使用混合。2.如何使用1)直接在选择器里加入另一个选择器即可(类选择器和id选择器都可以)2)直接在选择器里加入另一个选择器并在其后面加上’()’,两个的效果一样.container{样式规则}.wrapper{.container();或者.containe...原创 2019-08-03 11:44:23 · 617 阅读 · 0 评论 -
Less学习----Vue中引入Less的方法
安装npm install less less-loader --save-devcnpm install less less-loader --save-dev //推荐使用刚开始安装完成后,启动项目时会报错,不知道啥原因,我又重新安装了几次就好了引入<style lang="less" scoped> @import "你要引入的less文件的位置"<...原创 2019-08-02 09:15:38 · 1355 阅读 · 0 评论 -
Less学习(五)--带参数的混合(ParametricMixins)混合函数(MixinsFunctions)规则设置(PassingRulesetsMixins)混合守卫(MixinGuards)
带参数的混合(Parametric Mixins)1)混合可以携带参数,在设置样式规则时可以使用传入的参数参数的值在使用时 必须传入,除非是给了默认值,不然会报错.testdiv(@radius){border-radius: @radius;}.a{.border-radius(10px);}注意: 1.携带参数后在使用时必须给参数赋值,也可以使用默认值,在定义时给一个值即可...原创 2019-08-08 17:50:10 · 379 阅读 · 0 评论 -
Less学习(六)----类型检查函数(Type Checking Functions),css 守卫(CSS Guards),循环(Loop),合并(Merge)
类型检查函数(Type Checking Functions)要是想根据值的类型匹配混合,可以使用 is 函数基础的类型检测函数iscolorisnumberisstringiskeywordisurl检查一个值是否在一个指定的单元中,除了数字emmm 有点没太明白ispixelispercentageisemisunit.mixin (@a; @b: 0) when ...原创 2019-08-08 17:59:46 · 258 阅读 · 0 评论 -
Less学习(三)----嵌套指令和冒泡,操作符,转义,范围,注释,@import
嵌套指令和冒泡(Nested Directives and Bubbling)指令也可以像选择器一样被嵌套,如 media , keyframe.冒泡就是 被嵌套的指令会被提升放在最外层,而里面其他的选择器顺序保持不变.1.条件指令(eg. @Media, @supports , @document)条件指令会把选择器复制到他们的body(体内))并且冒泡2.非条件指令(eg. fo...原创 2019-08-06 18:34:46 · 897 阅读 · 0 评论 -
Less学习(四)----扩展(Extend)
扩展(Extend)选择器:extend(选择器参数){ }扩展是less里的伪类,作用是 将选择器与匹配它引用的选择器合并在一起简单地说,就是 在extend里选择器参数出现的设置规则的时候,也会给extend前的选择器给予同样的规则,相当于非破坏性的搜索和替换().a:extend(.b){}.b{样式规则}等价于.b, .a{样式规则}在输出之前会移除扩展,选择器块...原创 2019-08-06 19:14:46 · 1401 阅读 · 0 评论