sf-atom-css

v0.1.3

Published

4 years ago

基于less封装一些常用的css，提高开发效率

0High
0Medium
0Low

0 安装

npm i sf-atom-css

Vue-cli <= @2.9.3使用

npm i style-resources-loader -D

build/utils.js

 less: generateLoaders('less').concat(
      {
        loader: 'style-resources-loader',
        options: {
          patterns: [path.join(__dirname, "..", 'node_modules/sf-atom-css/src/sfAtomCommon.less')]
        }
      }
    ),

sfAtomCommon.less 中引入了sfAtomBase.less,不需要再每一个vue文件引入sfAtomCommon.less和sfAtomBase.less了。

Vue-cli >= @3.0.0使用

vue add style-resources-loader

vue.config.js（没有则自己再根目录添加）

const path = require("path");
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            patterns: [
                path.join(__dirname, 'node_modules/sf-atom-css/src/sfAtomCommon.less')
            ],
            preProcessor: 'less'
        }
    }
};

1 初衷

a.开发者在阅读HTML时候能够得到更多的信息,如果你希望你将span的display设置变为block,在HTML

<span block></span>

会比在css中更直观。你是否经历过在css找寻哪个元素的postition不为static,哪个元素的overflow设置为auto呢。

b.帮助开发者规避掉一些可能忽视的陷阱,比如子元素的margin-top影响了父元素,浮动布局导致的高度坍塌,这些通常是不希望发生的。

c.封装一些基本的功能函数,比如transition当多个属性的一样时,可能会出现如下错误代码,transition:width , height 0.25s linear,而写成transition:width 0.25s linear , height 0.25s linear又会给调试带来麻烦。

d.避免重复的编写,像文本缩略、清除浮动、felx布局,完全可以借助Vue、React这样的框架,达到HTML布局语义化的同时，封装基本的css功能。

e.不做过多的封装,减少开发者在html、css中来回切换,只做简易封装。

2 文档

sfAtomBase.less

提供一些函数

base

.square

.square(40px);

  width: 40px;
  height: 40px;

.circle(40px)

  width: 40px;
  height: 40px;
  border-radius: 50%;

.vertical

.vertical > .line-height(40px);

height: 40px;
line-height: 40px;

.property-value

.property-value(@propertyList,@valueList,@sign:~"")

@sign 连接符号列入 > &

.property-value(overflow overflow-x, hidden auto );

[overflow="hidden"] {
  overflow: hidden;
}
[overflow="auto"] {
  overflow: auto;
}

[overflow-x="hidden"] {
  overflow-x: hidden;
}
[overflow-x="auto"] {
  overflow-x: auto;
}

.transition

.same-value(@propertys,@values)

.transition > .same-value(opacity color, 0.1s ease);

transition: opacity 0.1s ease, color 0.1s ease;

.animation

.keyframes(@value;@content)

.animation > .keyframes(ripple 0.5s linear, {100%{opacity: 0;}});

p {
  
  animation: ripple 0.5s linear;
}
@keyframes ripple {
  100% {
    opacity: 0;
  }
}

.interval(@name,@number,@rest)

.animation > .interval(p, 3, animation-delay 0.1s width 20px);

.p3 {
  width: 60px;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.p2 {
  width: 40px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.p1 {
  width: 20px;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

shape

.arc(@direction,@style,@radius:50%)

.shape > .arc (left top right, 20px solid red, 0);

  border: 20px solid transparent;
  border-right: 20px solid red;
  border-top: 20px solid red;
  border-left: 20px solid red;
  border-radius: 0;

sfAtomCommon.less

dispaly

[inline-block] {
  display: inline-block;
}

[block] {
  display: block;
}

position

[relative] {
  position: relative;
}

[absolute] {
  position: absolute;
}

[fixed] {
  position: fixed;
}

overflow

.property-value(overflow overflow-x overflow-y, hidden auto visible);

.BFC

[BFC] {
  &::before {
    //防止子元素的margin-top影响到父元素
    display: table;

    content: " ";
  }
}

.FlexWrapper

.FlexWrapper {
  display: flex;

/*
    justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
  */

  .property-value(justify-content, flex-end  center  space-between  space-around,~"&");

/*
    align-items: flex-start | flex-end | center | baseline | stretch(默认值);
  */
  .property-value(align-items, flex-start  flex-end  center  baseline  stretch,~"&");

/*
    align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认值);
  */
  .property-value(align-content, flex-start  flex-end center  space-between  space-around  stretch,~"&");

  //    flex-direction start
  //   flex-direction: row(默认值) | row-reverse | column | column-reverse;

  &[row-reverse] {
    flex-direction: row-reverse;
  }

  &[column] {
    flex-direction: column;
  }

  &[column-reverse] {
    flex-direction: column-reverse;
  }

  /*

    flex-wrap: nowrap(默认值) | wrap | wrap-reverse;
  */
  &[wrap] {
    flex-wrap: wrap;
  }

  &[wrap-reverse] {
    flex-wrap: wrap-reverse;
  }
}

.FloatWrapper

.FloatWrapper {
  > .left {
    float: left;
  }

  > .right {
    float: right;
  }

  > [left] {
    float: left;
  }

  > [right] {
    float: right;
  }

  &:after {
    //清除浮动 防止高度塌陷
    display: block;
    clear: both;

    content: " ";
  }
}

.InlineBlockWrapper

/*
  InlineBlockWrapper
*/
.InlineBlockWrapper {
  /*
    解决多余空白最好的办法是设置 font-size: 0;
*/
  font-size: 0;

  > :nth-child(n) {
    vertical-align: middle;
  }
}

.TableWrapper

/*
  TableWrapper
*/
.TableWrapper {
  /*
    一个元素宽度固定  另一个元素填充剩余宽度
    布局为table-cell的元素是无法显示省略号的
    使用其的目的也在于完整的显示信息
    设定未两个元素 cell 固定宽度  cell=100% 余下宽度  方便垂直居中
    <div cell>
      <div style="width:80px"></div>
    </div>
    <div cell="100%"></div>
*/
  display: table;

  width: 100%;

  > [cell] {
    display: table-cell;
  }

  > [cell="100%"] {
    width: 100% !important;
  }

  > :nth-child(n) {
    vertical-align: middle;
  }
}

.TextWrapper

.TextWrapper {
  &[ellipsis] {
    overflow: hidden;

//注意display的值为 block、inline-block、list-item、table-caption、flow-root才会起作用

    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &[line-ellipsis] {
    display: -webkit-box;
    overflow: hidden;

/*! autoprefixer: off */

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  &[break] {
    // 只对英文起作用，以字母作为换行依据。
    white-space: pre-wrap;

// 只对英文起作用，以单词作为换行依据。
    word-wrap: break-word;

// 只对中文起作用，强制换行。
    word-break: break-all;
  }
}

z-index管理

/*
  管理z-index的最好办法是减少z-index值的范围
  实际上,基于相同z-index后来居上的原则,也不需要过多的值
  尽量使用小的z-index
  .z-index-1-0 中 1代表位数
  位数相同时
  0 最小
  1 中间值
  2 最大值
*/
[z-index-1-0]{
  z-index: 1
}
[z-index-1-1]{
  z-index: 5
}
[z-index-1-2]{
  z-index: 9;
}
[z-index-2-0]{
  z-index: 10
}
[z-index-2-1]{
  z-index: 50
}
[z-index-2-2]{
  z-index: 99;
}
[z-index-3-0]{
  z-index: 100
}
[z-index-3-1]{
  z-index: 500
}
[z-index-3-2]{
  z-index: 999;
}
[z-index-4-0]{
  z-index: 10000
}
[z-index-4-1]{
  z-index: 15000
}
[z-index-4-2]{
  z-index: 19999;
}