大前端的自动化工厂(2)—— SB Family

原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f

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

一. 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文件中,可以放心使用。

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

bourbon——函数库

♒ 通过npm install -g bourbon安装.

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

SCSS代码为:

代码语言:javascript
复制
@import "bourbon";
.triangle-down {
    &::after{
     content:'';   
     @include triangle("down", 2rem, 1rem, #b25c9c);
    }
}

编译后的代码:

代码语言:javascript
复制
.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列。

代码语言:javascript
复制
@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)带来了新的开发方式,SASSBEM的年代,还只能通过限制命名规则的方式来避免CSS冲突和相互覆盖。

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

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

上图只是形象地描述了CSS技术的进化方向,并不代表后出现的就一定更好。如果在你的项目组里通过命名规则约定就可以避免冲突,那真的没必要为了炫技或者赶潮流就去把代码全部改成CSS Modules或者 Styled Components的方式。

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