Question

提供顺时针简写的功能。

• .absolute()

  将元素设置为绝对定位且快速指定元素的位置。

  • .absolute(@offset...)

    @offset

    元素在 top / right / bottom / left 方向上的偏移量。写法参考 CSS margin 属性的值。可以使用 _ 作为占位符，表明此方向上的值无需覆盖。

    .box-1 {
    .absolute(0, _, _, 0); // position: absolute; top: 0; left: 0;
    }
    
    .box-2 {
    .absolute(0, 10px, 5px); // position: absolute; top: 0; right: 10px; bottom: 5px; left: 10px;
    }

    .box-1 {
    position: absolute;
    top: 0;
    left: 0;
    }
    
    .box-2 {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 5px;
    left: 10px;
    }
    

• .relative()

  将元素设置为相对定位且快速指定元素的偏移量。

  • .relative(@offset...)

    @offset

    元素在 top / right / bottom / left 方向上的偏移量。

    偏移量说明请参考 .absolute()。

    .box {
    .relative(0, _, _, 0); // position: relative; top: 0; left: 0;
    }

    .box {
    position: relative;
    top: 0;
    left: 0;
    }
    

• .fixed()

  将元素设置为固定定位且快速指定元素的偏移量。

  • .fixed(@offset...)

    @offset

    元素在 top / right / bottom / left 方向上的偏移量。

    偏移量说明请参考 .absolute()。

    .box {
    .fixed(0, _, _, 0); // position: fixed; top: 0; left: 0;
    }

    .box {
    position: fixed;
    top: 0;
    left: 0;
    }
    

• .margin()

  快速指定元素的外边距。

  • .margin(@margin...)

    @margin

    元素在 top / right / bottom / left 方向上的外边距。写法参考 CSS margin 属性的值。可以使用 _ 作为占位符，表明此方向上的值无需覆盖。

    .box {
    .margin(10px, 5px, _, 0); // margin-top: 10px; margin-right: 5px; margin-left: 0;
    }

    .box {
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 0;
    }
    

• .padding()

  快速指定元素的内边距。

  • .padding(@padding...)

    @padding

    元素在 top / right / bottom / left 方向上的内边距。

    边距参数说明请参考 .margin()。

    .box {
    .padding(10px, _); // padding-top: 10px; padding-bottom: 10px;
    }

    .box {
    padding-top: 10px;
    padding-bottom: 10px;
    }
    

• .border-color()

  快速指定元素在四个方向上的边框颜色。

  • .border-color(@color...)

    @color

    元素在 top / right / bottom / left 方向上的边框颜色。

    参数说明请参考 .margin()。

    .box {
    .border-color(red, _, _, blue); // border-top-color: #ff0000; border-left-color: #0000ff;
    }

    .box {
    border-top-color: red;
    border-left-color: blue;
    }
    

• .border-style()

  快速指定元素在四个方向上的边框风格。

  • .border-style(@style...)

    @style

    元素在 top / right / bottom / left 方向上的边框颜色。

    参数说明请参考 .margin()。

    .box {
    .border-style(solid, _, _); // border-top-style: solid;
    }

    .box {
    border-top-style: solid;
    }
    

• .border-width()

  快速指定元素在四个方向上的边框宽度。

  • .border-width(@width...)

    @width

    元素在 top / right / bottom / left 方向上的边框宽度。

    参数说明请参考 .margin()。

    .box {
    .border-width(_, _, 3px, _); // border-bottom-width: 3px;
    }

    .box {
    border-bottom-width: 3px;
    }