less
2018-06-24 00:25:34来源:未知 阅读 ()
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);}
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS清除浮动
下一篇:【CSS】过渡、动画和变换
- CSS中的float和margin的混合使用 2020-06-11
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- 通配符选择器 2020-05-27
- ECharts安装与使用 2020-05-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash