简介
CSSing是一个使用CSS类来快速创建基础UI设计的库，使用npm包管理器可以轻松在项目中集成使用。本文将详细介绍从开始基本的使用，到高级一些的发挥方法，适合前端入门和初学者深入学习。
安装
在使用cssing之前，需要安装npm包管理器。可以在https://www.npmjs.com/get-npm下载Node.js环境并按照步骤安装，安装完毕后运行以下命令安装cssing：
npm install cssing
基本使用方法
引入cssing库
在项目中引入cssing库，该库一般放在css文件夹内，或者在HTML文件内，在标签内引入。
------ ----- ---------------- ---------------------------- -------
或者在webpack打包项目内，可以使用以下方式：
------ ------------------------
添加class类名
在HTML标签内，添加对应的CSSing类名即可实现样式效果，如下：
------- ---------- -------------------- ---------------
按钮元素上添加了"btn"和"btn-primary"两个CSSing类名，即可实现了一个有颜色的优先级按钮。
就像使用bootstrap库一样，将CSSing库中的class类名应用到HTML标签上，可以将UI设计变得快捷和清晰。
应用变量和样式覆盖
在cssing.min.css中，已经定义了一些变量和样式，可以通过直接覆盖变量的值，以达到自定义UI的目的。比如想要修改按钮的颜色，我们可以通过修改变量"btn-primary-color"的值。
----- - -------------------- -------- -
变量的值可以在":root"伪类中进行更改，也可以在元素的标签上单独使用。
高级用法
栅格系统
CSSing提供了栅格系统来快速布局页面，一行被分为12列。可以使用以下类名来实现栅格布局：
.row: 创建一行，包含多个列；.col-x: 列布局的类，占用x列，其中x的取值范围是1到12，如.col-6表示占用6列；.offset-x: 列布局的类，相当于列左侧空出x列；
以下是一个栅格系统的例子：
---- ------------ ---- --------------------- ---- --------------------- ---- ------------ ----------------- ------
可以实现以下布局效果：
- - -----------
自定义变量
通过在":root"伪类内定义自定义变量，可以自定义UI控件的样式，如：
----- - ----------------- -------- --------------------- -------- ---------------------- ---- -
创建了一个background-color，border-color和border-radius的变量，可以将这些变量应用到HTML标签上，实现自定义UI样式。
自定义UI控件
CSSing提供的UI控件并不全面，也不一定满足个性化的需求，自定义UI控件是实现更多特定需求的好方法。
比如要实现一个自定义的消息框，使用以下类名：
---- ---------------- --- -------------------------------- -- ------------------------- -- - ------ ------------ ------
然后在自定义CSS类中，定义message类的样式：
-------- - --------- --------- ------- --- ----- ------------------- --------- -------------- -------------------- --------- -------- -------------- ------ ---------- ---------------- ------ -------------- -------------------- ------ ----------------- --------------- --------- - -------------- - ----------- -- -------------- ---------------------------------- -------- ---------- ------------------------------ ---------- ------------ -------------------------------- ----- - ------------- - ----------- -- -------------- -- -
自由定义的变量可以根据自己的需求进行调整。
总结
CSSing是一个强大的CSS类库，它提供了许多方便的类名来创建UI设计，可以通过栅格系统来更快速地布局页面，并通过自定义变量和样式，可以实现自己想要的UI控件。对于前端入门和初学者帮助非常大，更能够加深对CSS编写的理解和掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668fcd9381d61a354104e