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

style-vars

v1.0.5

Published

设计一些常用的less变量和js样式变量

Downloads

2

Readme

css-variables

介绍

css-variables 能够帮助团队进行设计与开发。 它能让设计的语义更加容易理解,当更换设计师时,也能使设计的产出更加一致,对于前端来说还原度也能提升很多。

styleVars 总览

颜色

| 简介 | vars | 设计值 | 样式 | js变量 | className | less 变量 | | ---- | ---- | -----: | :--- | ------ | --------- | --------- | | 错误色 | color-error | #FF192D | custom badge | colorError | cv-bgc-error cv-c-error | @color-error | | 成功色 | color-success | #00BF7F | custom badge | colorSuccess | cv-bgc-success cv-c-success | @color-success | | 主要色 | color-primary | #222222 | custom badge | colorPrimary | cv-bgc-primary cv-c-primary | @color-primary | | 信息主色 | color-info-primary | #666666 | custom badge | colorInfoPrimary | cv-bgc-info-primary cv-c-info-primary | @color-info-primary | | 信息次色 | color-info-sub | #999999 | custom badge | colorInfoSub | cv-bgc-info-sub cv-c-info-sub | @color-info-sub | | 信息弱色 | color-info-weak | #cccccc | custom badge | colorInfoWeak | cv-bgc-info-weak cv-c-info-weak | @color-info-weak | | 填充主色 | color-fill-primary | #eeeeee | custom badge | colorFillPrimary | cv-bgc-fill-primary cv-c-fill-primary | @color-fill-primary | | 填充次色 | color-fill-sub | #F5F6FA | custom badge | colorFillSub | cv-bgc-fill-sub cv-c-fill-sub | @color-fill-sub |

弹窗宽度

| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号宽 | width-modal-sm | 416px | widthModalSm | cv-w-modal-sm | @width-modal-sm | | 基础宽 | width-modal-base | 560px | widthModalBase | cv-w-modal-base | @width-modal-base | | 大号宽 | width-modal-lg | 800px | widthModalLg | cv-w-modal-lg | @width-modal-lg |

单元格宽度

| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 微小宽 | width-cell-xs | 88px | widthCellXs | cv-w-cell-xs | @width-cell-xs | | 小号宽 | width-cell-sm | 144px | widthCellSm | cv-w-cell-sm | @width-cell-sm | | 中小宽 | width-cell-md | 200px | widthCellMd | cv-w-cell-md | @width-cell-md | | 中等宽 | width-cell-base | 256px | widthCellBase | cv-w-cell-base | @width-cell-base | | 大号宽 | width-cell-lg | 368px | widthCellLg | cv-w-cell-lg | @width-cell-lg |

侧边栏宽度

| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号宽 | width-sidebar-sm | 128px | widthSidebarSm | cv-w-sidebar-sm | @width-sidebar-sm |

间距宽度

| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号2xs | space-2xs | 4px | space2xs | cv-(m|mt|mr|mb|ml)-2xs cv-(p|pt|pr|pb|pl)-2xs | @space-2xs | | 小号xs | space-xs | 8px | spaceXs | cv-(m|mt|mr|mb|ml)-xs cv-(p|pt|pr|pb|pl)-xs | @space-xs | | 小号 | space-sm | 12px | spaceSm | cv-(m|mt|mr|mb|ml)-sm cv-(p|pt|pr|pb|pl)-sm | @space-sm | | 基础 | space-base | 16px | spaceBase | cv-(m|mt|mr|mb|ml)-base cv-(p|pt|pr|pb|pl)-base | @space-base | | 大号 | space-lg | 24px | spaceLg | cv-(m|mt|mr|mb|ml)-lg cv-(p|pt|pr|pb|pl)-lg | @space-lg |

字号大小

| 简介 | vars | 设计值 | js变量 | className | less 变量 | | ---- | ---- | -----: | ------ | --------- | --------- | | 小号 | font-size-sm | 12px | fontSizeSm | cv-fz-sm | @font-size-sm | | 基础 | font-size-base | 14px | fontSizeBase | cv-fz-base | @font-size-base | | 大号 | font-size-lg | 16px | fontSizeLg | cv-fz-lg | @font-size-lg | | 大号xl | font-size-xl | 20px | fontSizeXl | cv-fz-xl | @font-size-xl | | 大号2xl | font-size-2xl | 24px | fontSize2xl | cv-fz-2xl | @font-size-2xl |

简写速查表

| 简写 | 全拼 | | ------ | ---- | | c | color| | w | width| | m | margin| | mt | margin-top| | mr | margin-right| | mb | margin-bottom| | ml | margin-left| | p | padding| | pt | padding-top| | pr | padding-right| | pb | padding-bottom| | pl | padding-left| | bgc | background-color| | fz | font-size|

安装

使用 NPM 在项目中安装:

npm install style-vars

设计变量包提供了 3 种形式供项目使用:

JS 变量 CSS className Less 变量

使用 JS 变量

import styleVars from 'style-vars';

<Form.Item name="way" style={{ marginTop: styleVars.spaceSm }}>
    <Select
        placeholder="请选择"
        style={{ maxWidth: styleVars.widthModalSm }}
        options={[]}
    />
</Form.Item>

React中使用css className 变量

import 'style-vars/es/css/index.css';
<div className='cv-mt-sm'></div>

使用 Less 变量

import 'style-vars/es/less/index.less';
.yourClassName {
  font-size: @font-size-sm;
}

在 Vue 项目中使用

<template>
  <div class='cv-mt-sm'></div>
</template>

<style lang="less" scoped>
    import 'style-vars/es/less/index.less';
    .yourClassName {
        font-size: @font-size-sm;
    }
</style>

智能提示

1、对于 JS 变量,VSCode 可以智能提示变量名,无需安装插件。 2、对于 CSS className,需要安装 IntelliSense for CSS class names in HTML 插件 3、对于 Less 变量,需要安装 Less IntelliSense 插件。进入插件设置页,将 "LESS: Scanner Exclude" 配置项中的 "**/node_modules" 规则删除