Less
Carry_three
这个作者很懒,什么都没留下…
展开
-
less合集
LESS合集原创 2022-04-04 10:55:33 · 955 阅读 · 1 评论 -
less嵌套和父选择器
嵌套 Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力 例子 less .textarea1{ margin: 10 * 10px; padding: ~"10 * 10px"; .child1{ color: red; } } css .textarea1 { margin: 100px; padding: 10 * 10px; } .textarea1 .child1 { color: red; } 这种嵌套有利于查原创 2022-04-04 10:50:06 · 670 阅读 · 0 评论 -
less避免编译
在不想被less编译的外面加上~(不想被编译的内容)即可不被编译。 这样就可以避免 Less 编译,直接把内容输出到 CSS 中 例子 less .textarea1{ margin: 10 * 10px; padding: ~"10 * 10px"; } css .textarea1 { margin: 100px; padding: 10 * 10px; } ...原创 2022-04-04 10:38:43 · 553 阅读 · 0 评论 -
less继承
继承的定义 在使用封装代码除了混合方法以外还可以使用继承的方法,继承就是该选择器除了使用自身包裹的属性外,还要执行继承的封装代码中的包裹的代码。在预处理之后,会呈现并集选择器的关系。 继承的方法 在选择器后添加 :extend(继承对象) 来进行继承 例子 less .color { color: #111111; } .color { background-color: #159262; } .border_r { border-radius: 5px; } .textare原创 2022-04-04 10:25:53 · 3439 阅读 · 0 评论 -
less运算
在less中可以进行加减乘除的运算 在less中,一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。 下面用一个例子来解释 less文件 @col:#123456; .color(@c) { color: @c+@col; } .border(@width:1px) { border: @width*5%; } .textarea1 { .border( 2px); .color(#111111);原创 2022-04-04 09:50:37 · 2785 阅读 · 0 评论 -
less混合
一:混合的定义 混合就是一种或者一系列属性从一种规则集引入(混合)到另一种规则集的方法 二:混合的分类 1.普通混合 当一个元素要采用另一个类的样式时,可以在HTML文件对应的元素上添加对应的类,但less更为方便,直接在对应的类的样式中添加另一个类的名字即可 例子: less文件 .juzhong{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .texta原创 2022-04-03 21:48:11 · 611 阅读 · 0 评论 -
Less中的变量
原生的css没有变量,但是less有 一、变量分为两类 普通的: 定义: @变量名:变量值 使用: 属性:@变量名 例子: Less文件 @width:5000px; @height:300px; @font_size:12px; .textarea { width:@width; height:@height; font-size:@font_size; } css文件 .textarea { width: 5000px; height: 300px; fon原创 2022-04-02 14:04:40 · 1353 阅读 · 0 评论 -
Less中的注释
在Less文件中 以//开头的注释,不会被编译到css文件中 以/**/包裹的注释会被编译到css文件中 示例如下 Less文件 //不会被编译到css文件中的注释(见不得人的) /*会被编译到css文件中的注释(想给用户看的)*/ .text { width: 500px; height: 300px; font-size: 12px; } css文件 /*会被编译到css文件中的注释(想给用户看的)*/ textarea { width: 500px; heigh.原创 2022-04-02 13:29:59 · 424 阅读 · 0 评论