@_nu/css-acss 中文文档教程

发布于 4年前 浏览 22 项目主页 更新于 3年前

@_nu/css-acss

npm packagenpm downloadsgithubjsDelivr
npm packagenpm downloadsgithubjsdelivr

ACSS/ utility-first CSS / Functional CSS 的轻量级解决方案。

灵感来自于 ACSS, tailwindcss, quickLayout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="../lib/index.css" />
    <link rel="stylesheet" href="./scss.css" />
  </head>
  <body>
    <section class="pt16 pr16 pb16 pl16 fs12 bc_fff mt16 mr16 ml16 mb16">
      <h2 class="fw700 m0 mb16 fs16">CSS-ACSS</h2>
      <p class="m0 mb8">
        [ACSS](http://acss.io/)/ utility-first CSS / Functional CSS
        的轻量级解决方案。
      </p>
      <p class="m0 mb8">
        <strong class="fw700">灵感来自于</strong>
        <a href="http://acss.io/" class="c_000">acss.io</a>
        <a href="https://tailwindcss.com/" class="c_000">tailwindcss</a>
        <a href="https://github.com/zhangxinxu/quickLayout" class="c:000"
          >quickLayout</a
        >
      </p>
    </section>
  </body>
</html>

目录结构

.
└── lib
 &nbsp;&nbsp; ├── _mixin.less      // less Mixin
 &nbsp;&nbsp; ├── _mixin.scss      // sass Mixin
 &nbsp;&nbsp; └── index.css        // 核心 css 代码, 直接引用即可

如何使用

$ npm i @_nu/css-acss;

React 引用

@import "@_nu/css-acss";

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@_nu/css-acss">

ACSS 命名规则

DeclarationsThisACSS.ioTailwind CSSBlowdrycssBasscssTachyons
margin: 12px;.m12.M(12px).m-4.margin-12.m2.ma3
text-align: center.tac.Ta(c).text-center.text-align-center.center.tc
margin: -12px.m-12.M(-12px).-m-4.margin-n12.mxn2.na3
font-size: 25px.fs25.Fz(25px).text-2xl.font-size-25.h2.f3
width: 50%.w50%.W(50%).w-1/2.width-50p.col-6.w-50
line-height: 1.5.lh1.5.Lh(1.5).leading-normal.line-height-1_5.line-height-4.lh-copy
  1. 只取首字母 .db{ display:block; };
  2. 有数字直接连接 .mb10{ margin-bottom:10px; };
  3. 百分号用 % 表示 .w100\%{ width:100%; };
  4. 小数点用 . 表示 .lh1\.2{ line-height:1.2 };
  5. 有想要自定义的样式,用 \:分割 .c\:fff{ color:#fff; }
  6. hover 样式,用 \:分割 .db\:h:hover{ display:block; }

第六个只是一个推荐的写法(beta),目前代码库中并没有这个代码

Mixin

名称作用
Clearfix清除浮动
Ellipsis单行文本省略
Ellipsis-multiple多行文本点点点(移动端)
Margins用表格的方式撑满浮动之后的剩余空间
Paddings用表格的方式撑满浮动之后的剩余空间
ACSS用表格的方式撑满浮动之后的剩余空间

因为不同的项目,设计规范是不一样的。所以在 lib/index.css 里面只提供了,.m0{ margin:0; } .p0{ padding:0; } 这两个通用的间距样式。

其它需要自己使用 mixin 方法 创建 Margins, Paddings, ACSS

// scss
@import "@_nu/css-acss/lib/_mixin.scss";

@include Margins((8,16), 1px);                // .mt8, .mr8, .mb8, .ml8, .mt16, .mr16, .mb16, .ml16;
@include Paddings((8,16), 1px);               // .pt8, .pr8, .pb8, .pl8, .pt16, .pr16, .pb16, .pl16;
@include ACSS(font-size, fs, (12,16), 1px);   // .fs12, .fs16
@include ACSS(line-height, lh, (8,16), 1px);  // .lh16, .lh24
@include ACSS(font-weight, fw, (300,500));    // .fw300, .fw500

.clearfix{ @include Clearfix; }
.ell{ @include Ellipsis; }
.ells { @include Ellipsis-multiple; }
.cell{ @include Cell; }
// less
@import '@_nu/css-acss/lib/_mixin.less';

#Margins(8, 16; 1px); // .mt8, .mr8, .mb8, .ml8, .mt16, .mr16, .mb16, .ml16;
#Paddings(8, 16; 1px); // .pt8, .pr8, .pb8, .pl8, .pt16, .pr16, .pb16, .pl16;
#ACSS(font-size; fs; 12, 16; 1px); // .fs12, .fs16;
#ACSS(line-height; lh; 16, 20; 1px); // .lh16, .lh20;
#ACSS(font-weight; fw; 300, 500); // .fw400, fw700;

.clearfix {
  #Clearfix;
}
.ell {
  #Ellipsis;
}
.ells {
  #Ellipsis-multiple;
}
.cell {
  #Cell;
}
<style>
    .ells._2{ -webkit-line-clamp: 2; }
    .ells._2.lh16{ max-height: 32px; }
</style>

<section class="fs12 bc_fff pt16 pr16 pb16 pl16 mt16 mr16 ml16 mb16">
  <p class="ell">几乎每天我都会光临这样一家咖啡店,当我点了一杯咖啡,他们通常会在咖啡上做一些艺术工作。某一天可能是一个有想象力的树叶,接下来的一天可能是旋涡状的天鹅。这些泡沫上的图案并不会让咖啡更好喝,但是却会让我会心一笑。</p>
  <p class="ells _2 lh20">几乎每天我都会光临这样一家咖啡店,当我点了一杯咖啡,他们通常会在咖啡上做一些艺术工作。某一天可能是一个有想象力的树叶,接下来的一天可能是旋涡状的天鹅。这些泡沫上的图案并不会让咖啡更好喝,但是却会让我会心一笑。</p>
  <div class="clearfix">
    <div class="fl mr8">你好</div>
    <p class="cell">几乎每天我都会光临这样一家咖啡店,当我点了一杯咖啡,他们通常会在咖啡上做一些艺术工作。某一天可能是一个有想象力的树叶,接下来的一天可能是旋涡状的天鹅。这些泡沫上的图案并不会让咖啡更好喝,但是却会让我会心一笑。</p>
  </div>
</section>

其它约定

/*!
 * 管理颜色 .c\:{*}
 */
.c\:xl {
  color: #111;
}
.c\:l {
  color: #333;
}
.c\:m {
  color: #666;
}
.c\:s {
  color: #999;
}
.c\:xs {
  color: #ddd;
}
.c\:primary {
  color: blue;
}
.c\:secondary {
  color: gray;
}
.c\:danger {
  color: red;
}
.c\:warning {
  color: yellow;
}
.c\:success {
  color: green;
}
.c\:info {
  color: cadetblue;
}
.c\:light {
  color: #f8f9fa;
}
.c\:dark {
  color: #343a40;
}

以上内容只是约定,并未内置在代码中, 你可以定义其中任意颜色值

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文