css工程化

什么是CSS编译器

CSS编译器,也叫做CSS预编译器,是指开发者使用某种类似CSS(但实际不是)的语言编写代 码,然后通过编译器,将其编译成浏览器真正能执行的CSS代码。

目前常见的CSS编译器有:SASS和LESS。本文已常用的SASS为例,来讲解如何用SASS来实现 优雅简洁的CSS代码。

1. Autoprefix自动前缀

选中该选项,在编译时,会自动对浏览器有兼容问题的属性加上厂商前缀。

2. compressed压缩模式

选中该选项,在编译时,会对生成的代码进行压缩,以达到小文件体积。

变量:

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变 量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性 值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

sass使用 $ 符号来标识变量。

变量声明:

sass变量的声明和css属性的声明很像: $highlight-color: #F90; 这意味着变量$highlight­color 现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值,甚至是以空格分割的 多个属性值,如 $basic-border: 1px solid black; ,或以逗号分割的多个属性值,如

$plain-font: "Myriad Pro","Myriad","Helvetica Neue","Helvetica","Liberati on Sans","sans-serif";

这时变 量还没有生效,除非你引用这个变量——我们很快就会了解如何引用。

与CSS属性不同,变量可以在css规则块定义之外存在。当变量定义在css规则块内,那么该变量只 能在此规则块内使用。如果它们出现在任何形式的{…}块中:

$nav-color: #F90; nav {   $width: 100px;

  width: $width; //$width只能在该规则块中使用   color: $nav-color; }

编译后:

nav {   width: 100px;   color: #F90; }

在这段代码中, $nav-color 这个变量定义在了规则块外边,所以在整个样式表中都可以像 nav规 则块那样引用它。 $width 这个变量定义在了nav的{ }规则块内,所以它只能在nav规则块内使用。 这意味着是你可以在样式表的其他地方定义和使用 $width 变量,不会对这里造成影响。

只声明变量其实没啥用处,我们终的目的还是使用它们,接下来我们将进一步探讨变量的使用方法。

变量引用:

凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用。css生成时,变量 会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此 变量的地方生成的值都会随之改变。

 

看上边示例中的 $highlight-color 变量,它被直接赋值给 border 属性,当这段代码被编译输出 css时, $highlight-color 会被 #F90 这一颜色值所替代。产生的效果就是给 selected 这个类一 条1像素宽、实心且颜色值为 #F90 的边框。

嵌套CSS 规则

嵌套属性:

在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么 糟糕,但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非 常烦人的。在sass中,你只需敲写一遍border:

混合器

如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理 这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代 码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

 

posted @ 2019-06-13 17:34  阿康呀  阅读(176)  评论(0编辑  收藏  举报