easy-css-loader

介绍

easy-css-loader 是一款webpack的loader, 集成一些css代码块功能

效果图

对应代码:

<div>
  <div class="easy-css"></div>
</div>
<style >
  .easy-css{
    border: 1px solid red;
    wh(100px, 80px);
    posC;
  }
</style>

说明

启动

1. npm install
2. npm run dev

觉得对你有帮助,请点右上角的Star支持一下
推荐一下我的另一个项目“用console.log看vue源码” 点这里

使用文档

配置

1. npm install -D easy-css-loader
2. 修改webpack配置文件(以vue项目为例)

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'easy-css-loader']
      }
    ]
  }
}

wh

<style >
  .easy-css{
    wh(100px, 80px);
  }
</style>
<!-- 相当于 -->
<style >
  .easy-css{
    width: 100px;
    height: 80px;
  }
</style>

font

<style >
  .easy-css{
    font(20px, yellow, center);
  }
</style>
<!-- 相当于 -->
<style >
  .easy-css{
    font-size: 20px;
    color: yellow;
    text-align: center;
  }
</style>

flex

<style >
  .easy-css{
    flex;  
  }
</style>
<!-- 相当于(也可以往flex(left, flex-start);传参) -->
<style >
  .easy-css{
    display: flex;
    justify-content: center;  // 可选参数
    align-items: center;  // 可选参数
  }
</style>

posC

<style >
  .easy-css{
    posC;
  }
</style>
<!-- 相当于 -->
<style >
  .easy-css{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
</style>

posL

<style >
  .easy-css{
    posL;
  }
</style>
<!-- 相当于(也可以往posL(absolute, 10px); 传参-->
<style >
  .easy-css{
    position: absolute;  // 可选参数
    top: 50%;
    left: 30px;   // 可选参数
    transform: translate3d(0, -50%, 0);
  }
</style>

posR

<style >
  .easy-css{
    posR;
  }
</style>
<!-- 相当于(也可以往posR(absolute, 10px); 传参-->
<style >
  .easy-css{
    position: absolute;   // 可选参数
    top: 50%;
    right: 30px;   // 可选参数
    transform: translate3d(0, -50%, 0);
  }
</style>