LESS
LESS的相关学习
wujiayucn
选一个自己喜欢的方向,一条道走到黑!
展开
-
Less学习笔记1:概览
Less:Less is More,Than CSSLess 是什么Less 类似于Css中的Jquery。LESSCSS 是一种动态样式语言,属于CSS预处理语言的一种,使用类似于CSS的语法,为CSS的赋予了动态语言的特性,如:变量,继承,运算,函数等,更方便CSS的便编写和维护。LESSCSS可以在多种语言,环境中使用,包括浏览器端,桌面客户端,服务端,主要推荐桌面的客户端。...原创 2018-11-03 20:22:14 · 149 阅读 · 0 评论 -
Less学习笔记2:Less中的注释
Less中的注释 可是使用css中的注释:/**/ 也可以使用 // 注释 (// 编译的时候会自动过滤掉) 两者的区别:/**/ 中的注释在编译的是会被编译出来的,会在编译生成的CSS中会出现// 是不会被编译的,编译时自动过滤,在编译生成的CSS中没有...原创 2018-11-10 19:24:26 · 1682 阅读 · 0 评论 -
Less学习笔记3:变量
Less变量1.定义变量@变量名:变量值;注意:一定要以@开头,不要忘记末尾的分号(;)例如:@test_width:300px;2.变量的使用<div class="box"></div>@test_width:300px;.box{width:@test_width} ...原创 2018-11-10 19:35:57 · 148 阅读 · 0 评论 -
Less学习笔记4:样式混合
混合对于同一个页面元素:<div class='box'></div>在Less文件中设置box的宽度:@test_width:300px;.box{ width:@test_width;}此时若还要给div这个元素加一个border的样式,.border{ border:soild 5p pink;}原来是:...原创 2018-11-13 18:09:11 · 649 阅读 · 0 评论 -
Less学习笔记6:运算
运算Less中的运算任何数字,颜色或者变量都可以参与运算,运算应该被包裹在括号中例如:+ - * /例如:新建一个变量@test_01:300px;在HTML 中,<div class="box_01"></div>.box_01{ width:@test_01;}此时这个div的宽度就为:300px;这个时候使用运算,...原创 2018-11-21 12:22:19 · 159 阅读 · 0 评论 -
Less学习笔记7:嵌套规则
嵌套规则现有一个列表如下:<ul class="list"> <li> <a href="#">这里是一个进行测试的文字</a> <span>2018-11-21</span> </li> <l原创 2018-11-21 15:05:04 · 432 阅读 · 0 评论 -
Less学习笔记8:@arguments 变量
@arguments 变量1.@arguments包含了所以传递进来的参数如果不想单独处理每一个参数的话就可以像这样写:这之前的写法:.border_arg(@w:30px,@c:red,@xx:solid){ border-width:@w; border-color:@c; border-style:@xx;}如果这这三个都不想写,同时使用这个参...原创 2018-11-21 15:32:08 · 1051 阅读 · 0 评论 -
Less学习笔记9:避免编译
避免编译有时候需要输出一些不正确的CSS愈发或者使用一些LESS不认识的专有语法。要在输出这样的值,我们可以在字符串前加上一个~例如:width:~'calc(100%-35)'有这样一个样式://避免编译.test_03{ width: 300px;}假设有一个宽度的计算:.test_03{ width: calc(300px - 30px);...原创 2018-11-21 16:36:04 · 676 阅读 · 0 评论 -
Less学习笔记5:匹配模式
匹配模式:类似于JS中的if语句,但不完全是,满足一定条件后才能匹配比如:用CSS去画一个三角<div class='triangle'></div>.triangle{ width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: ...原创 2018-11-20 10:20:49 · 186 阅读 · 0 评论