什么是 common-style
common-style 是一个前端常用样式的 npm 包，提供了一些常用的 CSS 样式和 mixin，使用该包可以快速搭建符合规范的前端页面。
如何安装
在项目目录下，执行以下命令即可安装 common-style：
npm install common-style --save
如何使用
安装完成后，在需要使用的 HTML 页面中引入样式文件：
<link rel="stylesheet" href="./node_modules/common-style/dist/css/common.min.css">
样式列表
common-style 提供了如下常用样式：
布局类
- container：固定宽度居中容器
- row：流式布局行
- col-：流式布局列， 代表列所占百分比
文字类
- text-center：文字居中
- text-left：文字左对齐
- text-right：文字右对齐
- text-ellipsis：省略号显示超出部分
边框类
- border：边框
- border-top：上边框
- border-right：右边框
- border-bottom：下边框
- border-left：左边框
颜色类
- primary-color：主色调
- success-color：成功色调
- warning-color：警告色调
- danger-color：危险色调
Mixin
common-style 还提供了一些 mixin，可以用于定义自己的样式：
响应式布局
@include mq($breakpoint) {
// 样式代码
}其中，$breakpoint 为响应式断点，可选值包括：xs、sm、md、lg、xl。
清除浮动
@include clearfix;
示例代码
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------------- ------------
----- ---------------- -----------------------------------------------------------
-------
---- -
-------- ------ -
------ ----
------ -----
-
-
--------
-------
------
---- ------------------
---- ------------
---- ---------- ----------
-- ------------------ -------------------------
------
---- ---------- ----------
-- ------------------ --------------------------
------
------
------
-------
-------总结
通过本文的介绍，我们了解了 common-style 的基本使用方法和提供的常用样式和 mixin。在实际项目中，我们可以使用该包快速搭建符合规范的前端页面，并且可以根据自己的需求自定义样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/49480