大前端的自动化工厂（2）—— SB Family

原创

华为云开发者联盟 2021-05-25 09:38:14 ©著作权

©著作权归作者所有：来自51CTO博客作者华为云开发者联盟的原创作品，请联系作者获取转载授权，否则将追究法律责任

【摘要】 SASS，也称为SCSS，是CSS预编译语言的一种，常见的预编译语言还包括LESS,Stylus，除了语法风格之外它们之间没有什么太大的区别，从一种语言迁移到另一种语言只需要花半天通读一下文档就可以了。

我坦白我是标题党，SB只是SCSS-Bourbon的简写。

一. SASS/SCSS

SASS，也称为SCSS，是CSS预编译语言的一种，常见的预编译语言还包括LESS,Stylus，除了语法风格之外它们之间没有什么太大的区别，从一种语言迁移到另一种语言只需要花半天通读一下文档就可以了。预编译语言为CSS提供了变量定义,函数定义,层级嵌套等等一系列扩展功能，使开发者更容易编写和管理项目中的CSS代码。笔者使用的是SCSS/SASS，因为相关工具库更全面一些，尽管名称偶尔会带来一些瑕疵（建议使用SCSS）。LESS在和Sublime集成时有一些小问题，可能是版本问题，stylus是新兴起的，开发生态并不完善。

二. SCSS-Bourbon Family

大前端的自动化工厂（2）—— SB Family_大前端

由于SCSS最初使用Ruby on Rails编写的，所以github上提供的安装方式几乎都是通过gem install安装的，但实际上在npm仓库里也可以找到对应的项目。另一方面，SCSS辅助工具库中的工具都是以_开头的，也就是说定义mixin的代码并不会被编译到产出的CSS文件中，可以放心使用。

【Bourbon】是笔者非常喜欢的工具包，首先它很符合渐进式开发的思想，每个插件只实现一个特定的功能，同时，它的所有插件都是自己开发的（ThoughtBot在收购后维护着整个Bourbon工具链），这又保证了工具的质量。

bourbon——函数库

♒ 通过npm install -g bourbon安装.

bourbon已经更新至5.1.0版本，官方文档对许多mixin并没有提供说明，建议使用前通读一下library目录里每一个独立的文件，其中的注释部分标明了该函数的用法。例如实用triangle( )函数来生成一个类，使其伪类包含一个指定尺寸和方向的三角形,又或者是使用tint( )或shade( )方法让颜色按照半分比变亮或变暗，当然你也可以自行去扩展bourbon的基础功能。

SCSS代码为：

@import "bourbon";
.triangle-down {
    &::after{
     content:'';   
     @include triangle("down", 2rem, 1rem, #b25c9c);
    }
}

编译后的代码:

.triangle-down::after {  content: '';  border-style: solid;  height: 0;  width: 0;  border-color: #b25c9c transparent transparent;  border-width: 1rem 1rem 0;
}

纯CSS是可以诸如六边形等很多形状的，你完全可以在网上学习它们的实现方法，然后将其编写为扩展的mixin加入到自己的常用工具箱中。

Bitters——脚手架

♒ 通过npm install -g bourbon-bitters安装

Bitters是Bourbon工具家族里的脚手架，它将你的基础样式分拆为_bass , _buttons , _forms , _layout , _lists , _media , _tables , _typography , _variables 等几个不同的文件并提供一些初始样式，开发中可以将与基础模块相关的样式扩展写在这些文件中，这样的做法可以在一定程度上降低项目的维护难度。

当然你也可以直接引入normolize.css来对项目进行样式的重置。

Neat——网格工具

♒ 通过npm install -g bourbon-neat安装.

我们使用的第三方UI框架中，几乎都使用经典的12列布局，但总有些产品经理会提出希望将某一列的宽度扩展到1.5倍这种需求，或者有些场景下你希望对整个网页的布局进行更精细的控制，这个时候轻量级的网格工具Neat就派上用场了，轻量，强大，易用，轻松实现网格划分,网格嵌套,响应式布局等复杂的功能。具体的使用文档可以访问其官方网站Neat官方网址查看文档。

使用示例：

下面简单的几行代码编译为CSS后，就可以实现将页面分为间距为20px的10列，左侧边栏占2列，右侧内容区占8列；然后又将右侧内容区分为间距为10px的6列，每个表格项占1列。

@import "neat";
/*定义网格*/
$sidebar-layout:(
    columns: 10,
    gutter: 20px
);

$list-layout: (
    columns: 6,
    gutter: 10px
);
/*使用网格*/
.sidebar-layout{
    @include grid-container;
}
.sidebar-layout__sidebar{
    @include grid-column(2,$sidebar-layout);
}

.sidebar-layout__content{
    @include grid-column(8,$sidebar-layout);
}

.list-layout{
    @include grid-container;
    @include grid-collapse($list-layout);
}

.list-item{
    @include grid-column(1, $list-layout);
}

Coolor——自动化配色工具

♒ 访问http://coolor.co

大前端的自动化工厂（2）—— SB Family_前端开发_02

Coolor.co其实并不是Bourbon家族的成员，但你应该会喜欢它，这是一个免费的网站（移动端是收费的），在你指定一个主题色后，它会为你返回一组漂亮的包含5个颜色的配色方案，如果不满意直接一键切换就可以了，从此冒充设计师看谁还敢拦着你~

三. CSS Evolution

大前端的自动化工厂（2）—— SB Family_前端开发_03

随着前端构建工具的兴起，CSS的开发也进入了一个全新的阶段，自动化构建工具(例如webpack)带来了新的开发方式，SASS和BEM的年代，还只能通过限制命名规则的方式来避免CSS冲突和相互覆盖。

CSS Modules借助构建工具实现了真正的模块化，webpack4中在css-loader配置项中就可以直接启用CSS模块化功能，使用起来非常方便。其原理就是通过构建工具将文件中的类名直接替换为Hash来实现。

Styled Components，实际上就是炒的火热的CSS-In-Js的一种实现。新事物总是褒贬不一的，有人说它是大势所趋，也有人说它很难用，笔者的建议是：继续观望。Styled Components概念的兴起很有可能是React团队的炒作行为，JSX已经将HTML和JS代码放在一起编写，使用起来感觉还不错，如果又加上CSS-In-JS , 那么相当于使用JSX同时编写HTML+CSS+JS，你说这种鼓吹没有私心谁信？以前使用<script>和<style>标签把代码都写在<html>中，你们叫嚣着"结构，样式，行为三者分离"，现在大伙把代码分离了，你们又忽悠着大家把结构样式行为混在一起写到JSX里去，细思极恐。