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

时间 2019-11-07

标签前端自动化工厂 family 繁體版

原文原文链接

原文连接：https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89fcss

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

一. SASS/SCSS

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

二. SCSS-Bourbon Family

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

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

bourbon——函数库

♒ 经过npm install -g bourbon安装.github

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

SCSS代码为：npm

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

编译后的代码:sass

.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

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

三. CSS Evolution

随着前端构建工具的兴起，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里去，细思极恐。

上图只是形象地描述了CSS技术的进化方向，并不表明后出现的就必定更好。若是在你的项目组里经过命名规则约定就能够避免冲突，那真的不必为了炫技或者赶潮流就去把代码所有改为CSS Modules或者 Styled Components的方式。

工具是为了让工做变得更轻松，而不是变得更复杂。