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嵌套

CSS预处理器之less和sass

&:同级的意思,中间无空格CSS预处理器之less和sass

sass嵌套

与less几乎相同

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

CSS预处理器之less和sass 

CSS预处理器之less和sass

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

CSS预处理器之less和sass

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

CSS预处理器之less和sass

CSS预处理器之less和sass

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

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

CSS预处理器之less和sass

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

CSS预处理器之less和sass

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

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

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

CSS预处理器之less和sass 

然后通过:extend调用选择器

CSS预处理器之less和sass

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

CSS预处理器之less和sass

编译后结果

公共的样式:

CSS预处理器之less和sass

 独有的样式:

CSS预处理器之less和sass

l   Extend与mixin的对比:

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

u extend编译后结果:CSS预处理器之less和sass 

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

u mixin编译后结果:CSS预处理器之less和sass

Sass extend

CSS预处理器之less和sass 

CSS预处理器之less和sass

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

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

Less loop(循环)

循环生成一个网格:CSS预处理器之less和sass

编译结果:

CSS预处理器之less和sass

总共12个

Sass loop

CSS预处理器之less和sass

编译结果与less相同

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

CSS预处理器之less和sass

less import (CSS模块化)

CSS预处理器之less和sass

CSS预处理器之less和sass

编译结果:

 CSS预处理器之less和sass

sass import

用法与less基本一样

CSS预处理器框架

1.        SASS-Compass

2.        Less-Lesshat/EST

3.        提供现成的mixin

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

 

上一篇:通过 Python 理解 Mixin 概念


下一篇:Vue-cli 中安装并使用less