# ycss

**Repository Path**: jiuker/ycss

## Basic Information

- **Project Name**: ycss
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简介
    这是一个自动替换css的工具，当你写一句class，然后保存的时候，程序会自动执行替换规则
    原理和正则里面的replace(/c-(\d{1,2})/,(a)=>{xxx})一致
    如下图：
        当你有一个 class="c-ffffff bb-1-eee"
        程序会自动生成:
            .c-ffffff{color:#ffffff}
            .bb-1-eee{border-bottom:1px solid #eee}
    并且插入指定位置
![Image text](https://gitee.com/jiuker/ycss/blob/master/res/vue.gif)

![Image text](https://gitee.com/jiuker/ycss/blob/master/res/react-native.gif)
# 开始
* 解压 ycss-xxxxx.tar.bz2
* 直接运行里面的 二进制文件，如 ./ycss
# 配置
## 特点
* 动态生效，也就是配置是动态
## 位置
* ./res/config/confg.json
## 配置字段
    {
         "debug": true, // true|false
         "type": "rn", // rn|vue
         "common": ["./res/regexp/common/rn.reg"],// reg path,
         "single": ["./res/regexp/single/rn.reg"],// single path,
         "outUnit": "upx", // out unit,will work in vue
         "zoom": 1.4, // value zoom,if px need to rem;
         "needZoomUnit": "px|rem", // vaule unit will zoom,if not match will do nothing 
         "reg": ["GetStyle\\(\"([^\"]+)\""],// how to find your class,eq:class="w-15"
         "watchDir": ["./res/sample/rn"],// watch dir to do
         "oldCssReg": "/\\* Automatic generation Start \\*/([^/]+)/\\*", // both vue and rn do as <xxxx start> (auto code) <xxx end>,if not match do nothing;
         "keyNeedZoom": [ // will work in rn,if value need zoom ,please set it
             "width",
             "height"
         ],
         "static": { // work at @key,code is newCssUint
              "red": "#ff0000",
              "red-1": "#ff1100",
              "height": 12
         },
         "outPath": "@FILEDIR/@FILENAME.@FILETYPE" // if static ,will write in a file,dir/name.type is constant
     }
# 匹配规则
    匹配规则分为两层，一层是common，一层是single，可以理解为一层common有多层single
    也就是
        common: .box-c-fff{ d-f ai-c jc-c c-(fff)}  #(fff)相当于 $1
        single: .d-f{display:flex;} .ai-c{align-item:center} .jc-c{justify-content:center} c-$1{color:#$1}
    最后生成样式为:
        box-c{display:flex;align-item:center;justify-content:center;color:#fff}
## 公用（common）
    包含了多个single
## Single
    最基础的样式，也就是实际样式的设置,可以是多个如 display：flex；display：box；等
### Vue
* 它的key就是匹配规则
* 值里面 $1,$2 会被替换成key里面的值,w-($1)-h-($2)
### RN
* 它的key就是匹配规则
* 值里面的-1,-2是类似上面的替换规则，他能保持数据类型，比如 -1，'-1' 代表 数字和字符串
# example
    程序里面已经带有example，并且具有最基础样式，你可以配置自己的样式，在配置里面引入即可使用
## /res/sample
    <template>
        <div class="bc-ff1123"></div>
        <div class="bc-000-112-231 br-nr bp-c bs-c bs-10-15"></div>
        <div class="b-1-001 br-1-123 o-1-000121 c-fff ls-12 lh-20"></div>
        <div class="ta-c ta-r ta-l"></div>
        <div class="fs-20 fw-100"></div>
        <div class="m-1010 p-0505 h-10 w-20 h10 w10"></div>
        <div class="maxh-23 maxw-10 minh-10 minw-22"></div>
        <div class="p-f p-a p-r d-b t-2 b-1 l-3 r-40 va-m zi-205"></div>
        <div class="mt-10 ml-10 mr-10 mb-10"></div>
        <div class="pt-10 pl-10 pr-10 pb-10 br-1"></div>
        <div class="d-f fd-r ai-c jc-c ai-c fw-nw f-21 test1"></div>
    </template>
    <style>
        .test{
            width: 10px;
        }
        /* Automatic generation Start */
    .bc-ff1123{background-color:#ff1123;}
    .bc-000-112-231{background-color:rgb(000,112,231);}
    .br-nr{background-repeat:no-repeat;}
    .bp-c{background-position:center;}
    .bs-c{background-size:cover;}
    .bs-10-15{background-size:20px 30px;}
    .b-1-001{border:2px solid #001;}
    .br-1-123{border-right:2px solid #123;}
    .o-1-000121{outline:#000121 dotted 2px;}
    .c-fff{color:#fff;}
    .ls-12{letter-spacing:24px;}
    .lh-20{line-height:40px;}
    .ta-c{text-align:center;}
    .ta-r{text-align:right;}
    .ta-l{text-align:left;}
    .fs-20{font-size:40px;}
    .fw-100{font-weight:100;}
    .m-1010{margin:20px 20px;}
    .p-0505{padding:10px 10px;}
    .h-10{height:20px;}
    .w-20{width:40px;}
    .h10{height:10%;}
    .w10{width:10%;}
    .maxh-23{max-height:46px;}
    .maxw-10{max-width:20px;}
    .minh-10{min-height:20px;}
    .minw-22{min-width:44px;}
    .p-f{position:fixed;}
    .p-a{position:absolute;}
    .p-r{position:relative;}
    .d-b{display:block;}
    .t-2{top:4px;}
    .b-1{bottom:2px;}
    .l-3{left:6px;}
    .r-40{right:80px;}
    .va-m{vertical-align:middle;}
    .zi-205{z-index:205;}
    .mt-10{margin-top:20px;}
    .ml-10{margin-left:20px;}
    .mr-10{margin-right:20px;}
    .mb-10{margin-bottom:20px;}
    .pt-10{padding-top:20px;}
    .pl-10{padding-left:20px;}
    .pr-10{padding-right:20px;}
    .pb-10{padding-bottom:20px;}
    .br-1{border-radius:2px;}
    .d-f{display: -webkit-flex;
        display: flex;}
    .fd-r{flex-direction:row;}
    .ai-c{align-items:center;}
    .jc-c{justify-content:center;}
    .fw-nw{flex-wrap:nowrap;}
    .f-11{flex:11;}
    /* Automatic generation End */
    </style>
# 欢迎提交issue
# 讨论群
* 941057162