CSS工程化

Posted zai1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS工程化相关的知识,希望对你有一定的参考价值。

CSS工程化

 

引言

你在编写CSS代码时,是否遇到过这样的问题:

代码没有层次结构,难以看出嵌套关系

.site-footer .footer-container .footer-menu

display: flex;

width: 773px;

justify-content: space-between;

line-height: 3;

.site-footer .footer-container .footer-menu li

font-size: 14px;

.site-footer .footer-container .footer-menu li a:hover

color: #fff;

.site-footer .footer-container .footer-menu li:first-child

font-size: 16px;

color: #eee;

这样的代码在CSS中非常常见,本来是从外向内依次设置CSS样式,但在书写时,我们不得不每次

都从最外层开始选择,不仅繁琐,而且重复的书写这些选择器也容易出错,同时还增加了阅读难

度。

重复的样式

.site-footer

background: #2E2E2E; /* 多次用到该颜色 */

color: #c1c1c1; /* 多次用到该颜色 */

padding: 50px 0;

.site-header

background: #2E2E2E; /* 多次用到该颜色 */

color: #c1c1c1; /* 多次用到该颜色 */

position: fixed;

left: 0;

top: 0;

一个网页通常只有几种配色,这些配色会到处使用,或者是一些样式(比如弹性盒、固定位置等)

也会到处使用,这样一来,我们不得不到处的去书写这些重复代码。一旦有一天网站改版,颜色发

生变化,代码修改量是非常庞大的。

CSS中遇到的这些问题,如果放到后端开发领域,是难以想象的。而后端开发之所以不容易发生

这样的问题,是因为后端有多种技术手段来解决该问题(函数、类、模块等)。而现在,前端的迅

速崛起,也为这些问题带来了解决方案。

本文讨论的《CSS工程化》,就是使用后端开发的思维,来解决前端遇到的问题。

CSS编译器的出现CSS经过多个版本的更迭,从CSS1 CSS3,历时多年。虽然新出了不少属性和规范,但

在语言本身的特性上,并没有本质的改变。尽管使用 @import 指令可以解决部分模块化的

问题,但还远远不够。但W3C官方似乎对这些问题视而不见,就是不解决,于是,随着前

端技术(特别是JS)的快速发展,很多第三方机构开始尝试进入CSS这个古老的领域,开

始着手解决这些遗留太久的难题。

而它们的思路,就是像解决JS的问题那样,用编译器来解决CSS的问题

 

什么是CSS编译器

 

CSS编译器,也叫做CSS预编译器,是指开发者使用某种类似CSS(但实际不是)的语言编写代

码,然后通过编译器,将其编译成浏览器真正能执行的CSS代码。

目前常见的CSS编译器有:SASSLESS。本文已最常用的SASS为例,来讲解如何用SASS来实现

优雅简洁的CSS代码。

 

SASS示例

 

下面是用一段非常简单的SASS代码,来讲解它是如何执行的。

$darkcolor : #2E2E2E; //定义一个颜色变量,值为#2E2E2E

$lightcolor : #c1c1c1; //定义一个颜色变量,值为#c1c1c1

.site-footer

background: $darkcolor; //使用变量$darkcolor的值作为背景色

color: $lightcolor; //使用变量$lightcolor的值作为前景色

padding: 50px 0;

.site-header

background: $darkcolor; //使用变量$darkcolor的值作为背景色

color: $lightcolor; //使用变量$lightcolor的值作为前景色

position: fixed;

left: 0;

top: 0;

上面的代码虽然看上去和CSS代码很像,但其实仔细观察,它并不是CSS语言(CSS中可没有变

量),而它是用SASS语言书写而成的。

这段代码并不能被浏览器识别,因为浏览器不认识SASS代码。

因此,需要使用SASS编译器进行编译,它会将我们的SASS代码编译成CSS代码,编译完成后,会

得到类似这样的CSS代码:

.site-footer

background: #2E2E2E;

color: #c1c1c1;padding: 50px 0;

.site-header

background: #2E2E2E;

color: #c1c1c1;

position: fixed;

left: 0;

top: 0;

看到了吗?两个类选择器中的背景色和前景色被变量的值替换了,这段代码是可以被浏览器执行

的。 也就是说,我们可以使用SASS语言来编写没有重复的、简洁优雅的CSS代码,编写好后,只

需要让SASS编译器启动起来,将其生成最终的CSS代码交给浏览器执行就可以了。

接下来,我们就来一步步学习如何使用SASS

 

SASS的安装 SASS编译器是使用 Ruby 语言书写而成的,因此,SASS的执行依赖Ruby的环境。值得庆幸的是,

我们不需要进行繁琐的步骤去安装和配置Ruby,直接安装一个第三方的工具Koala即可。

Koala是一个预编译工具集,它内置了SASSLESS等多种前端的预编译器,并且提供图形化的操

作界面,无论对于新手和老手,都是非常不错的选择。

还等什么,赶紧去官网下载Koala并安装吧

起步跟随教程,一步步认识SASS的使用。

准备工程

新建一个文件夹,并用你熟悉的文本编辑器打开(例如VSCode),然后在文件夹中新建css文件

夹,用于存放SASS文件以及CSS文件,再在根目录中新建一个index.html文件。

编写SASS代码css文件中新建一个 index.scss 文件,注意后缀名为 .scss ,表示这是一个使用Sass CSS语言

编写的文件。

在该文件中输入下面的代码:

@charset "utf-8";

$darkcolor : #2E2E2E; //定义一个颜色变量,值为#2E2E2E

$lightcolor : #c1c1c1; //定义一个颜色变量,值为#c1c1c1

.main

background: $darkcolor; //使用变量$darkcolor的值作为背景色

color: $lightcolor; //使用变量$lightcolor的值作为前景色

从代码中我们可以看到,sass语言中是支持 // 注释的。

编译

我们书写好了SASS代码,现在需要将它编译成浏览器可识别的CSS代码。

现在,打开安装好的Koala,将你的工程文件夹拖动Koala的主界面中。

此时,如果不出意外,你的VSCODE中,已经生成了对应的CSS文件和一个Map文件。你可以看一下index.css文件中的代码,是否就是你需要的代码呢?

使用SASS开发就是这么简单,不仅如此,只要你不关闭Koala,之后你对index.scss文件作出的任

何改动,它都会直接自动编译到index.css中。

那么map文件是干嘛用的呢?这是一个指示SASS文件和CSS文件映射方式的文件,如果你是一个

初学者,简单来说,就是没用。你可以在Koala中进行设置,让它不要生成这个文件。

现在,手动删除index.css.map文件,它以后都不会生成了。

编译选项

Koala提供多种编译选项可供配置,这里介绍两个:1. Autoprefix自动前缀

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

 

2. compressed压缩模式

 

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

现在,将SASS代码更改成:

@charset "utf-8";

$darkcolor : #2E2E2E; //定义一个颜色变量,值为#2E2E2E

$lightcolor : #c1c1c1; //定义一个颜色变量,值为#c1c1c1

.main

background: $darkcolor; //使用变量$darkcolor的值作为背景色

color: $lightcolor; //使用变量$lightcolor的值作为前景色

display: flex; //有兼容问题的属性

保存后,再看看index.css

应用到页面

这一步就很简单了,在index.html页面中引用编译而成的index.css即可。

index.html

<!DOCTYPE html>

<html lang="en"><head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="css/index.css">

</head>

<body>

<div class="main">

Lorem ipsum dolor sit amet consectetur.

</div>

</body>

</html>

打开页面看看,效果已经应用上了。

之后,你只需要专注于用SASS代码开发样式即可。

接下来,我们就来看一看,SASS给我们开发样式,提供了哪些便利。

变量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: #F90;

.selected

border: 1px solid $highlight-color;

编译后:

.selected

border: 1px solid #F90;

看上边示例中的 $highlight-color 变量,它被直接赋值给 border 属性,当这段代码被编译输出

css时, $highlight-color 会被 #F90 这一颜色值所替代。产生的效果就是给 selected 这个类一

1像素宽、实心且颜色值为 #F90 的边框。

在声明变量时,变量值也可以引用其他变量。当你通过粒度区分,为不同的值取不同名字时,这相

当有用。下例在独立的颜色值粒度上定义了一个变量,且在另一个更复杂的边框值粒度上也定义了

一个变量:

$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;

.selected

border: $highlight-border;

编译后:

.selected

border: 1px solid #F90;

这里, $highlight-border 变量的声明中使用了 $highlight-color 这个变量。产生的效 果就跟

你直接为 border 属性设置了一个 1px $highlight-color solid 的值是一样的。

以上是关于CSS工程化的主要内容,如果未能解决你的问题,请参考以下文章

React CSS工程化解决方案总结

将scss文件转换成css文件

趣图:后端工程师调试 CSS

杂谈 CSS IN JS

前端资深工程师是啥水平

html+css初级开发工程师