CSS扩展语言Less的基本语法

2023-10-27 13:30:04 字數 2855 閱讀 7822

less (leaner style sheets 的缩写) 是一门向后兼容的 css 扩展语言。它对css 语言增加了少许方便的扩展,通过less可以编写更少的**实现更强大的样式。但less不是css,浏览器不能直接识别,即浏览器无法执行less**,要执行必须先将less转换成css。

less的每一个语句后必须使用";"结束,否则可能无法正确的转换成css

即在当前less文件中引用其它less文件,被引入的less文件中的内容可以在此less文件中使用。在引用less文件时可以省略扩展名。

@import "global"; global.less @import "comm.less";@import "index.css";
less的注释有两种,一种为单选注释,以“//开头,“/后的内容为注释的内容。

// import 'comm';
另一种为多行注释,以“/*开头,以“*/结束,中间的内容为注释的内容。

/* import 'comm.less';
嵌套是指子或后代元素的选择器可以定义在父或祖先元素的选择器中。

1)嵌套的使用。

链接1 链接2 链接3ul }}
以上**转换成css后为以下**。

ul ul li ul li > a
2)引用父或祖先选择名称。

在内部使用”&“可以引用外部选择器的名称。

li } a}
以上**转换成css后为以下**。

li:hover >a li-a
扩展使用:extend关键字,通过扩展可以把一个选择器与其它已存在的选择器组成并集,而它自己定义的样式会单独为一个选择器。

divp:extend(div)
以上**转换成css后为以下**。

div, p p
即一个选择器中直接引用另一个选择器的名称,可以把另一个选择器中的样式直接复制过来。但要注意,被引用的选择器只能是类或是id选择器。

.divp
以上**转换成css后为以下**。

.divp
变量的声明和使用有以下几个特点。

1)变量名总是以@开头,定义的变量要以在整个less文件任意地方使用,2)如果在引用时需要与其它内容拼接,则需要使用@的语法来引用。

3)变量可以进行算术运算。

4)如果变量的值本身包含特殊符号,如空格等,可以使用引号括起来。但前面在加上”~“

@width: 10px;@height: @width + 10px;@a: acitve;@color: fff;@border : 1px solid #000';ul'; border: @border; }
以上**转换成css后为以下**。

ul .acitve
变量可以less文件中定义,这种变量称为全局变量,也可以在一个选择器中定义,这种变量称为局部变量。全局变量可以在整个less文件中使用,但局部变量只能在当前选择器中使用。当全局变量和局部变量重名时,按照就近原则会使用局部变量。在变量的作用域中,变量的声明和使用的顺序没有关系。可以先声明变量再使用,也可以先使用再声明变量。

@var : 10px;.header}
以上**转换成css后为以下**。

.header .header img
函数可以通过传入参数,生成不同的结果,参数名与变量的命名规则相同,如果要设置默认值,可以在变量名后使用”:“来定义。函数名只能以”.“或是”#“开头。

.fun(@w,@h : 20px,@c).@
以上**转换成css后为以下**。

.acitve
函数可以使用when 关键字指定是否执行,如果when的结果为true,函数会被执行,如果为false,函数将不会被执行。

示例。

函数名(参数) when (条件表达式)
示例。

/* 当参数@load的值为true时,函数才会被执行 */fun(@height,@load) when (@load = true).active
注意:

1)when与小括号之间必须有空格。

2)when后可以执行条件比较,如等于(=)大于(>)小于(=小于等于(<=

/* 当@height大于等于30时,执行函数 */fun(@height) when ((height >=30px).active
3)多个括号之间可以使用and(并且)、or(或者)来组合多个条件,也可以使用","或者)来组合多个条件。

/* 当@height大于20 并且 小于 40时,执行函数 */fun(@height , center) when (@height > 20px) and (@height < 40px) .active
4)当and和or同进使用时,and的优先级比or高,可以使用括号来提升优先级。

/* 当@center为true时,或者@height大于20 并且 小于 4时,执行函数 */fun(@height , center) when (@center = true) ,height > 20px) and (@height < 40px)).active
5)可以使用not来表示非。

/* 当@height不等于20时,执行函数 */fun(@height) when not (@height = 20px).active
less本身没有专门的循环结构,但可以使用条件结构来实现,即在函数中调用自己,并在函数中改变when的值,直到条件不成立。结束函数的执行。这种结构相当于递归。

示例。

.fun(@i) when (@i <=4).active

凯文的语言发展怎么样了?

记得上次说过后面会分享凯文的语言,那么经过两个月的 他的语言能力如何了呢?六周岁的凯文有着重度的智力障碍,他的语言分为有意义的小声音和无意义的小声音。有意义的声音是大脑驱动发声器官来说话,大脑驱动就是自主发声,比如想要喝水,就能说出 喝水,这就是有意义的声音。或者是模仿别人的声音,例如老师说 喝水,...

5 8岁儿童的语言发展有什么什么特点

欢迎关注我,为你提供更多有价值的专业鱼儿知识。 岁儿童的语言发展 早期识字和语言发音 岁时,孩子们知道单词是由不同的声音和音节组成的。当他们听时,他们可以识别以相同声音开头的汉字。他们还可以注意到发音相同的汉字。 岁时,您的孩子可能会知道字母表中不同字母的部分或全部发音,这是学习阅读的重要第一步。在...

战争和贫穷是恐怖语言的基因,是解决巴以冲突的终极密码

题记 老子 曰 民不惧死,奈何以死畏之?我们知道,巴以冲突从以色列国诞生到现在为止,几十年的时间段里纷争不断,大大小小的冲突与战争从未间断过,甚至一些巴勒斯坦的武装组织被西方国家定义为 恐怖组织 但西方世界以其独有的偏见看待巴以之间的冲突,以至于几十年的历史空间内,巴以矛盾不能得到有效的解决。更重要...