介绍
butterscotch是一个基于sass的CSS框架，通过使用butterscotch，你可以快速构建一个完整的HTML页面。它提供了一系列的CSS类以及快捷的mixin，并且可以方便的自定义主题。
安装
使用 npm 安装 butterscotch：
npm install butterscotch
然后在你的项目中引入它：
@import "node_modules/butterscotch/sass/butterscotch";
你也可以在Github下载butterscotch并手动引入它。
使用
栅格系统(Grid System)
butterscotch提供了一个响应式的栅格系统，它允许你将页面分成若干列。使用步骤如下：
- 创建一个带有
row类的div来作为栅格系统容器。
<div class="row"> ... </div>
- 在容器内创建一个或多个带有
col-*-*类（* 表示数字，表示该列的宽度）的div，它们的宽度将自动根据容器宽度和所设置的比例计算。
<div class="row"> <div class="col-12-12">...</div> <div class="col-6-12">...</div> <div class="col-6-12">...</div> </div>
- 可选的，你可以使用
offset-*-*类将列左对齐。
<div class="row"> <div class="col-6-12 offset-3-12">...</div> </div>
- 同样的，你还可以使用
push-*-*和pull-*-*类来控制列的顺序。
<div class="row"> <div class="col-6-12 push-6-12">...</div> <div class="col-6-12 pull-6-12">...</div> </div>
在上面的例子中，第一个列通过 push-6-12类被移动了六个列的宽度，使得它在布局中出现在第二个列的后面。
CSS类
butterscotch提供了大量的CSS类来简化HTML的编写。下面罗列了一些最常用的类：
Reset
reset: 用于重置默认样式。
文本样式(Text)
text-left,text-center,text-right: 文本对齐样式。text-uppercase,text-lowercase,text-capitalize: 文本大小写样式。
边框(Border)
border,border-top,border-right,border-bottom,border-left: 边框样式。border-width-*: 边框宽度。border-style-*: 边框样式。border-color-*: 边框颜色。
布局(Layout)
container: 页面主容器。row: 栅格系统容器。col-*-*: 列样式。
栅格系统(Grid System)
col-*-*: 列样式。offset-*-*: 列左对齐偏移量。push-*-*: 列位置前移。pull-*-*: 列位置后移。
其他
clearfix: 解决浮动元素高度塌陷问题。scrollbar-*: 自定义滚动条样式。
mixin
butterscotch提供了大量的mixin来进一步简化开发流程。下面列举一些主要的mixin：
边框(Border)
border-radius($radius): 边框圆角。box-shadow($shadow...): 创建阴影效果。text-shadow($shadow...): 创建文本阴影效果。
布局(Layout)
container-fixed(): 创建固定宽度的页面主容器。container-fluid(): 创建宽度自适应的页面主容器。row-base(): 定义栅格系统容器。col-size($col-count, $col-total, $padding-hor): 定义列的样式。
样式(Styles)
linear-gradient($start-color, $end-color): 创建线性渐变。radial-gradient($start-color, $end-color): 创建径向渐变。
使用mixin：
-- -------------------- ---- ------- ---- - -------- ------------------- -------- ------------ - --- --- ------- -- -- ------ ----------- ------ ------ ------ -------- ----- - --------- - -------- --------------------- ------ -
上面的例子中，定义了一个圆角带有阴影的按钮，并且用线性渐变为导航链接添加了背景色。
示例代码
HTML:
-- -------------------- ---- -------
---- ------------------
--------
---- ------------
---- ------------------
--------------------------------
------
------
---------
-----
--- ------------
--- ------------------- ---------------- ----------------------
--- ------------------- ---------------- --------------------------
--- ------------------- ---------------- -------------- -----------
--- ------------------- ---------------- ---------------- -----------
-----
------
---- ------------
---- -----------------
----------- -- ------------------
----------
------
---- -----------------
---------- ---------
----
------------
------------
-----
------
------
------- ------------
---- ------------------
--------------- ------ --------
------
---------
------SASS:
-- -------------------- ---- ------- -- ---- -- ------- --------------------------------------- -- -------------- -- ------- --------------------------------------------- -- ----- -- ---- - ----------- ----- - ------ -- - ---------- ---- ------- -- ----------- ------- - --- - -------------- ----- - -------- - ------ ----- -------- ------ -------- ----- ----------- ------- ----------- ---------------- ----- - -------------- - ----------------- ----- - ------ - ----------------- ----- ----------- ----- -------- ----- ----------- ------- -
结论
butterscotch是一个功能强大的CSS框架，它提供了一系列的CSS类和mixin，可以非常有效地加快前端开发速度。在开发中，我们可以根据实际需要灵活使用这些类和mixin，并根据需要进行个性化定制，帮助我们快速构建出高质量的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005603e81e8991b448de6c6