CSS 预处理器

css有自己先天的不足,因此出现了预处理器,下面用一张图片举个例子:

CSS 预处理器

 可以看到,左边的CSS代码有些代码是重复的,程序员最讨厌的就是重复,因此出现了预处理器,这里只介绍Sass预处理器。

右边的就是Sass,它最大的特点就是嵌套。

下面是一个CSS和Sass自动在线转换网站:点击这里

Sass变量:

这个是一个CSS代码,可以看到重复使用了#188eee这个颜色。我们可以通过声明一个变量来替换这个颜色。

CSS 预处理器

方法如下:

CSS 预处理器

先声明一个变量,然后通过变量来指明我们想要的颜色。

Mixin

CSS一个烦人的地方是你些标准的样式的时候必须也要写一些不标准的属性。

CSS 预处理器

CSS 预处理器

如果需要反复的些的话,会很麻烦,就需要些很多次。因此可以用Sass解决问题。

CSS 预处理器

先写一个差不多模板一样的内容,然后把它include进来,然后又出现了问题,因为这里不能够改变指定的样式值,因此另一种方法出现了,也就是加参数。

CSS 预处理器

Sass循环语法

CSS 预处理器

这里除了1,2,3序号以外,其余的全部都是相同的,那有没有一种方法可以解决这个问题呢?那就是循环。

CSS 预处理器

 就是通过for并且定义一个变量i来循环。