一、变量
在Less中,我们可以使用变量来储存颜色值、字体大小、边框宽度等等。使用变量不仅可以使你的代码更加简洁易懂,还可以实现样式的复用,快速修改某一样式属性。
定义变量的方式如下:
@color: #f00; //定义一个颜色变量 .box { background-color: @color; //调用变量 }
需要注意的是,变量必须以@符号开头,不能使用$符号。
我们还可以在变量中进行简单的数学运算:
@padding: 5px; .box { margin: @padding * 2; //计算后的边距为10px }
二、嵌套
Less中支持样式的嵌套,可以有效组织你的代码结构,避免样式的重复定义和不必要的选择器。以下是一个嵌套的示例:
#nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; a { padding: 5px; text-decoration: none; } } } }
嵌套语法使用起来非常简单,只需要在父级选择器后面加上花括号即可。
三、Mixin
Mixin可以理解为样式的一种可重用块,可以定义一块样式,然后在其他样式中重复使用。使用Mixin可以使代码更具有可读性和可维护性。以下是一个简单的Mixin示例:
//定义 .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } //使用 .box { .border-radius(5px); //调用Mixin }
需要注意的是,Mixin必须以.开头,且调用时必须加上括号。
如果你使用的是Less 2.5.0及以上版本,你还可以使用Mixin的默认值特性。这样,在调用Mixin时可以不用传入参数,使用默认值。以下是一个使用默认值的Mixin示例:
//定义 .box-shadow(@x: 0, @y: 0, @blur: 5px, @color: #000) { box-shadow: @x @y @blur @color; } //使用 .box { .box-shadow(); //使用默认值,等同于调用.box-shadow(0, 0, 5px, #000) }
四、函数
Less内置了一些函数,可以帮助你处理颜色、字体等属性。以下是一些常用的函数示例:
//darken函数,使颜色变暗 color: darken(#f00, 10%); //lighten函数,使颜色变亮 color: lighten(#f00, 10%); //saturate函数,增加颜色的饱和度 color: saturate(#f00, 20%); //desaturate函数,减小颜色的饱和度 color: desaturate(#f00, 20%); //font-face函数,自定义字体 @font-face { font-family: 'Open Sans'; src: url('OpenSans-Regular-webfont.eot'); src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Regular-webfont.woff') format('woff'), url('OpenSans-Regular-webfont.ttf') format('truetype'), url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; }
五、引入
Less支持在样式文件中引入其他样式文件,可以将大型项目中的样式拆分为多个文件,使代码更加清晰和模块化。以下是一个简单的引入示例:
//引入reset.less文件 @import 'reset.less'; //定义样式 body { margin: 0; padding: 0; }
需要注意的是,引入的文件必须是以.less结尾的Less文件。