Nutmeg Plundering Muse

    @_nu/css-acss

    0.5.0 • Public • Published

    @_nu/css-acss

    npm package npm downloads github jsDelivr
    npm package npm downloads github jsdelivr

    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
        ├── _mixin.less      // less Mixin
        ├── _mixin.scss      // sass Mixin
        └── 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 命名规则

    Declarations This ACSS.io Tailwind CSS Blowdrycss Basscss Tachyons
    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;
    }

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

    Install

    npm i @_nu/css-acss

    DownloadsWeekly Downloads

    75

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    27.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • ziven27
    • nanasun