├── README.md └── common.less /README.md: -------------------------------------------------------------------------------- 1 | # commonless 2 | common.less 3 | -------------------------------------------------------------------------------- /common.less: -------------------------------------------------------------------------------- 1 | // @维护人：张航 2 | 3 | // CSS3前缀 4 | .display(...){ 5 | display: @arguments; 6 | } 7 | .display(@value)when(@value=flex){ 8 | display:-webkit-box; 9 | display:-webkit-flex; 10 | display:-ms-flexbox; 11 | display:@value; 12 | } 13 | .display(@value)when(@value=inline-flex){ 14 | display:-webkit-inline-box; 15 | display:-webkit-inline-flex; 16 | display:-ms-inline-flexbox; 17 | display:@value; 18 | } 19 | .flexbox(){ 20 | display:-webkit-box; 21 | display:-webkit-flex; 22 | display:-ms-flexbox; 23 | display:flex; 24 | } 25 | .flex(@v:1){ 26 | -webkit-box-flex:@v; 27 | -webkit-flex:@v; 28 | -ms-flex:@v; 29 | flex:@v; 30 | width: 100%; 31 | } 32 | // 默认加webkit前缀 33 | .css-prefix(@property,@value){ 34 | -webkit-@{property}:@value; 35 | @{property}:@value; 36 | } 37 | // row | column | row-reverse 38 | // 默认值：column 39 | .flex-direction(@value)when(@value=row){ 40 | -ms-flex-direction:@value; 41 | .css-prefix(box-orient,horizontal); 42 | .css-prefix(flex-direction,@value); 43 | } 44 | .flex-direction(@value:column)when(default()){ 45 | -ms-flex-direction:@value; 46 | .css-prefix(box-orient,vertical); 47 | .css-prefix(flex-direction,@value); 48 | } 49 | .flex-direction(@value)when(@value=row-reverse){ 50 | -ms-flex-direction:@value; 51 | .css-prefix(box-direction,reverse); 52 | .css-prefix(flex-direction,@value); 53 | } 54 | // flex-start | flex-end | center | space-between 55 | // 默认值：center 56 | .justify-content(@value)when(@value=flex-start){ 57 | -ms-flex-pack:start; 58 | .css-prefix(box-pack,start); 59 | .css-prefix(justify-content,@value); 60 | } 61 | .justify-content(@value)when(@value=flex-end){ 62 | -ms-flex-pack:end; 63 | .css-prefix(box-pack,end); 64 | .css-prefix(justify-content,@value); 65 | } 66 | .justify-content(@value:center)when(default()){ 67 | -ms-flex-pack:@value; 68 | .css-prefix(box-pack,@value); 69 | .css-prefix(justify-content,@value); 70 | } 71 | .justify-content(@value)when(@value=space-between){ 72 | -ms-flex-pack:justify; 73 | .css-prefix(box-pack,justify); 74 | .css-prefix(justify-content,@value); 75 | } 76 | // flex-start | flex-end | center | stretch 77 | // 默认值：center 78 | .align-items(@value)when(@value=flex-start){ 79 | -ms-flex-align:start; 80 | .css-prefix(box-align,start); 81 | .css-prefix(align-items,@value); 82 | } 83 | .align-items(@value)when(@value=flex-end){ 84 | -ms-flex-align:end; 85 | .css-prefix(box-align,end); 86 | .css-prefix(align-items,@value); 87 | } 88 | .align-items(@value:center)when(default()){ 89 | -ms-flex-align:@value; 90 | .css-prefix(box-align,@value); 91 | .css-prefix(align-items,@value); 92 | } 93 | .align-items(@value)when(@value=stretch){ 94 | -ms-flex-align:@value; 95 | .css-prefix(box-align,@value); 96 | .css-prefix(align-items,@value); 97 | } 98 | .radius(@x:5px){ 99 | -webkit-border-radius: @x; 100 | border-radius: @x; 101 | } 102 | .box-shadow(@shadow:0 0 5px #ccc){ 103 | box-shadow:@shadow; 104 | -webkit-box-shadow:@shadow; 105 | } 106 | .box-sizing(@style:border-box){ 107 | -webkit-box-sizing: @style; 108 | box-sizing:@style; 109 | } 110 | .transform-origin(...){ 111 | -webkit-transform-origin:@arguments; 112 | transform-origin:@arguments; 113 | } 114 | .transform(@arg){ 115 | -webkit-transform:@arg; 116 | -ms-transform:@arg; 117 | transform:@arg; 118 | } 119 | // 转换，连写 120 | // .transform(rotate(45deg) scale(.5);join); 121 | .transform(@arg;@join)when(@join=join){ 122 | -webkit-transform:@arg; 123 | transform:@arg; 124 | } 125 | .translate(@x:0; @y:0){ 126 | .transform(translate(@x, @y)); 127 | } 128 | .translate3d(@x:0; @y:0; @z:0){ 129 | .transform(translate3d(@x, @y, @z)); 130 | } 131 | .rotate(@degree:0){ 132 | .transform(rotate(@degree)); 133 | } 134 | .rotate3d(@x:0; @y:0; @z:0; @degree:0){ 135 | .transform(rotate3d(@x, @y, @z, @degree)); 136 | } 137 | .scale(@num:1){ 138 | .transform(scale(@num)); 139 | } 140 | .scale3d(@x:1; @y:1; @z:1){ 141 | .transform(scale3d(@x, @y, @z)); 142 | } 143 | .skew(@x:0; @y:0){ 144 | .transform(skew(@x, @y)); 145 | } 146 | // 过渡 147 | // .transition(all 0.5s ease); 148 | // .transition(visibility,opacity 0.5s;); 149 | // .transition(transform 0.5s;true); 150 | .transition(@arg){ 151 | -webkit-transition:@arg; 152 | transition:@arg; 153 | } 154 | .transition(@arg;@prefix)when(@prefix=true){ 155 | -webkit-transition:e("-webkit-@{arg}"); 156 | transition:@arg; 157 | } 158 | .gradient(@path; @colorX; @colorY){ 159 | background-image: -webkit-linear-gradient(@path, @colorX, @colorY); 160 | background-image:-ms-linear-gradient(@path, @colorX, @colorY); 161 | background-image: linear-gradient(@path, @colorX, @colorY); 162 | } 163 | // 线性渐变 164 | // .linear-gradient(60deg; #000, #fff); 165 | .linear-gradient(@degree; @colors){ 166 | @degreeW3c : abs(@degree) + 90; 167 | background-image: -webkit-linear-gradient(@degree,@colors); 168 | background-image: -ms-linear-gradient(@degree,@colors); 169 | background-image: linear-gradient(@degreeW3c,@colors); 170 | } 171 | .animation(...){ 172 | -webkit-animation:@arguments; 173 | animation:@arguments; 174 | } 175 | .user-select(@select: text){ 176 | -webkit-user-select:@select; 177 | -ms-user-select:@select; 178 | user-select:@select; 179 | } 180 | 181 | // 简写 182 | .clearfix(){ 183 | &:after{ 184 | content:""; 185 | display:table; 186 | clear:both; 187 | } 188 | } 189 | .ellipsis(){ 190 | overflow: hidden; 191 | white-space: nowrap; 192 | text-overflow:ellipsis; 193 | } 194 | // padding比例缩放 195 | // .padding-propor(2/3); 196 | .padding-propor(@arg:1){ 197 | &:after{ 198 | content: ''; 199 | display: block; 200 | width: 100%; 201 | padding-top: percentage(@arg); 202 | } 203 | } 204 | 205 | // 待解决 206 | .ell(){ 207 | .ellipsis(); 208 | } 209 | 210 | .flexbox_column(){ 211 | -webkit-box-orient:vertical; 212 | -webkit-flex-direction:column; 213 | -ms-flex-direction:column; 214 | flex-direction:column; 215 | } 216 | .flexbox_center(){ 217 | -webkit-box-orient: horizontal; 218 | -webkit-box-pack: center; 219 | -webkit-box-align: center; 220 | } 221 | 222 | 223 | 224 | 225 | 226 | --------------------------------------------------------------------------------