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编译器有：SASS和LESS。本文已最常用的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是一个预编译工具集，它内置了SASS、LESS等多种前端的预编译器，并且提供图形化的操
作界面，无论对于新手和老手，都是非常不错的选择。
还等什么，赶紧去官网下载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; 这意味着变量$highlightcolor
现在的值是#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工程化的更多相关文章
- CSS 工程化 小结
CSS 工程化 组成:1.组织 (代码目录)2.优化(那种实现方式更好) 3.构建(代码完成后需要经过哪些处理步骤) 4.维护 常见问题 1.如何解决 CSS 模块化问题 1.Less Sass 等C ...
- 【前端知识体系-CSS相关】CSS工程化方案
1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + ...
- css进阶 00-准备
前言 css 进阶的主要内容如下. #1.css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性(非布局样式) #2.css 布局相关 css 布局属性和组合解析 常见布局方 ...
- 全面系统讲解CSS工作应用+面试一步搞定
[TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...
- css常见知识点总结
CSS 中可继承与不可继承属性有哪些 可继承: 字体系列 font-family font-weight font-size 文本系列 color text-align line-height 可见系 ...
- Vuejs - 工欲善其事必先利其器
既然是实战,怎离不开项目开发的环境呢?先给大家推荐下我的个人开发环境: 硬件设备:Mac OSX编译器:Visual Studio Code命令行工具:iTerm2调试工具:Chrome Dev to ...
- React躬行记（8）——样式
由于React推崇组件模式,因此会要求HTML.CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离.React已将HTML用JSX封装,而对CSS只进 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 前端CSS的工程化——掌握Sass这四大特性就够了
初遇 CSS,一见倾心 记得刚遇见css的时候,咱像是见了美人儿一样,简直是爱不释手啊,简简单单写几行算不上代码的代码,就能做出这么漂亮的东西,这也成了咱前端之路的最初动力. 然而,随着项目体量和页面 ...
随机推荐
- subId、slotId、SubscriptionInfo和SubscriptionManager的解释及关系说明
1. subid和slotid(phoneid) slotid(phoneid)是指卡槽:双卡机器的卡槽1值为0,卡槽2值为1,依次类推. subid:SubscriptionId(Subscript ...
- Git仓库操作命令
创建仓库 git init 在当前目录执行,会生成.git目录文件,这个和SVN一致. 提交到仓库 git commit -m "first commit" -m:表示提交描述,必 ...
- Python服务端工程师就业面试指导✍✍✍
Python服务端工程师就业面试指导 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时 ...
- python 数据结构之冒泡排序
def bubble_sort(alist): # 外层循环冒泡排序进行的次数(len-1) for i in range(len(alist) - 1, 0, -1): # 内层循环控制冒泡的比较: ...
- java oop第06章_异常处理
一. 异常的概念: 若程序都按我们事先设定的计划运行为正常执行,但通常会出现我们事先预料之外的其他情况,称为程序发生异常, 在java中会对一些可能出现异常的代码进行分类,达到尽量对可能发生的异常进行 ...
- python 通过zabbix api获得所有主机的ip
#!/usr/bin/env python3 #coding=utf-8 import jsonimport requests#from urllib import requests, parse,e ...
- python、Jupyter运行时间
1.Python time time()方法 import time time_start=time.time() time_end=time.time() print('totally cost', ...
- UVALive7461 - Separating Pebbles 判断两个凸包相交
//UVALive7461 - Separating Pebbles 判断两个凸包相交 #include <bits/stdc++.h> using namespace std; #def ...
- Jinja2模板引擎
这里是Jinja2通用模板语言的文档. Jinja2 在其是一个 Python 2.4 库之前,被设计 为是灵活.快速和安全的.如果你接触过其它的基于文本的模板语言,比如 Smarty 或 Djang ...
- memcpy函数实现中的优化
今天浏览Google面试题的时候,有看到一个memcpy的实现,以及如何去优化memcpy. 我对memcpy的实现的记忆就是,拷贝的时候需要从后往前拷贝,为何防止内存重叠. 但是如果去优化它我没有想 ...