less
1 使用 @ 定义变量 2 变量可以做运算 3 4 @color : #000; 5 @width : 1000px; 6 7 使用 & 表示当前类 8 .box{ 9 &:hover{ 10 color : #000; 11 } 12 } 13 14 css 可以嵌套 15 16 ul{ 17 display : block; 18 li{ 19 float : left; 20 a{ 21 font-size : 18px; 22 } 23 } 24 } 25 26 继承 : 直接在需要的地方引用 class或者 id 类 27 28 .clearfix{ 29 zoom : 1; 30 display : block; 31 &:after{ 32 content: ""; 33 visibility: hidden; 34 clear: both; 35 height: 0; 36 display: block; 37 } 38 } 39 40 .radius(@radius : 15px){ 41 border-radius: @radius; 42 } 43 44 .box{ 45 .clearfix; 46 .radius(10px); 47 } 48 49 混合 : 类似 js 中的函数, [或者叫继承] 50 .layout(){ 51 ... 52 } 53 54 55 作用域 : 限制继承的条件,可以继承一个 类的部分内容 56 57 延伸 : &:extend(.box); 括号中可以填写多个 类名 编译后的效果就是 css 中的分组 58 59 60 when 用来做条件判断 61 62 when not 不等于 63 64 /* 65 使用 isnumber 来判断某个参数是否为 数字 66 * */ 67 68 .border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){ 69 border: @width @style @color; 70 } 71 72 /* 73 使用 iscolor 来判断某个参数是否为 颜色 74 * */ 75 76 .border(@color) when (iscolor(@color)){ 77 78 .border(1px , solid , @color); 79 } 80 81 82 .border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){ 83 .border(1px , @solid); 84 }
使用 @ 定义变量变量可以做运算@color : #000;@width : 1000px;使用 & 表示当前类.box{&:hover{color : #000;}}
css 可以嵌套
ul{display : block;li{float : left;a{font-size : 18px;}}}
继承 : 直接在需要的地方引用 class或者 id 类
.clearfix{zoom : 1;display : block;&:after{content: ""; visibility: hidden; clear: both; height: 0; display: block;}}
.radius(@radius : 15px){border-radius: @radius;}
.box{.clearfix;.radius(10px);}
混合 : 类似 js 中的函数, [或者叫继承].layout(){...}
作用域 : 限制继承的条件,可以继承一个 类的部分内容
延伸 : &:extend(.box); 括号中可以填写多个 类名 编译后的效果就是 css 中的分组
when 用来做条件判断
when not 不等于
/* 使用 isnumber 来判断某个参数是否为 数字 * */
.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){ border: @width @style @color;}
/* 使用 iscolor 来判断某个参数是否为 颜色 * */
.border(@color) when (iscolor(@color)){ .border(1px , solid , @color);}
.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){ .border(1px , @solid);}
推荐阅读
-
Mysql version can not be less than 4.1 出错解决办法
-
you *might* want to use the less safe log_bin_trust_function_creators variable
-
Mysql version can not be less than 4.1 出错解决办法
-
Linux中使用命令more,less,cat查看文件内容
-
less简单入门(CSS 预处理语言)
-
浅谈css3中calc在less编译时被计算的解决办法
-
详解在React项目中安装并使用Less(用法总结)
-
Webpack中css-loader和less-loader的使用教程
-
前端构建 Less入门(CSS预处理器)
-
less简单入门(CSS 预处理语言)