CSS engineering
INTRODUCTION :
You write CSS -time code, whether encountered such a problem:
Code is not hierarchical structure, difficult to see in a nesting relationship
.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;
}
Such code in CSS is very common in, originally from the outside in order to set CSS styles, but at the time of writing, we have every
Are selected from the outermost start, not only cumbersome, but also repeated writing these selectors are also prone to error, but also increased the difficulty reading
degree.
Duplicate Style
.site-footer {
background: # 2E2E2E; / * repeatedly used the color * /
color: # c1c1c1; / * repeatedly used the color * /
padding: 50px 0;
}
.site-header {
background: # 2E2E2E; / * repeatedly used the color * /
color: # c1c1c1; / * repeatedly used the color * /
position: fixed;
left: 0;
top: 0;
}
Usually only a few color pages, these colors will be used everywhere, or some styles (such as the flexible pouch, fixed location, etc.)
Also used everywhere, so that we had to go around writing these duplicate code. Once the day's Web site revision, the color
Is changed, the code changes is very large.
In CSS these problems, if placed in the back-end development area, is unimaginable. The reason for not prone to back-end development
Such a problem, because the rear end of the variety of technical means to solve the problem (functions, classes, modules, etc.). Now, the front end of fast
Rate rise, it also brings a solution to these problems.
This article discusses the " CSS engineering" is to use back-end development of thinking to solve problems encountered in the front.
CSS appear compiler CSS through multiple versions of the change from CSS1 to CSS3 , which lasted for many years. Although the new out of a lot of property and norms, but
On the characteristics of the language itself, it does not change the nature of. Although @import command can solve some of modular
Problems, but not enough. But W3C official seemed to turn a blind eye to these problems is not resolved, then, as before
End technology (especially JS ) rapid development, many third-party institutions began to try to enter CSS this ancient area open
Begin to address these problems left over for too long.
And their idea is to solve as JS problem as with the compiler to solve CSS problems
What is the CSS compiler
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 的值是一样的。