m-less 参数介绍

个人整理常用的css属性简写及常用的 mixins

已经废弃，不建议使用。可以尝试 UnoCSS

<div class="btn">btn</div>

.btn {
  .m(20px);
  .btn(100px, 40px, 10px, @c-blue);
  .box>.shadow;
  .font(20px, @c-white);
}

简介 ​

• 自用的less文件 github
• 包含常用属性简写、常用的 mixins、颜色及字体定义、清除浏览器默认样式
• 默认只对少数几个属性进行了浏览器前缀处理，建议使用 Autoprefixer 处理浏览器前缀兼容
• 或者手动引入 -old 文件
• 使用最好有些 less 基础
• 如果属性的所有的参数都有默认值，可以省略()，否则需要传人所需参数
• 如果一个默认值为空，说明当没有当前参数时，只触发前面的属性，当前及后面的属性

目录结构 ​

+- less
  +- mixins mixins 相关文件
    ...
  +- styles
    +- base.less 属性简写（默认）
    +- main.less 样式文件
  +- mixins.less 输出 mixins 文件
  +- styles.less 输出文件
  +- variable.less 变量文件

默认字体列表 ​

@f-base: -apple-system,BlinkMacSystemFont,Microsoft YaHei,Segoe UI,Roboto,Source Han Sans SC,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neu,sans-serif

默认颜色 ​

必须颜色，只能够修改，不可删除

• @c-text: @c-gray; // 字体默认颜色
• @c-line: @c-silver; // 线条默认颜色
• @c-btn: @c-blue; // 按键背景
• @c-shadow: fade(@c-black, 30%); // 阴影默认颜色
• @c-t: transparent; // 透明

属性简写 ​

/* 例如 */
width: 100px;
/* 简写 */
.w(100px);

简写对照表

• 整理了部分常用的css样式属性

处理前缀 ​

常用简写 ​

Mixins 混合 ​

可以通过下面方法简写

.box(5rem, 2rem);
.box>.radius(0.5rem);
.box>.shadow;
// 简写
.box(5rem, 2rem);
.radius(0.5rem);
.shadow;

box ​

font ​

.test {
   .font(.8rem, #333);
   .height(2rem);
   // ok
   .font(.8rem, #333, Arial);
   .height(2rem);
   // error
 }

font-cc 文字居中 ​

font-hidden 文本隐藏 ​

font-column 文本分列 ​

position ​

fixed ​

absolute ​

relative ​

position-cc ​

matrix ​

translate ​

scale ​

rotate ​

skew ​

bg-img ​

bg-sprite ​

bg-line ​

bg-radial ​

spread 扩散线条 ​

.d(inline-block);
  .m(0.5rem);
  .box(8rem, 4rem);
  .border;
  .font-cc(calc(3rem - 2px));
  .spread>.bottom(100%, 2px, #da3);

reflect 渐隐镜像效果 ​

btn 按钮 ​

arrow 箭头 ​

filter 滤镜 ​

animation ​

transition ​

svg 图片 ​