W先生

Less：Less is More,Than CSS Less 是什么 Less 类似于Css中的Jquery。 LESSCSS 是一种动态样式语言，属于CSS预处理语言的一种，使用类似于CSS的语法，为CSS的赋予了动态语言的特性，如：变量，继承，运算，函数等，更方便CSS的便编写和维护。 LESSCSS可以在多种语言，环境中使用，包括浏览器端，桌面客户端，服务端，主要推荐桌面的客户端。...

Less中的注释 可是使用css中的注释：/**/ 也可以使用 // 注释 （// 编译的时候会自动过滤掉） ​两者的区别： /**/ 中的注释在编译的是会被编译出来的，会在编译生成的CSS中会出现 // 是不会被编译的，编译时自动过滤，在编译生成的CSS中没有...

Less变量 1.定义变量 @变量名：变量值； 注意：一定要以@开头，不要忘记末尾的分号（；） 例如： @test_width:300px; 2.变量的使用 <div class="box"></div> @test_width:300px; .box{ width:@test_width }  ...

混合 对于同一个页面元素： <div class='box'></div> 在Less文件中设置box的宽度： @test_width:300px; .box{ width:@test_width; } 此时若还要给div这个元素加一个border的样式， .border{ border:soild 5p pink; } 原来是： ...

运算 Less中的运算 任何数字，颜色或者变量都可以参与运算，运算应该被包裹在括号中 例如：+ - * / 例如： 新建一个变量 @test_01：300px; 在HTML 中， <div class="box_01"></div> .box_01{     width:@test_01; } 此时这个div的宽度就为：300px; 这个时候使用运算，...

嵌套规则 现有一个列表如下： <ul class="list">     <li>         <a href="#">这里是一个进行测试的文字</a>         <span>2018-11-21</span>     </li>     <l

@arguments 变量 1.@arguments包含了所以传递进来的参数 如果不想单独处理每一个参数的话就可以像这样写： 这之前的写法： .border_arg(@w:30px,@c:red,@xx:solid){     border-width:@w;     border-color:@c;     border-style:@xx; } 如果这这三个都不想写，同时使用这个参...

避免编译 有时候需要输出一些不正确的CSS愈发或者使用一些LESS不认识的专有语法。 要在输出这样的值，我们可以在字符串前加上一个～ 例如：width：～'calc(100%-35)' 有这样一个样式： //避免编译 .test_03{     width: 300px; } 假设有一个宽度的计算： .test_03{     width: calc(300px - 30px);...

匹配模式：类似于JS中的if语句，但不完全是，满足一定条件后才能匹配 比如：用CSS去画一个三角 <div class='triangle'></div> .triangle{     width: 0;     height: 0;     overflow: hidden;     border-width: 10px;     border-color: ...