Learning less 6 together: some useful mixed Functions

ArticleDirectory

• Horizontal gradient
• Horizontal gradient 2
• Border color
• Drop-down shadow)
• Rounded corner
• Rounded corner
• Transparency
• Easing duration
• Column

Horizontal gradient

The default value is light color.

 
. Gradient (@ color: # f5f5f5, @ start: # Eee, @ stop: # fff) {Background: @ color; Background:-WebKit-gradient (linear, left bottom, left top, color-stop (0, @ start), color-stop (1, @ stop); Background:-MS-linear-gradient (bottom, @ start, @ stop); Background:-moz-linear-gradient (center bottom, @ start 0%, @ stop 100% );}
 

Example

. Wh {width: 500px; Height: 50px }. wh {. gradient // mix. in the wh class}/* final generation */. wh {Background: # f5f5f5; Background:-WebKit-gradient (linear, left bottom, Left top, color-stop (0, # eeeeee), color-stop (1, # ffffff); Background:-MS-linear-gradient (bottom, # eeeeee, # ffffff); Background:-moz-linear-gradient (center bottom, # eeeeee 0%, # ffffffff 100% );}
 

Horizontal gradient 2

The default value is dark, and the requirements for the last two parameters are 0 ~ The value of 256

. BW-gradient (@ color: # f5f5f5, @ start: 0, @ stop: 255) {Background: @ color; Background:-WebKit-gradient (linear, left bottom, left top, color-stop (0, RGB (@ start, @ start, @ start), color-stop (1, RGB (@ stop, @ stop, @ stop); Background:-MS-linear-gradient (bottom, RGB (@ start, @ start, @ start) 0%, RGB (@ start, @ start, @ start) 100%); Background:-moz-linear-gradient (center bottom, RGB (@ start, @ start, @ start) 0%, RGB (@ stop, @ stop, @ stop) 100% );}
 

Example

 
. Wh {. BW-gradient (# ff0000, 55,144 )}
 

Border color

. Bordered (@ top-color: # Eee, @ right-color: # Eee, @ bottom-color: # Eee, @ left-color: # Eee) {border-top: solid 1px @ top-color; border-left: solid 1px @ left-color; border-Right: solid 1px @ right-color; border-bottom: solid 1px @ bottom-color ;}
 

Drop-down shadow)

 
. Drop-shadow (@ X-axis: 0, @ Y-axis: 1px, @ blur: 2px, @ ALPHA: 0.1) {-WebKit-box-Shadow: @ X-axis @ Y-axis @ blur rgba (0, 0, 0, @ alpha);-moz-box-Shadow: @ X-axis @ Y-axis @ blur rgba (0, 0, 0, @ alpha); box-Shadow: @ X-axis @ Y-axis @ blur rgba (0, 0, 0, @ alpha );}
 

Rounded corner

Only one parameter

 
. Rounded (@ radius: 2px) {-WebKit-border-radius: @ radius;-moz-border-radius: @ radius; -Moz-Background-clip: padding;-WebKit-Background-clip: padding-box ;}
 

Rounded corner

There are four parameters

 
. Border-radius (@ topright: 0, @ bottomright: 0, @ bottomleft: 0, @ topleft: 0) {-WebKit-border-top-right-radius: @ topright; -WebKit-border-bottom-right-radius: @ bottomright;-WebKit-border-bottom-left-radius: @ bottomleft;-WebKit-border-top-left-radius: @ topleft;-moz-border-radius-topright: @ topright;-moz-border-radius-bottomright: @ bottomright;-moz-border-radius-bottomleft: @ bottomleft; -Moz-border-radius-topleft: @ topleft; border-top-right-radius: @ topright; border-bottom-right-radius: @ bottomright; border-bottom-left-radius: @ bottomleft; border-top-left-radius: @ topleft;-moz-Background-clip: padding;-WebKit-Background-clip: padding-box; Background-clip: padding-box ;}
 

Transparency

Poor ie support

. Opacity (@ opacity: 0.5) {-moz-opacity: @ opacity;-khtml-opacity: @ opacity;-WebKit-opacity: @ opacity ;}
 

Easing duration

 
. Transition-duration (@ Duration: 0.2 s) {-moz-transition-Duration: @ duration;-WebKit-transition-Duration: @ duration ;}
 

Column

. Columns (@ colwidth: 250px, @ colcount: 0, @ colgap: 50px, @ columnrulecolor: # Eee, @ columnrulestyle: solid, @ columnrulewidth: 1px) {-moz-column-width: @ colwidth;-moz-column-count: @ colcount;-moz-column-gap: @ colgap;-moz-column-rule-color: @ columnrulecolor;-moz-column-rule-style: @ columnrulestyle;-moz-column-rule-width: @ columnrulewidth;-WebKit-column-width: @ colwidth; -WebKit-column-count: @ colcount;-WebKit-column-gap: @ colgap;-WebKit-column-rule-color: @ columnrulecolor; -WebKit-column-rule-style: @ columnrulestyle;-WebKit-column-rule-width: @ columnrulewidth; column-width: @ colwidth; column-count: @ colcount; column-gap: @ colgap; column-rule-color: @ columnrulecolor; column-rule-style: @ columnrulestyle; column-rule-width: @ columnrulewidth ;}
 

Https://github.com/dmitryf/elements/blob/master/elements.less