1.0.3 • Published 3 years ago

zl-sass v1.0.3

Weekly downloads
2
License
ISC
Repository
github
Last release
3 years ago

通用sass公共样式库

    一、默认重置及预设的样式 -- reset.css
        如：统一采用border-box,免去减法计算：

            *{
                box-sizing: border-box;
            }

    二、整体采用提取首个字母,以 '-'连接的形式进行命名 前缀为 'g-',
        例如：
            .g-ta-c {
                text-align: center;
            }

    三、部分特殊样式额外命名，方便记忆
        例如：
            .g-pointer {
                cursor: pointer;
            }

常用字体大小

支持的值有：
    12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 32, 40
举例：
class关键代码
.g-fs-12font-size: 12px;
.g-fs-16font-size: 16px;

Font-Weight

class关键代码
.g-fw-400font-weight: 400;
.g-fw-500font-weight: 500;
.g-fw-600font-weight: 600;
.g-fw-700font-weight: 700;
.g-boldfont-weight: bold;

常用行高

支持的值有：
    14, 16, 18, 20, 24, 26, 28, 30, 32, 36, 40, 48, 56
举例：
class关键代码
.g-lh-16line-height: 16px;
.g-lh-24line-height: 24px;

常用色值

class关键代码
.g-c-whitecolor: white;
.g-c-blackcolor: black;
.g-c-primarycolor: #0089fa;
.g-c-successcolor: #67c23a;
.g-c-warningcolor: #ff9900;
.g-c-errorcolor: #e63e35;
.g-c-graycolor: #909399;
.g-c-000color: #000;
.g-c-ccccolor: #ccc;
.g-c-333color: #333;
.g-c-666color: #666;
.g-c-999color: #999;
.g-c-f1color: #f1f1f1;
.g-c-f2color: #f2f2f2;
.g-c-f5color: #f5f5f5;

常用背景色值

class关键代码
.g-bg-whitebackground-color: white;
.g-bg-blackbackground-color: black;
.g-bg-primarybackground-color: #0089fa;
.g-bg-successbackground-color: #67c23a;
.g-bg-warningbackground-color: #ff9900;
.g-bg-errorbackground-color: #e63e35;
.g-bg-graybackground-color: #909399;
.g-bg-000background-color: #000;
.g-bg-cccbackground-color: #ccc;
.g-bg-333background-color: #333;
.g-bg-666background-color: #666;
.g-bg-999background-color: #999;
.g-bg-f1background-color: #f1f1f1;
.g-bg-f2background-color: #f2f2f2;
.g-bg-f5background-color: #f5f5f5;

Margin 值

支持的值有：
    2, 4, 5, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 32, 36, 40, 48
举例：
class关键代码
.g-m-12margin: 12px;
.g-mt-12margin-top: 12px;
.g-mr-12margin-right: 12px;
.g-mb-12margin-bottom: 12px;
.g-ml-12margin-left: 12px;

Padding 值

支持的值有：
    2, 4, 5, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 32, 36, 40, 48
举例：
class关键代码
.g-pd-12padding: 12px;
.g-pt-12padding-top: 12px;
.g-pr-12padding-right: 12px;
.g-pb-12padding-bottom: 12px;
.g-pl-12padding-left: 12px;

圆角

支持的值有：
    2, 4, 6, 8, 10, 12, 16
举例：
class关键代码
.g-br-4border-radius: 4px;
.g-br-8border-radius: 8px;
.g-cicleborder-radius: 50%;

其他常用值：

class备注
.g-w-fullwidth: 100%;
.g-h-fullheight: 100%;
.g-ta-ltext-align: left;
.g-ta-ctext-align: center;
.g-ta-rtext-align: right;
.g-f-lfloat: left;
.g-f-rfloat: right;
.g-showdisplay: block;
.g-blockdisplay: block;
.g-hidedisplay: none;
.g-of-hoverflow: hidden;
.g-hiddenoverflow: hidden;
.g-fixedposition: fixed;
.g-relativeposition: relative;
.g-absoluteposition: absolute;
.g-pointercursor: pointer;
.g-no-selectuser-select: none;
.g-oneline单行+省略号
.g-twoline两行+省略号

Flex 布局

class关键代码
.g-flexdisplay: flex;
.g-fullflex: 0 0 100%;
.g-fd-cflex-direction: column;
.g-fd-crflex-direction: column-reverse;
.g-fd-rflex-direction: row;
.g-fd-rrflex-direction: row-reverse;
.g-fw-wflex-wrap: wrap;
.g-fw-nflex-wrap: nowrap;
.g-fw-wrflex-wrap: wrap-reverse;
.g-jc-fsjustify-content: flex-start;
.g-jc-fejustify-content: flex-end;
.g-jc-cjustify-content: center;
.g-jc-sbjustify-content: space-between;
.g-jc-sajustify-content: space-around;
.g-ai-fsalign-items: flex-start;
.g-ai-fealign-items: flex-end;
.g-ai-calign-items: center;
.g-ai-balign-items: baseline;
.g-ai-salign-items: stretch;
.g-ac-fsalign-content: flex-start;
.g-ac-fealign-content: flex-end;
.g-ac-calign-content: center;
.g-ac-sbalign-content: space-between;
.g-ac-saalign-content: space-around;
.g-ac-salign-content: stretch;
.g-as-aalign-self: auto;
.g-as-fsalign-self: flex-start;
.g-as-fealign-self: flex-end;
.g-as-calign-self: center;
.g-as-balign-self: baseline;
.g-as-salign-self: stretch;
.g-flex-1flex: 1;
.g-flex-2flex: 2;
.g-flex-3flex: 3;
.g-1of2flex: 0 0 50%;
.g-1of3flex: 0 0 33.33333333%;
.g-2of3flex: 0 0 66.66666666%;
.g-1of4flex: 0 0 25%;
.g-3of4flex: 0 0 75%;
.g-1of5flex: 0 0 20%;
.g-2of5flex: 0 0 40%;
.g-3of5flex: 0 0 60%;
.g-4of5flex: 0 0 80%;

正方形、圆形图片：

支持的大小有： 30, 32, 40, 48, 56, 64, 78
class备注
.g-img-48width: 48px;height: 48px;
.g-imgc-48width: 48px;height: 48px;border-radius: 50%;
@infinitebrahmanuniverse/nolb-zl@everything-registry/sub-chunk-3236
1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

4 years ago

1.0.0

4 years ago