原文链接: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代码为:
@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官方网址
<http://neat.bourbon.io/>查看文档。

使用示例:

下面简单的几行代码编译为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 <http://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的方式。

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

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信