34.CSS预处理器的比较less sass

CSS预处理器

1.        基于CSS的另一种语言

2.        通过工具编译成CSS

3.        添加了很多CSS不具备的特性

4.        能提升CSS文件的组织方式

CSS预处理器的作用

1.        帮助更好的组织CSS代码

2.        提高代码复用率

3.        提升可维护性

CSS预处理种类

1.        Less 文件后缀名:.less

a)       基于node写的

b)       JS写的编译速度快

2.        Sass  文件后缀名:.scss

a)       Ruby写的C++写的,有node版本:node-sass

CSS预处理器的功能

1.        嵌套:反映层级和约束

2.        变量和计算:减少重复代码

3.        Extend和Mixin:代码片段复用

4.        循环:适用于复杂有规律的样式

5.        import:CSS文件模块化

预处理器的优缺点

1.        优点:提高代码复用率和可维护性

2.        缺点:需要引入编译过程,有学习成本

less嵌套

34.CSS预处理器的比较less sass

&:同级的意思,中间无空格34.CSS预处理器的比较less sass

sass嵌套

与less几乎相同

less变量和计算(变量用@声明)

34.CSS预处理器的比较less sass 

34.CSS预处理器的比较less sass

sass变量和计算(变量用$声明)

34.CSS预处理器的比较less sass

less mixin (功能:样式的复用)

34.CSS预处理器的比较less sass

34.CSS预处理器的比较less sass

 类似JS函数写了一个.block的函数调用

sass mixin (功能:样式的复用)

34.CSS预处理器的比较less sass

必须要有@mixin声明,block前没有点.

34.CSS预处理器的比较less sass

使用上也有区别:调用时要包含@include 并且block前没有点.

Less extend (提取公共样式解决重复CSS代码)

Extend是扩展某一个选择器,因此就不加参数了先定义一个标准的选择器.block

34.CSS预处理器的比较less sass 

然后通过:extend调用选择器

34.CSS预处理器的比较less sass

&符号是同级关系因此有以下相同写法

34.CSS预处理器的比较less sass

编译后结果

公共的样式:

34.CSS预处理器的比较less sass

 独有的样式:

34.CSS预处理器的比较less sass

l   Extend与mixin的对比:

n   extend是将选择器提取出来,将公共的样式写到一起,独有的样式单独写出来。

u extend编译后结果:34.CSS预处理器的比较less sass 

n   mixin是直接将代码复制过来

u mixin编译后结果:34.CSS预处理器的比较less sass

Sass extend

34.CSS预处理器的比较less sass 

34.CSS预处理器的比较less sass

sass中使用extend的方式使用@extend

运行结果与less结果相同,只是选择器有无换行。

Less loop(循环)

循环生成一个网格:34.CSS预处理器的比较less sass

编译结果:

34.CSS预处理器的比较less sass

总共12个

Sass loop

34.CSS预处理器的比较less sass

编译结果与less相同

以有更加方便的写法,sass中支持for循环,less中不支持

34.CSS预处理器的比较less sass

less import (CSS模块化)

34.CSS预处理器的比较less sass

34.CSS预处理器的比较less sass

编译结果:

 34.CSS预处理器的比较less sass

sass import

用法与less基本一样

CSS预处理器框架

1.        SASS-Compass

2.        Less-Lesshat/EST

3.        提供现成的mixin

4.        类似JS类库:封装常用功能

 

https://www.cnblogs.com/nayek/p/11747751.html

34.CSS预处理器的比较less sass

上一篇:JSONP是个嘛玩意?解决跨域问题?


下一篇:10.jQuery属性—文档—位置操作