2020年8月17日(less/sass/css弹性盒子封装)

1.css

@charset "UTF-8";
/**
 * flexbox布局方式 
 */
 .fx{
  display: flex;
  width: 100%;
 }
 /**
 * 向从左到右排列（左对齐）
 * <div class="fx fx-row"></div>
 */
.fx-row {
  flex-direction: row; }

/**
 * 向从左到右排列（右边对齐）
 * <div class="fx fx-row"></div>
 */
.fx-row-reverse {
  flex-direction: row-reverse; 
}

/**
 * 纵向从上往下排列（顶对齐）
 * <div class="fx fx-column"></div>
 */
.fx-column {
  flex-direction: column; 
}

/**
 * 纵向从上往下排列（底部对齐）
 * <div class="fx fx-column"></div>
 */
.fx-column-reverse {
  flex-direction: column-reverse; 
}

  /* 主轴 */
.fx-justify-start {
  justify-content: flex-start;
}
.fx-justify-end {
   justify-content: flex-end; 
  }
.fx-justify-center {
  justify-content: center; 
}
.fx-justify-between { 
  justify-content: space-between;
 }
.fx-justify-around {
  justify-content: space-around; 
 }

 /* 侧轴 */
 .fx-align-start{
  align-items: flex-start;
 }

 .fx-align-end{
  align-items: flex-end;
 }

 .fx-align-center{
  align-items: center;
 }


/**
 * wrap
 */
.fx-wrap {
  flex-wrap: wrap;
}

/**
 * 子项目排列
 * <div class="fx fx-column"></div>
 */
.fx-1, .fx-2, .fx-3, .fx-4, .fx-5, .fx-6, .fx-7, .fx-8, .fx-9 {
  width: 100%;}

/** auto(1 1 auto) **/
.fx-auto {
  flex: auto;
}

.fx-none {
  flex: none; 
}

.fx-1 {
  flex: 1;
}

.fx-2 {
  flex: 2;
}

.fx-3 {
  flex: 3; 
}

.fx-4 {
  flex: 4;
}

.fx-5 {
  flex: 5;
}

.fx-6 {
  flex: 6;
}

.fx-7 {
  flex: 7;
}

.fx-8 {
  flex: 8;
}

.fx-9 {
  flex: 9;
}

2.scss

@charset "utf-8";

/**
 * flexbox布局方式
 */

@mixin flexbox {
  display: flex;
}

%flexbox { @include flexbox; }
/**
 * 向从左到右排列（左对齐）
 * <div class="fx-row"></div>
 */
.fx-row{
  @include flexbox;
  width: 100%;
  flex-direction: row;
}

/**
 * 向从左到右排列（右边对齐）
 * <div class="fx-row"></div>
 */
.fx-row-reverse{
  @include flexbox;
  width: 100%;
  flex-direction: row-reverse; 
}

/**
 * 纵向从上往下排列（顶对齐）
 * <div class="fx-column"></div>
 */
.fx-column{
  @include flexbox;
  width: 100%;
  flex-direction: column; 
}

/**
 * 纵向从上往下排列（底部对齐）
 * <div class="fx-column"></div>
 */
.fx-column-reverse{
  @include flexbox;
  width: 100%;
  flex-direction: column-reverse; 
}

  /* 主轴 */
  .fx-justify-start {
    @include flexbox;
    width: 100%;
    justify-content: flex-start;
  }
  .fx-justify-end {
    @include flexbox;
    width: 100%;
     justify-content: flex-end; 
    }
  .fx-justify-center {
    @include flexbox;
    width: 100%;
    justify-content: center; 
  }
  .fx-justify-between { 
    @include flexbox;
    width: 100%;
    justify-content: space-between;
   }
  .fx-justify-around {
    @include flexbox;
    width: 100%;
    justify-content: space-around; 
   }
  
   /* 侧轴 */
   .fx-align-start{
    align-items: flex-start;
   }
  
   .fx-align-end{
    align-items: flex-end;
   }
  
   .fx-align-center{
    align-items: center;
   }

/**
 * wrap策略
 */
.fx-wrap{
  flex-wrap: wrap;
}

/**
 * 子项目排列
 * <div class="fx-column"></div>
 */
.fx,.fx-1,.fx-2,.fx-3,.fx-4,.fx-5,.fx-6,.fx-7,.fx-8,.fx-9{
  width: 100%;
}

/** auto(1 1 auto) **/.fx-auto {flex:auto;}
.fx-none {flex:none;}
.fx-1 {flex:1;}
.fx-2 {flex:2;}
.fx-3 {flex:3;}
.fx-4 {flex:4;}
.fx-5 {flex:5;}
.fx-6 {flex:6;}
.fx-7 {flex:7;}
.fx-8 {flex:8;}
.fx-9 {flex:9;}

3.less

@fx-column: 24;

.fx-column, .fx-row,.fx-row-reverse, .fx-column-reverse{
	display: flex;
}
.fx-row{
  flex-direction: row;
  .build-align(row);
}
.fx-row-reverse{
  flex-direction: row-reverse; 
}
.fx-column{
  flex-direction: column;
  .build-align(column);
}
.fx-column-reverse{
  flex-direction: column-reverse; 
}
.flex-item {
	float: left;
	flex-grow: 1;
}

// fx-row的对齐方式
.build-align(@type) when (@type = row) {
  &.fx-left {
		justify-content: flex-start;
	}
	&.fx-right {
		justify-content: flex-end;
	}
	&.fx-top {
		align-items: flex-start;
	}
	&.fx-bottom {
		align-items: flex-end;
	}
	&.fx-center {
		justify-content: center;
	}
	&.fx-middle {
		align-items: center;
  }
}

// fx-column的对齐方式
.build-align(@type) when (@type = column) {
  &.fx-left {
		align-items: flex-start;
	}
	&.fx-right {
		align-items: flex-end;
	}
	&.fx-top {
		justify-content: flex-start;
	}
	&.fx-bottom {
		justify-content: flex-end;
	}
	&.fx-center {
		align-items: center;
	}
	&.fx-middle {
		justify-content: center;
	}
}


// 递归生成栅格
.build-item(@i) when (@i > 0) {
	.build-item((@i - 1));
	
	// 栅格
	.flex-item-@{i} {
		float: left;
		width: percentage(@i / @fx-column);
	}
}

.build-item(@fx-column);

在react中使用需要配置

const path = require("path");
const {
    override,
    addWebpackAlias
} = require('customize-cra');

const alter_config= ()=>(config, env)=>{
    const oneOf_loc= config.module.rules.findIndex(n=>n.oneOf)
    config.module.rules[oneOf_loc].oneOf=[    //例如要增加处理less的配置
        {
            test: /\.(css|less)$/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1,
                    },
                },
                {
                    loader: 'less-loader'
                }
            ],
      },
      {
        test:/\.scss$/,
        loaders:['style-loader','css-loader','sass-loader'],
      },
        ...config.module.rules[oneOf_loc].oneOf
    ]

    return config;
}

module.exports= override(
    alter_config(),   //将自定义配置组合进来
    addWebpackAlias({  //增加路径别名的处理
        '@': path.resolve('./src')
    })
)