浅析less语法

浅析less语法

less是一种动态样式语言。作为CSS的一种扩展,Less不仅完全兼容CSS语法,而且less将CSS赋予了动态语言的特性,如变量、继承、运算、函数。less既可以在客户端上运行,也可以借助Node.js或Rhino在服务端运行。
网上有很多第三方工具帮助你编译 Less 源码。笔者使用考拉编译less文件。

如果选择考拉编译,你的html文件 link的是less文件同名的css文件,换言之考拉将为用户编译出一个css文件(与less文件同名)。

注释

less提供两种注释:/**/和//

两者的区别是/**/会将注释编译到css文件中,而//不会。

变量

Less中的变量有以下规则:

以@作为变量的起始标识,变量名由字母、数字、_和-组成;

没有先定义后使用的规定;

定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式.

f.box{
background-color: @color;
}
甚至可以用变量名定义为变量:  
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
解析后
content: "I am fnord."; 

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。

@testz_width:300px;
.box{
    width: @testz_width;
    height: @testz_width;
    background-color: yellow;

    .border;
}

.border{
    border: solid 5px pink;
}
输出:
.box {
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: solid 5px pink;
}

我们还可以带参数地调用,就像使用函数一样。

混合带参数
.border_02(@border_width){
    border: solid yellow @border_width;
}
.text_hunhe{
    .border_02(30px);
}
输出:
.border {
     border: solid 5px pink;
}

我们还可以默认带参,当不调用的class不传参时,就会传入默认参数

混合-默认带值
.border_03(@border_width:40px){
    border: solid green @border_width;
}
.test_hunhe_03{
    .border_03();
}
输出:
.test_hunhe_03 {
    border: solid #008000 40px;
}

匹配模式与引导

有些情况下,我们想根据传入的参数来改变混合的默认呈现。我们就可以使用匹配模式。笔者将其理解为其他语言中的switch。以下是一个匹配模式的例子:

.triangle(top,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
 }
.triangle(bottom,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: @c transparent transparent  transparent;
    border-style: solid dashed dashed  dashed;
 }  

.triangle(left,@w:5px,@c:#ccc){
    border-width: @w;
    border-color:  transparent @c transparent  transparent;
    border-style:  dashed solid dashed  dashed;
 }
 .triangle(right,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent  transparent @c;
    border-style:  dashed dashed  dashed solid;
 }
 .triangle(@_,@w:5px,@c:#ccc){
    width: 0;
    height: 0;
    overflow: hidden;
 }  

定义好less后我们就可以进行匹配:

html:
less: .sanjiao{ .triangle(right,100px); }

结果输出:

事例

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。

.mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;
}
.mixin (@a) {
    color: @a;
}

lightness为less定义的函数,在后面会讲,这里就不详讲了,这个函数是用来返回HSL颜色模式的亮度(lightness)。返回值为0-100%的百分比数或 0-1 的整数。

我们运行如下代码:
class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就会得到:
.class1 {
    background-color: black;
    color: #ddd;
}
.class2 {
    background-color: white;
    color: #555;
}

导引序列使用逗号‘,’—分割,当且仅当所有条件都符合时,才会被视为匹配成功。导引中可用的全部比较运算有: > >= = =< <。

.m-mixin (@a) when (@a > 10), (@a < -10) { ... }
引导可以对参数进行比较
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

运算与避免编译

任何数字、颜色或者变量都可以参与运算. 来看一组例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

像下面这样带单位运算:

@var: 1px + 5;
less会输出 6px.
括号也同样允许使用:
width: (@var + 5) * 2;

那么如果我们不希望less将行运算,而是讲表达式输出呢?

例如css3中新增的属性calc(),其最大的好处就是用在流体布局上,浏览器可以通过calc()计算得到元素的宽度。
less中也考虑到了这点,我们可以使用~"表达式"来避免编译,这样就可原样输出表达式

.test_03{
width:~"calc(300px-30px)";
}
输出:
.test_03{
width:calc(300px-30px);
}

嵌套

ESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }
#header .navigation {
    font-size: 12px;
}
#header .logo { 
    width: 300px; 
}
#header .logo:hover {
    text-decoration: none;
}
在 less 中, 我们就可以这样写:
#header {
    color: black;

    .navigation {
        font-size: 12px;
    }
    .logo {
         width: 300px;
        &:hover { text-decoration: none }
    }
}   

注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

arguments与!important

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000)    {
     box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments; 
}
.box-shadow(2px, 5px);
将会输出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

!important的使用会使优先级最高,建议在调试样式时使用

.border_03(@border_width:40px){
    border: solid green @border_width;
 }
 输出:
 .test_important {
    border: solid #008000 10px !important;
}

函数

less中提供了非常多的函数,笔者就不一一介绍了,在这里介绍几个函数。

extract返回指定元素

@color-list: pink, yellow, red, #cccccc;
.wrap-01{
    color: extract(@color-list, 3);
}
输出: color:red;
  • 数学函数

ceil

向上取整。
参数: number - 浮点数。
返回值: 整数(integer)
案例: ceil(4.4)
输出: 4

floor

向下取整。
参数: number - 浮点数
返回值: 整数(integer)
案例: floor(2.6)
输出: 2

percentage

将浮点数转换为百分比字符串。
参数: number - 浮点数。
返回值: 字符串(string)
案例: percentage(0.32)
输出:32%

round

四舍五入取整。
参数:number: 浮点数
decimalPlaces: 可选:四舍五入取整的小数点位置。默认值为0。
返回值: 数字(number)
案例: round(1.32)
输出: 2

以及如下函数:

sqrt:平方根函数 (保留单位)
abs:取绝对值 (保留单位)
三角函数(返回数值)
反三角函数(返回以弧度为单位的角度)
pi:返回圆周率 π  
pow(a,b):返回a的b次方 
mod(a,b:返回第一个参数对第二参数取余的结果
min:返回最小的值 
max:返回最大的值
  • 颜色函数

les中定义了非常多的颜色函数。如rgb rgba argb hsl等等,下面介绍简单函数,其他的颜色函数大家可以去查阅相关资料了解。

hsl

通过色相 (hue),饱和度 (saturation),亮度(lightness) 三种值 (HSL) 创建不透明的颜色对象。

hue: 0-360 的整数,用于表示度数。
saturation: 0-100% 的百分比数或 0-1 的整数。
lightness: 0-100% 的百分比数或 0-1 的整数。
返回值: color
案例: hsl(90, 100%, 50%)
输出: #80ff00
当你想基于一种颜色的通道来创建另一种颜色时很方便,
例如: @new: hsl(hue(@old), 45%, 90%);
@new 将拥有 @old 的 hue,以及它自身的饱和度与亮度。
  • 类型函数

验证待验证的值是否为某一类型 例如:isnumber()、isstring()、iscolor()、iskeyword()、isurl() 等等。下面简单介绍isnumber()函数

如果待验证的值为数字则返回 true ,否则返回 false 。
参数:value - 待验证的值或变量。
返回值:如果待验证的值为数字则返回 true ,否则返回 false 。
案例:
    isnumber(#ff0);     // false
    isnumber(blue);     // false
    isnumber("string"); // false
    isnumber(123 4);     // true
    isnumber(56px);     // true
    isnumber(7.8%);     // true 

你可能感兴趣的:(浅析less语法)