css预处理器less的分析

冷不防 2021-09-12 08:30 427阅读 0赞

# 一.了解下less #

一种 动态 样式 语言.

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

# 二.使用 #

（一）.使用方法  html中引用

![20170628094453538][]

（二）less语法：.less文件中编辑

## 1.变量 ##

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

![20170628094141225][]

也可以这样：background-color:@color;

## 2.混合 ##

###   a.类 ###

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:

![20170629100728576][]

### b.带参数混合 ###

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

![20170628094851558][]

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

![20170629101038324][]

## 3.@arguments 变量 ##

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

![20170629101624510][]

## 4.模式匹配和导引表达式   5.嵌套规则 ##

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

![20170629110215171][]

注意 `&` 符号

如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

![20170629110501102][]

## 6.运算 ##

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

![20170629111011673][]

## 7.Color 函数 ##

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

![20170629150439180][]

![20170629150451897][]

## 8.Math 函数 ##

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

![20170629150501453][]

## 9.命名空间 ##

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在\#bundle中定义一些属性集之后可以重复使用:

![20170629150545955][]

## 10.作用域 ##

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

![20170629150627259][]

## 11.注释：“//”或是“/\*\*/”   12.Importing ##

![20170629151322229][]

## 13.避免编译 ##

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.  
要输出这样的值我们可以在字符串前加上一个 ~, 例如:

![20170704094718970][]

# 三.优缺点 #

缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

[20170628094453538]: /images/20210813/0008ff479ad64548954246dad715b1c1.png
[20170628094141225]: /images/20210813/3c700e9d86cc46a6b2807e7769f5283a.png
[20170629100728576]: /images/20210813/6bf7d281eb8c4d1589b92b40ca0ab254.png
[20170628094851558]: /images/20210813/15f628b735db429e9cfa8da35576df2a.png
[20170629101038324]: /images/20210813/1f861b09a1204aa18b52e7f5e04e4e3f.png
[20170629101624510]: /images/20210813/f56fb874e0a642d9bb30a1f53ead0a87.png
[20170629110215171]: /images/20210813/e5a8be157a004b639b35f243daa2bd56.png
[20170629110501102]: /images/20210813/d97247b6a9fa43f1a7d46c003e21ca44.png
[20170629111011673]: /images/20210813/748168e197da41ad87ec25e4c8fbd782.png
[20170629150439180]: /images/20210813/810992b305f64b778306f13044edfd8e.png
[20170629150451897]: /images/20210813/7b72bb1fc5b34912a522bda844bf9d2a.png
[20170629150501453]: /images/20210813/05861487fa6044618b0acd624dffda50.png
[20170629150545955]: /images/20210813/05755478abec41669b05512de9777dd1.png
[20170629150627259]: /images/20210813/006a7dddf6614bf0b8a6bdf8d8cf3991.png
[20170629151322229]: /images/20210813/570b2f879dd24602b916727bcab7f5f3.png
[20170704094718970]: /images/20210813/ba711fa56c034421b188e937bd2ab879.png