Less语法剖析

来源：互联网发布：sub数学知乎编辑：程序博客网时间：2024/05/01 09:08

学习要点：

变量
混合
嵌套
运算
模式匹配
条件表达式
基于值的类型检测
颜色函数
数学函数
作用域
命名空间
引入Less文件

下面是HTML代码，以下的案例可能会用到：

<link rel="stylesheet/less" type="text/less" rev="stylesheet/less" href="css/style.less"></head><body><div class="div1">盒子1</div><div class="div2">盒子2</div><div class="div3">盒子3</div><div class="div4">盒子4    <div>        <span>行内元素1</span>    </div>    <span>行内元素2</span></div><div class="div5">盒子5</div><div class="div6">盒子6</div><script type="text/javascript" src="js/less.min.js"></script>

1) 变量
less–定义了一个名为colors值为#ccc的变量

@colors : #ccc;.div1 {    color : @colors;}

转换为css

.div1 {    color : #ccc;}

还可以将变量名定义为变量

@colors : red;@c : 'colors';body {    background-color: @@c;}

转换为css

body {    background-color: red;}

2) 混合，类似于函数,如果传参，则为参数混合
less–定义了一个名为.div5，参数为width默认为5px的函数

.div5(@width:5px){    color : red;    border-style : solid;    border-width : @width;}

在.div6中调用，且实参为10px

.div6 {    .div5(10px);}

转换为css

.div6 {    color : red;    border-style : solid;    border-width : 10px;    // 用10px代替了@widths=5px}

PS : 在函数样式中有一个参数变量@arguments，类似于JS中的arguments对象

/*自定义border样式 border : 10px solid red, 默认*/.dfn-border (@width : 10px, @sty : solid, @color : red) {    border: @arguments;}.div1 {    /*调用border样式*/    .dfn-border;}

3) 嵌套，类似于css中的后代选择器
首先在.div4中定义了border和padding属性
接着定义了.div4 div的background-color属性
最后在定义了.div4 div span的color属性

.div4 {    border : 1px solid #333;    padding : 10px;    div {        background-color : red;        span {            color : blue;        }    }}

同时，也可以用&来表示串联选择符

.div4 {    &.left {        color : blue;    }    top {        background-color : red;    }}/*转换为css*/.div4.left {    color : blue;}.div4 top {    background-color : red;}

4) 运算
less–定义了fonts变量，并且设置span元素的font-size为两倍fonts，即20px

@fonts : 10px;span {    font-size : @fonts * 2;}// 转换为cssspan {    font-size : 20px;}

5) 模式匹配

/*重载定义函数，参数个数不同*/.mixin (@a) {    color : @a;    width : 100px;}.mixin(@a, @b) {    /*颜色变为@a的20%*/    color : fade(@a, @b);}.div1 {    .mixin(red);}.div2 {    .mixin(red, 20%);}

6) 条件表达式

.color(@num) when (@num > 10) {    color : red;}/*PS 小于等于为 =< *//*PS 比较运算有 >、>=、=、=< 和 < */.color(@num) when (@num =< 10) {    color : orange;}body {    .color(20);    .color(2);}

判读真假值

.truth (@a) when (@a = true) {    /*如果@a为真，则执行*/    background-color: red;}body {    /*执行*/    .truth(true);           /*不能执行*/    /*.truth(t);*/    /*PS 只有true为布尔真值，其余为假值*/}

条件用”，”隔开(即OR运算)，当所有条件都不满足时，不能执行。否则，可以执行

/*满足任意条件即可执行函数体*/.truth (@a) when (@a > 10), (@a < -10) {    /*如果@a为真，则执行*/    background-color: red;}body {    /*执行*/    /*.truth(20);*/         /*.truth(-20);*/    /*不能执行*/    .truth(5);}

条件用”and”隔开(即&&运算)，当所有条件都满足时，执行。否则，不能执行

.truth (@a) when (@a < 10) and (@a > -10) {    /*如果@a为真，则执行*/    background-color: red;}body {    /*不能执行*/    /*.truth(20);       */    /*执行*/    .truth(5);}

条件用”not”隔开(即!运算)

/*匹配不在 0 < @a < 10的数字*/.truth (@a) when not (@a < 10) and (@a > 0){    /*如果@a为真，则执行*/    background-color: red;}body {    /*执行*/    /*.truth(50);*/    /*报错*/    .truth(5);  }

7) 基于值的类型检测

/*iscolor判断值是否为颜色值*/.mixin (@a) when (iscolor(@a)) {    background: red;}/*isnumber判断值是否为数字*/.mixin (@a) when (isnumber(@a)) {    background-color: green;}.div1 {    /*red 为颜色值，调用iscolor*/    /*.mixin(red);      */    /*10 为数字，调用isnumber*/    .mixin(10);}

PS : 另外，istring、iskeyword、isurl分别检测的是字符串、关键字和URL
同时，也可以判断数字或者单位，ispixel、ispercentage、isem

.mixin (@a) when (ispixel(@a)) {    background: red;}.div1 {    /*不能执行*/    /*.mixin(10);*/    /*执行*/    .mixin(10px);}

8) 颜色函数

lighten(@color, 10%)        返回颜色比@color颜色亮10%draken(@color, 10%)         返回颜色比@color颜色暗10%saturate(@color, 10%)       返回颜色比@color颜色饱和度高10%desaturate(@color, 10%)     返回颜色比@color颜色饱和度低10%fadein(@color, 10%)         返回颜色比@color颜色不透明度高10%fadeout(@color, 10%)        返回颜色比@color颜色不透明度低10%fade(@color, 10%)           返回颜色比@color颜色透明度的10%spin(@color, 10)            返回颜色比@color颜色增加10个色度mix(@color1, @color2)       返回@color1和@color2的混合色

/*饱和度增加red的25%*/@base : red;body {    color : saturate(@base, 25%);}

提取颜色

hue(@color)                 提取颜色@color的色调度saturation(@color)          提取颜色@color的饱和度lightness(@color)           提取颜色@color的亮度

9) 数学函数

round(@number)              四舍五入ceil(@number)               向上取值floor(@number)              向下取值percentage(@number)         转换为百分比

10) 作用域

@color : red;.div1 {    @color : blue;    /*先从当前的作用域查找@color,发现存在则不再向上查找*/    background: @color;         // blue}body {    background: @color;         // red}

11) 命名空间

@var-color : red;/*在#box中定义了.color()、.border()，会隐藏*/#box {    @var-color : blue;    .color () {        color : @var-color;    }    .border () {        border : 5px solid @var-color;    }    /*并非无参混合，会暴露出来*/    .margin {        margin : 10px 20px;    }}.div1 {    @var-color : green;    /*调用命名空间的混合*/    #box > .color;          // blue}

12) 引入less文件

@import "style.less";

0 0