前言
在前端开发中，使用CSS框架能够快速且方便地搭建页面，使整个项目更加规范化，但是一旦你对某个框架的定制需求比较严格的时候，可能就需要花费很长时间来钻研它的源码。 而basscss-basic是一个基于basecss的npm包，它提供了一系列简单、直观、灵活的基础CSS类，可以方便地针对自己的需求进行二次开发和调整。
安装
npm安装：
npm install basscss-basic
yarn add basscss-basic
快速使用
在HTML中引入CSS：
<link rel="stylesheet" href="./node_modules/basscss-basic/css/basscss.min.css">
或者在JS中引入CSS：
import 'basscss-basic/css/basscss.min.css';
详解
basscss-basic提供了8个最基础、最常用的CSS类：pad, mar, font-size, font-weight, color, bg-color, border, rounded。 下面分别主要介绍这八种类以及它们的用法：
pad
为元素添加内边距，提供了4个类名：pad0, pad1, pad2, pad3
<div class="pad1">这是一个内容为padding 10px的div</div>
mar
为元素添加外边距，提供了4个类名：mar0, mar1, mar2, mar3
<div class="mar1">这是一个margin 10px的div</div>
font-size
为文本设置字号，提供了6个类名：fs0, fs1, fs2, fs3, fs4, fs5
<p class="fs5">这是一个font-size为28px的段落</p>
font-weight
为文本设置字体粗细，提供了3个类名：fw1, fw2, fw3
<p class="fw3">这是一个font-weight为bold的段落</p>
color
为文本设置颜色，提供了9个类名：black, gray, silver, white, aqua, blue, navy, green, olive
<p class="green">这是一个color为green的段落</p>
bg-color
为元素设置背景色，提供了9个类名：bg-black, bg-gray, bg-silver, bg-white, bg-aqua, bg-blue, bg-navy, bg-green, bg-olive
<div class="bg-blue">这是背景色为blue的div</div>
border
为元素设置边框，提供了3个类名：bt, bb, ba 每个类名都有3个变体：1px, 2px, 3px
<div class="ba2">这是一个thickness为2px的全边框div</div>
rounded
为元素设置圆角，提供了4个类名：radius0, radius1, radius2, circle 每个类名都有3个变体：1px, 2px, 3px
<div class="circle2">这是一个radius为50%的圆形div</div>
示例代码
<div class="pad3 mar3 bg-silver ba2 fw3"> <p class="fs4 green">最基础、最常用的 CSS 类<br>提供了灵活的 Class 即插即用 创建效果 </p> <p class="black">学习并应用多种 CSS 类，使自己的代码变得更加清爽，易维护。</p> </div>
总结
通过简单的介绍我们可以知道，basscss-basic是个使用便捷、功能强大的CSS框架，提供了极多的class以及灵活的设置方式。 它意在轻量化，却又高定制化，适用于不同的页面场景，在编写现代Web应用程序时可以节省大量时间和开发成本。
当然，basscss-basic不仅仅局限于上述介绍的类，它还提供了丰富的应用场景，如还需要更多了解请访问官网。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6c6bcba9b7065299ccb951
