LESS的基本语法和使用

最新推荐文章于 2023-11-28 15:43:57 发布

letMeAlone_

最新推荐文章于 2023-11-28 15:43:57 发布

阅读量9.3k

点赞数

分类专栏： HTML/CSS

HTML/CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

（该内容大部分为BOOTSTRAP官网例子，需要看原文请进入点击进入BOOTSTRAP学习LESS）

LESS 和 SASS

LESS是更倾向于给设计师用的，编程人员更适合用SASS，但是目前为止先不学这个，因为时间不够。

LESS是CSS的一种预处理语言，其中添加了一些，变量，语法，方法，运算，类等概念

用法是下载一个BOOTSTRAP中的官方LESS文件，以及LESS官方的一个JS文件，JS文件是用来检测并解析调用LESS文件的，不可缺少，否则导入LESS文件无法使用(由于每次刷新都需要调用JS，并进行解析LESS，所以相对于直接用CSS 会花费多一点的时间)

BOOTSTRAP中的LESS文件包含了一般的常用的LESS，可以通过自己创建LESS文件并且调用，跟CSS一样，LESS文件后缀为xxx.less

注：不要尝试把less.js放在style标签后面，js文件并不会去解析内联的样式代码

所有的LESS写法的样式均只能写在 LESS文件里面，所有封装的类只能是.class和#id

可以把一些通用的属性写到一些“类”里面，以便复用，虽然说是类，但并不是指 class 而是概念中的类而不是css\中的定义，官方原话是这样的：任何 CSS class, id 或者元素属性集都可以以同样的方式引入.
也就是说无论在什么地方都可以直接引用写好的“类”
官方只可出了 .xxx的类，实际测试 #xxx(某ID)也可以作为一个类
如 .border{
text-align:center;
width:500px;
height:500px;

}
调用时可以直接使用，如:

div
{
.border;//这样就可以包含border类所有的属性，类似于继承关系

}

**********************************
关于LESS中自带默认参数的用法：

我们还可以像这样给参数设置默认值:（带参数的只能是类或者id类型，不能是一种元素或其他类型比如，不能用 li(@xxx:aaa){}来设置参数，否则会出错，只能写成 : .xxx(@xxx:aaa){} 或者 #xxx(@xxx:aaa){}再来调用）

.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以现在如果我们像这样调用它的话:

#header {
.border-radius;
}

**********************************

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:

.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

pre { .wrap }

-----------------------------------
@arguments 变量

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

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) //如果不设置默认值，@argument就没有意义，调用该类时参数必须填满。
{
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;

同时 LESS也具有复用性：例如

.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}

.mixin (@s, @d,@color) {
display: inline;
}

这样就可以根据参数不同来匹配不同的样式,其中前面两个的第一个参数是直接是实参而不是形参


************************
less中有导引，所谓的导引类似于判断条件，但并非if/else ,而是when


.truth (@a) when (@a = true) { float:right; }
li
{
.truth(true);
}

输出
:li {
float: right;
}

**注意**LESS中除了 true 这个关键字以外全都是 false ，和其他语言的除了0以外都是真是相反的。

导引的判断可以有多个条件，但跟其他语言不同，它并不是用&&或者||来连接条件，但是可以用and连接。如果是OR的话则需要分开写，不能写在一起。




而是如下：

****导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。*******

.mixin (@a) when (@a > 10), (@a < -10) { ... }

如果想基于值的类型进行匹配，我们就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式：

iscolor
isnumber
isstring
iskeyword
isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：

ispixel
ispercentage
isem
最后再补充一点，在导引序列中可以使用and关键字实现与条件：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
使用not关键字实现或条件

.mixin (@b) when not (@b > 0) { ... }