npm包cssing使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

CSSing是一个使用CSS类来快速创建基础UI设计的库，使用npm包管理器可以轻松在项目中集成使用。本文将详细介绍从开始基本的使用，到高级一些的发挥方法，适合前端入门和初学者深入学习。

安装

在使用cssing之前，需要安装npm包管理器。可以在https://www.npmjs.com/get-npm下载Node.js环境并按照步骤安装，安装完毕后运行以下命令安装cssing：

npm install cssing

基本使用方法

引入cssing库

在项目中引入cssing库，该库一般放在css文件夹内，或者在HTML文件内，在<head>标签内引入。
```
<head>
  <link rel="stylesheet" href="./css/cssing.min.css">
</head>
```
或者在webpack打包项目内，可以使用以下方式：
```
import "cssing/cssing.min.css";
```
添加class类名

在HTML标签内，添加对应的CSSing类名即可实现样式效果，如下：
```
<button class="btn btn-primary">Primary Button</button>
```
按钮元素上添加了"btn"和"btn-primary"两个CSSing类名，即可实现了一个有颜色的优先级按钮。

就像使用bootstrap库一样，将CSSing库中的class类名应用到HTML标签上，可以将UI设计变得快捷和清晰。
应用变量和样式覆盖

在cssing.min.css中，已经定义了一些变量和样式，可以通过直接覆盖变量的值，以达到自定义UI的目的。比如想要修改按钮的颜色，我们可以通过修改变量"btn-primary-color"的值。
```
:root {
  --btn-primary-color: #007bff;
}
```
变量的值可以在":root"伪类中进行更改，也可以在元素的标签上单独使用。

高级用法

栅格系统

CSSing提供了栅格系统来快速布局页面，一行被分为12列。可以使用以下类名来实现栅格布局：
- .row: 创建一行，包含多个列；
- .col-x: 列布局的类，占用x列，其中x的取值范围是1到12，如.col-6表示占用6列；
- .offset-x: 列布局的类，相当于列左侧空出x列；
以下是一个栅格系统的例子：
```
<div class="row">
  <div class="col-2">1</div>
  <div class="col-4">2</div>
  <div class="col-4 offset-2">3</div>
</div>
```
可以实现以下布局效果：
```
1 2 3-3-3--3--3
```
自定义变量

通过在":root"伪类内定义自定义变量，可以自定义UI控件的样式，如：
```
:root {
  --input-bg-color: #f8f9fa;
  --input-border-color: #ced4da;
  --input-border-radius: 3px;
}
```
创建了一个background-color，border-color和border-radius的变量，可以将这些变量应用到HTML标签上，实现自定义UI样式。

自定义UI控件

CSSing提供的UI控件并不全面，也不一定满足个性化的需求，自定义UI控件是实现更多特定需求的好方法。

比如要实现一个自定义的消息框，使用以下类名：

<div class="message">
  <h4 class="message-title">Title</h4>
  <p class="message-body">This is a custom message.</p>
</div>

然后在自定义CSS类中，定义message类的样式：

-- -------------------- ---- -------
-------- -
  --------- ---------

  ------- --- ----- ------------------- ---------
  -------------- -------------------- ---------
  -------- -------------- ------
  ---------- ---------------- ------
  -------------- -------------------- ------
  ----------------- --------------- ---------
-

-------------- -
  ----------- --
  -------------- ---------------------------------- --------
  ---------- ------------------------------ ----------
  ------------ -------------------------------- -----
-

------------- -
  ----------- --
  -------------- --
-

自由定义的变量可以根据自己的需求进行调整。

总结

CSSing是一个强大的CSS类库，它提供了许多方便的类名来创建UI设计，可以通过栅格系统来更快速地布局页面，并通过自定义变量和样式，可以实现自己想要的UI控件。对于前端入门和初学者帮助非常大，更能够加深对CSS编写的理解和掌握。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600668fcd9381d61a354104e