CSS 预处理语言之 less 篇

原创 Y先生灬 教程 前端 158阅读 2019-01-24 16:21:04 举报

less

前言

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

安装

客户端使用

监控模式

​ 是客户端的一个功能,当改变样式的时候,客户端将自动刷新。

​ 使用:只需在URL后面加上'#!watch',然后刷新页面就可以了。

服务端使用

详情请点击 less 官网

语法

1.变量

Less 变量 :

@ 开头 定义变量

允许我们定义一系列通用样式,在需要的地方调用。

后期调整全局样式|主题的时候,只需修改几行代码就可以,方便快捷,易于维护。

属性变量
使用变量名定义变量

[注]:当变量作为选择器、属性、URL变量时,变量名 必须使用大括号包裹

2.混合

Less 混合 :可以将一个定义好的 style1 引入到另一个 style 中,使后者继承前者的所有属性

.# 皆可作为 方法前缀。

1).无参调用

定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性

2).带参调用

可以像函数一样定义一个带参数的属性集合:

给参数设置默认值

[注]:在 Less 中定义的不带参属性集合,如果想隐藏这个集合( 即 不让它暴露到css 中),但可以在其他地方引用,可以这样写:

.mb { margin-bottom: 20px; } 要写成 .mb() { margin-bottom: 20px; }

@arguments 变量

@arguments 变量 包含了所有传递进来的参数

数量不定的参数

如果你希望你的方法接受数量不定的参数,你可以使用... ,犹如 ES6 的扩展运算符。

循环方法( 递归实现 )

属性拼接

+_ 代表的是 空格;+ 代表的是 逗号。

3.嵌套

Less 嵌套 :我们可以在父选择器中嵌套子选择器,实现子继承父。

优点:减少了代码量,是结构更加清晰。

& 符号:串联选择器时使用,代表的上一层选择器的名字。

此处例子中:& 直接替换为 .btn-blue 。

4.运算

Less 提供了加,减,乘,除操作,可以做属性值和颜色值的运算

[注]:- 加减法时 以第一个数据的单位为基准

​ - 乘除法时 注意单位一定要统一

5. 继承

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。

6.Color 函数

引用官网的例子

7.Math 函数

引用官网的例子

8.匹配| 引导
1).匹配 (根据值和参数匹配)

只有被匹配的混合才会被使用。变量可以匹配任意的传入值,而变量以外的固定值就仅仅匹配与其相等的传入值。

2).引导 (根据表达式进行匹配)

when关键字用以定义一个导引序列,来实现条件判断。

导引中可用的全部比较运算有: >、 >=、 =、 =<、 <

= 代表的是等于

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

基于值的类型进行匹配,我们就可以使用is*函式

在导引序列中可以使用and关键字实现与条件;使用not关键字实现或条件

9.命名空间

为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,之后可以重复使用

[注]:

​ 1.父元素不能加 括号。如:#bundle > .button

​ 2.不得单独使用命名空间的方法。如:.button // 会报错

10.作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.

一句话理解就是:就近原则

11.字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中,像@{name}这样的结构:

12.避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~

将要避免编译的值用 “”包含起来,结构: ~' 值 '

13. JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用。

14.其他
reference
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复