在写移动端页面的样式时,常常会涉及一些通用的样式书写,并用mixins将它们封装起来调用。下面介绍下开发过程中一些常用的mixins实现。

目录

  • clearfix
    • .clearfix(): 清除浮动
  • font
    • .small-font-size(): 缩小字体
    • .small-font-size-align-left(): 缩小字体并左对齐
    • .small-font-size-align-right(): 缩小字体并右对齐
  • icon
    • .icon-arrow-right(): 向右的空心三角箭头
    • .icon-arrow-left(): 向左的空心三角箭头
    • .icon-arrow-down(): 向下的空心三角箭头
    • .icon-arrow-up(): 向上的空心三角箭头
    • .icon-tag-common(): 通用文字tag
  • border
    • .border-with-radius():
    • .border-2x-common():
    • .border-top-1px():
    • .border-left-1px():
    • .border-bottom-1px():
    • .border-right-1px():
  • text
    • .text-ellipsis():
    • .text-vertical-align():
    • .text-ellipsis-multi-line():
  • label
    • .small-font-label():
  • column
    • .two-cols():
  • rating
    • .rating():
    • .rating-square():

mixins

clearfix

清楚浮动。

1
2
3
4
5
6
7
8
9
10
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

font

缩小字体。

small-font-size

缩小字体。

1
2
3
4
5
.small-font-size(@size: 12) {
font-size: 12px;
transform: scale(@size / 12);
transform-origin: 50% 50%;
}

small-font-size-align-left

缩小字体,并左对齐。

1
2
3
4
.small-font-size-align-left(@size: 12) {
.small-font-size(@size);
transform-origin: 0 50%;
}

small-font-size-align-right

缩小字体,并右对齐。

1
2
3
4
.small-font-size-align-right(@size: 12) {
.small-font-size(@size);
transform-origin: 100% 50%;
}

icon

icon-arrow-right

向右的空心三角箭头。

1
2
3
4
5
6
7
8
9
10
.icon-arrow-right(@width: 8px, @height: 8px, @line-width: 1px, @color: transparent) {
margin-right: @width / 8 * 2; // 简单抵消偏移
// XXX: 考虑到控件的已有实现 暂不写逆向偏移抵消
width: @width;
height: @height;
border-top: @line-width solid @color;
border-right: @line-width solid @color;
box-sizing: border-box;
transform: rotate(45deg);
}

icon-arrow-left

向左的空心三角箭头。

1
2
3
4
5
6
7
8
9
.icon-arrow-left(@width: 8px, @height: 8px, @line-width: 1px, @color: transparent) {
margin-left: @width / 8 * 2;
width: @width;
height: @height;
border-top: @line-width solid @color;
border-left: @line-width solid @color;
box-sizing: border-box;
transform: rotate(-45deg);
}

icon-arrow-down

向下的空心三角箭头。

1
2
3
4
5
6
7
8
.icon-arrow-down(@width: 8px, @height: 8px, @line-width: 1px, @color: transparent) {
width: @width;
height: @height;
border-bottom: @line-width solid @color;
border-left: @line-width solid @color;
box-sizing: border-box;
transform: rotate(-45deg);
}

icon-arrow-up

向上的空心三角箭头。

1
2
3
4
5
6
7
8
.icon-arrow-up(@width: 8px, @height: 8px, @line-width: 1px, @color: transparent) {
width: @width;
height: @height;
border-top: @line-width solid @color;
border-left: @line-width solid @color;
box-sizing: border-box;
transform: rotate(45deg);
}

icon-tag-common

通用文字tag。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.icon-tag-common (@width: 16, @height: 16, @font-size: 11, @bg-color: #f24, @bd-radius: 50%) {
@origin-font-size: 12;
@scale: @font-size / @origin-font-size;

width: @width + 0px;
height: @height + 0px;
border-radius: @bd-radius;
background: @bg-color;
color: #fff;
i {
display: block;
border-radius: 2px / @scale;
box-sizing: border-box;
width: @width / @scale + 0px;
height: @height / @scale + 0px;
line-height: @height / @scale + 0px;
font-size: @origin-font-size + 0px;
transform: scale(@scale);
transform-origin: 0 0;
text-align: center;
}
}

border

border-with-radius

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.border-with-radius(@borderColor, @borderTopWidth: 1px, @borderRightWidth: 1px, @borderBottomWidth: 1px, @borderLeftWidth:1px, @radius1: 0, @radius2: 0, @radius3: 0, @radius4: 0) {
position: relative;
border-top: @borderTopWidth solid @borderColor;
border-right: @borderRightWidth solid @borderColor;
border-bottom: @borderBottomWidth solid @borderColor;
border-left: @borderLeftWidth solid @borderColor;
border-radius: @radius1 @radius2 @radius3 @radius4;
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2) {
border: none;
&:after{
content: '';
display: block;
box-sizing: border-box;
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border-top: @borderTopWidth solid @borderColor;
border-right: @borderRightWidth solid @borderColor;
border-bottom: @borderBottomWidth solid @borderColor;
border-left: @borderLeftWidth solid @borderColor;
pointer-events: none; // 解决挡住点击事件的问题
transform: scale(.5);
transform-origin: 50% 50%;
width: 200%;
border-radius: (@radius1 * 2) (@radius2 * 2) (@radius3 * 2) (@radius4 * 2);
}
}
}

border-2x-common

1
2
3
4
5
6
7
8
9
10
11
12
13
.border-2x-common() {
content: '';
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
right: -100%;
bottom: -100%;
left: 0;
pointer-events: none;
transform: scale(.5);
transform-origin: 0 0;
}

border-top-1px

1
2
3
4
5
6
7
8
9
10
11
.border-top-1px(@color: transparent, @w: 1px) {
position: relative;
border-top: @w solid @color;
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2) {
border: none;
&:after {
border-top: @w solid @color;
.border-2x-common();
}
}
}

border-left-1px

1
2
3
4
5
6
7
8
9
10
11
.border-left-1px(@color: transparent, @w: 1px) {
position: relative;
border-left: @w solid @color;
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2) {
border: none;
&:after {
border-left: @w solid @color;
.border-2x-common();
}
}
}

border-bottom-1px

1
2
3
4
5
6
7
8
9
10
11
.border-bottom-1px(@color: transparent, @w: 1px) {
position: relative;
border-bottom: @w solid @color;
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2) {
border: none;
&:after {
border-bottom: @w solid @color;
.border-2x-common();
}
}
}

border-right-1px

1
2
3
4
5
6
7
8
9
10
11
.border-right-1px(@color: transparent, @w: 1px) {
position: relative;
border-right: @w solid @color;
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2) {
border: none;
&:after {
border-right: @w solid @color;
.border-2x-common();
}
}
}

text

text-ellipsis

1
2
3
4
5
6
.text-ellipsis() {
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}

text-vertical-align

1
2
3
4
.text-vertical-align(...) {
line-height: @arguments;
height: @arguments;
}

text-ellipsis-multi-line

1
2
3
4
5
6
.text-ellipsis-multi-line(@line: 2) {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: @line;
-webkit-box-orient: vertical;
}

label

small-font-label

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.small-font-label(@color: #333; @border-color: #333; @font-size: 9) {
padding: 0 3px;
border: 1px solid @border-color;
border-radius: 2px;
color: @color;
line-height: 14px;
box-sizing: border-box;

& > * {
display: block;
.small-font-size(@font-size);
transform-origin: 50% 50%;
white-space: nowrap;
}
}

column

two-cols

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.two-cols(@margin: 10px) {
.clearfix();

> * {
float: left;
margin-bottom: @margin;
width: 50%;

> * {
display: block;
}

&:nth-child(odd) {
> * {
margin-right: @margin / 2;
}
}

&:nth-child(even) {
> * {
margin-left: @margin / 2;
}
}
}
}

rating

rating

1
2
3
4
5
6
7
8
9
10
11
12
13
.rating(@height: 12px; @aspect-ratio: 80 / 12; @icon-score-empty: @icon-score-orange-empty; @icon-score-fill: @icon-score-orange-fill) {
width: @height * @aspect-ratio;
height: @height;
background: url(@icon-score-empty) no-repeat;
background-size: auto 100%;

.fill {
width: 0;
height: 100%;
background: url(@icon-score-fill) no-repeat;
background-size: auto 100%;
}
}

rating-square

1
2
3
.rating-square(@height: 12px) {
.rating(@height: @height; @aspect-ratio: 72 / 12; @icon-score-empty: @icon-score-square-empty; @icon-score-fill: @icon-score-square-fill);
}