内容简介:less 和 sass 是两种 css 预编译语言,其目的是为了更快、更结构的编写本文我只写一些自己常用的方法,要看全部的帮助文档,参阅这里:写一个
Less 日常用法
你需要了解的
less 和 sass 是两种 css 预编译语言,其目的是为了更快、更结构的编写 css
文件,是一种强大的 css 编译语言,能使用 变量、运算符、判断、方法等等。
本文我只写一些自己常用的方法,要看全部的帮助文档,参阅这里: http://lesscss.cn/features/
看个小例子
写一个 .btn
类并支持 :hover
:active
样式
CSS
.btn { /* btn 初始样式 */ } .btn:hover{ /* :hover 样式 */ } .btn:active{ /* :active 样式 */ }
Less
.btn{ // btn 初始样式 &:hover{ // hover 样式 } &:active{ // active 样式 } }
可以看出 less 的结构要比 css 清晰,并且写的也要更少。
下面的 less 在使用中就会生成上面的 css。
而这还只是皮毛,保证你用过 less 之后就不会再用 css 写样式了。
变量
less
是支持变量的,因为有了变量,让 less
在改变全局样式的时候更加方便了。
一般使用中,颜色是最常用的。其次是单位长度。
@变量名: 变量值 // 如: // Colors @red: #CD594B; @yellow: #F8CE5E; @green: #4B9E65; @yellow: #5A8DEE; // Unites @btn-padding: 4px; @btn-lineheight: 26px;
实际使用中:
less
.btn-success { background-color: @green; line-height: @btn-lineheight; color: #fff; }
生成 css
.btn-success { background-color: #4B9E65; line-height: 26px; color: #fff; }
混合
可以直接在其它类中插入其它类的内容。
less
.bg-yellow { background-color: @yellow; } .btn-warn { line-height: @btn-lineheight; .bg-yellow; }
会生成 css
.bg-yellow { background-color: #F8CE5E; } .btn-warn { line-height: 26px; background-color: #F8CE5E; }
运算符
less 支持 +
-
*
/
( )
运算,看例子
@width-20: 20px; @count: 3; @per-10: 10%; .card{ width: width20 * @count; min-width: @per-10 * 7; } // 注意,运算的时候,要在运算符两边留空格,因为可能会有横线连接的变量,造成混淆。 // 单位 less 可以自动识别,不用担心单位。
输出
.card{ width: 60px; min-width: 70%; }
less 的内置函数
参阅 : http://lesscss.cn/functions/#...
完整的函数有:
杂项函数
、 字符串函数
、 列表函数
、 数学函数
、 类型函数
、 颜色定义函数
、 颜色通道函数
、 颜色操作函数
、 颜色混合函数
这里只说一此关于颜色的常用方法,因为其它的我现在也没怎么用到。
lighten(颜色, 百分比) // 调高颜色的亮度 darden(颜色, 百分比) // 调低颜色的亮度 saturate(颜色, 百分比) // 调高饱和度 desaturate(颜色, 百分比) // 调低饱和度
@green: #4B9E65; .green{ background-color: @green; } .green-lighten{ background-color: lighten(@green,20%); } .green-darken{ background-color: darken(@green,20%); } .green-saturate{ background-color: saturate(@green,20%); } .green-desaturate{ background-color: desaturate(@green,20%); }
输出
.green { background-color: #4B9E65; } .green-lighten { background-color: #88c79c; } .green-darken { background-color: #2a5939; } .green-saturate { background-color: #34b55c; } .green-desaturate { background-color: #62876e; }
函数方法的使用
有时候,比如,你需要写一个按钮类 .btn-success
, .btn-danger
, .btn-default
, .btn-warning
,如果单个定义的话,会很麻烦,现在用了方法,就可以直接填参数完成了。
less
@green: #4B9E65; @blue: #5A8DEE; @yellow: #F8CE5E; @red: #CD594B; .btn-template(@bgcolor,@fcolor:white){ // 定义了两个参数,第二个参数有默认值 // 也就是说这个方法可以值一个或两个参数 // 另外 带 () 参数的方法不会把自身渲染到 css 中,只有调用才会渲染 color: @fcolor; border-color: darken(@bgcolor, 3%); background-color: @bgcolor; &:hover { color: @fcolor; background-color: darken(@bgcolor, 5%); } &:active { color: @fcolor; background-color: darken(@bgcolor, 10%); } } .btn-blue{ .btn-template(@green) } .btn-blue{ .btn-template(@blue) } .btn-blue{ .btn-template(@yellow) } .btn-blue{ .btn-template(@red) }
上面的 less 输出为下面的内容,有没有很厉害
.btn-blue { color: white; border-color: #46945e; background-color: #4B9E65; } .btn-blue:hover { color: white; background-color: #438d5a; } .btn-blue:active { color: white; background-color: #3b7b4f; } .btn-blue { color: white; border-color: #4c83ed; background-color: #5A8DEE; } .btn-blue:hover { color: white; background-color: #437dec; } .btn-blue:active { color: white; background-color: #2c6de9; } .btn-blue { color: white; border-color: #f7ca4f; background-color: #F8CE5E; } .btn-blue:hover { color: white; background-color: #f7c746; } .btn-blue:active { color: white; background-color: #f6bf2d; } .btn-blue { color: white; border-color: #ca4e3f; background-color: #CD594B; } .btn-blue:hover { color: white; background-color: #c74737; } .btn-blue:active { color: white; background-color: #b34032; }
文件拆分,文件引用
像 js 和其它高级开发语言一样, less 也可以引用外部的 less 文件
引用格式:
@import "variables.less"
这样就把外部的 variables.less
引入到当前文件中了
variables.less
// colors @green: #4B9E65; @blue: #5A8DEE; @yellow: #F8CE5E; @red: #CD594B; // units @common-height: 30px; @input-height: 26px; @input-padding: 4px;
主体less文件
@import "variables.less" // 主文件里面就可以引用 variables.less 中的变量了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大数据供应链
娜达·R·桑德斯 (Nada R. Sanders) / 丁晓松 / 中国人民大学出版社 / 2015-7-1 / CNY 55.00
第一本大数据供应链落地之道的权威著作,全球顶级供应链管理专家娜达·桑德斯博士聚焦传统供应链模式向大数据转型,助力工业4.0时代智能供应链构建。 在靠大数据驱动供应链处于领先地位的企业中,45% 是零售商,如沃尔玛、亚马逊,而22%是快消企业,如戴尔电脑。他们都前所未有地掌控了自己的供应链。在库存管理、订单履行率、原材料和产品交付上具有更为广阔的视野。利用具有预见性的大数据分析结果,可以使供需......一起来看看 《大数据供应链》 这本书的介绍吧!