npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@_y/acss-sass

v0.0.2

Published

atomic css sass version

Downloads

9

Readme

acss-sass

Atomic css sass 版本。

Atomic 是一种极简,高效的 CSS 代码库。 是目前唯一可以做到随着项目推进 CSS 代码越来越少的代码库。 类似张老师的 quicklayout.css

如何使用?

npm i @_y/acss-sass
@import "@_y/acss-sass";

/* 定义内间距列表 */
@include acss-p((2px, 4px, 8px, 16px));

/* 定义外间距列表 */
@include acss-m((2px, 4px, 8px, 16px));

/* 定义字号列表 */
@include acss-fs((2px, 4px, 8px, 16px));

/* 定义字行高列表 */
@include acss-lh((2px, 4px, 8px, 16px));
<div class="pr h300">
    <div class="pa l50p t50p">
        <h3 class="fs16 mb16">标题</h3>
        <p class="fs12">正文</p>
    <div>
</div>

命名规则

  • 只取首字母 .db{ display:block; };
  • 有数字直接连接 .mb10{ margin-bottom:10px; };
  • 百分号用p(percent)表示 .w100p{ width:100%; };
  • 小数点用d(dot)表示 .lh1d2{ line-height:1.2};
  • 想要自定义,用_分割单词,pa_auto;

CSS API

CSS API 主要分为 结构,样式,和自定义三个部分。

具体细则可以看源代码注释。

lib/acss.scss

CSS API 结构

结构主要包括 displaypositionfloatflex 和其它。

可以看到这里并不包含间距部分。因为不同的项目对于 marginpadding 的规则不一样,所以需要按照自己的项目按照

有数字直接连接 .mb10{ margin-bottom:10px; };

这个规则自行拓展。如果觉得构建比较麻烦,建议采用 acss-less 和 acss-sass 内置的 mixin 进行生成。比如在 sass 中可以这样使用。

@include acss-p((2, 4, 8, 12, 16, 20, 24, 32));

会生成以上数字对应的4个方向代码。

CSS API 样式

样式主要包括 字体颜色。 在代码注释中可以看到 acss.min.css 只包含了黑白两个颜色。 如果想要自定义按照以下规则推展。

.c_xl{ color: #111; }       /* 文字比深更深 */
.c_l { color: #222; }       /* 文字加深 */
.c_m { color: #333; }       /* 文字主色 */
.c_s { color: #666; }       /* 文字减比弱更弱 */
.c_primary { color: blue; }    /* 主色 */
.c_secondary { color: blue; }  /* 次级颜色 */
.c_success { color: green; }   /* 成功 */
.c_danger { color: red; }      /* 失败 */
.c_warning { color: yellow; }  /* 警告  */

CSS API 自定义样式

|类名|作用| |:--|:--| | .auto | 带宽度的 block 元素水平居中对齐 | | .clearfix | 清除浮动 | | .ell | 单行文字超出容器显示点点点 | | .ell2row | 两行文字超出容器显示点点点, 需要结合行高使用 | | .i | icon 图标基础方法 | | .trans | transition 动画 | | .pa_middle | 基于 position:absolute 上下居中 (兼容性) | | .pa_center | 基于 position:absolute 左右居中 (兼容性) | | .pa_auto | 基于 position:absolute 上下左右居中 (兼容性) |

Sass API

|mixin|作用| 用法 | |:--|:--| :--| | acss-p | 定义内间距列表 | @include acss-p((2px, 4px, 8px, 16px)); | | acss-m | 定义外间距列表 | @include acss-m((2px, 4px, 8px, 16px)); | | acss-fs | 定义字号列表 | @include acss-fs((2px, 4px, 8px, 16px)); | | acss-lh | 定义行高间距 | @include acss-lh((2px, 4px, 8px, 16px)); |

DEMO

相关阅读

  1. 「CSS思维」组件化VS原子化
  2. 如何管理 CSS “内裤”
  3. quickLayout.css-快速构建结构兼容的web页面 @张老师;
  4. 「英」在组件化浪潮中重新思考CSS @johnpolacek 虽然是英文,但是网页做得像PPT一样,通俗易懂,强推;
  5. ACSS 官网 @雅虎 这个思维最早应该是雅虎推出来的,最近他们有在推 React ACSS
  6. 关于HTML语义和前端架构 @大漠;
  7. 「译」CSS通用类和“关注点分离” @adamwathan;
  8. 「英」Styling React @SURVIVEJS;
  9. 「英」CSS最佳实践探讨 - Atomic CSS @smashingmagazine;