LESS – the smart way to use css
Less is a parametrized css language, which produces standard css files after transpiling LESS to css
Transpiling can be done on the fly or precompiled
LESS can use external libraries
LESS is supported? by GRUNT
LESS is used extensively by bootstrap
the homepage is https://lesscss.org
LESS – a css preprocessor - Intro
Rounded Boders in plain css
.rounded {
-webkit-border-radius: 16px;
-moz-border-radius: 16 px;
border-radius: 16 px;
background-clip: padding-box;
}
Rounded Borders in LESS (mixin)
.border-radius (@value) {
-webkit-border-radius: @value;
-moz-border-radius: @value;
border-radius: @value;
background-clip: padding-box;
}
.rounded {
border-radius(16px);
}
LESS Installation
The library is hosted on Google Code, and can be downloaded or included (as a CDN link) from https://cdnjs.cloudflare.com/ajax/libs/less.js/4.2.0/less.min.js for a compilation on the client side
In order for the library to work properly, you need to first include links to your .less stylesheets, and set the rel tag to stylesheet/less, in order for them to work properly:
<link rel="stylesheet/less" type="text/css" href="styles.less">
Note the use of the rel attribute on this link, you need to use the /less value, in order for LESS to work properly. If you are using HTML5 syntax, you don't need to include the type="text/less" and type="text/javascript" values.
Next, you need to include LESS; you can either download it from the website and include it locally in the same way that you would include any JavaScript file, or use the following CDN link; in either case, you must include it after your .less stylesheet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.2.0/less.min.js">
</script>
LESS Installation in node.js
Start a command prompt (note that you must do this as a user with admin rights), and change to the folder you've just created, and type in npm install less
LESS Installation in GRUNT
Using LESS variables
<body>
<div id="div1">This is test number 1</div>
<div id="div2">This is test number 2</div>
<div id="div3">This is test number 3</div>
</body>
@red: #610000;
@light_red: @red + #333;
@dark_red: @red - #333;
@header-font: 'Cookie', cursive;
@header-font-color: #fff;
#div1 { background-color: @dark_red; width: 300px; height:
100px; font-family: @header-font; font-size: 30px;
color:@header-font-color; }
#div2 { background-color: @red; width: 300px; height: 100px;
font-family: @header-font; font-size: 30px; color: @headerfont-color; }
#div3 { background-color: @light_red; width: 300px; height:
100px; font-family: @header-font; font-size: 30px; color:
@header-font-color; }
/* Colors for my Website
#ff9900 - Orange - used for links and highlighted items
#cccccc - Light Gray - used for borders
#333333 - Dark Black - Used for dark backgrounds and heading
text color
#454545 - Mid Black - Used for general text color
*/
body { background: #333333; color: #454545; }
a { color:#ff9900; }
h1, h2, h3, h4, h5, h6 { color: #333333; }
/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc;
@color-black_dark: #333333;
@color-black_medium: #454545;
body { background: @color-black_dark; color: @colorblack_
medium; }
a { color: @color-orange; }
h1, h2, h3, h4, h5, h6 { color: @color-black_dark; }
Using mixins in LESS
领英推荐
<body>
<div class="left_box">Lighter</div>
<p>
<div class="middle_box">Original</div>
<p>
<div class="right_box">Darker</div>
</body>
<link rel="stylesheet/less" type="text/css"
href="mixins.less">
the less-css
@boxwidth: 100px;
@boxheight: <link rel="stylesheet/less" type="text/css"
href="mixins.less"> ;
body { font-family: 'Cookie', cursive; font-size: 26px;
color: #ffc; }
div { height: @boxheight; width: @boxwidth; }
.left_box { background-color: #FF1010; .box-shadows; }
.middle_box { background-color: #800000; .box-shadows; }
.right_box { background-color: #000000; .box-shadows; }
.box-shadows {
-webkit-box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75);
box-shadow: 3px 2px 3px rgba(50, 50, 50, 0.75);
}
Parametric mixins in LESS
see the same colorful boxes as above.
<body>
<div class="left_box">Lighter</div>
<p>
<div class="middle_box">Original</div>
<p>
<div class="right_box">Darker</div>
</body>
<link rel="stylesheet/less" type="text/css"
href="mixins.less">
the less-css
@boxwidth: 100px;
@boxheight: 50px;
body { font-family: 'Cookie', cursive; font-size: 26px;
color: #ffc; }
div { height: @boxheight; width: @boxwidth; }
.left_box { background-color: #FF1010; .box-shadow(3px 5px, rgba(50, 50, 50, 0.75)); }
.middle_box { background-color: #800000; .box-shadow(3px 5px, rgba(50, 50, 50, 0.75)); }
.right_box { background-color: #000000; .box-shadow(3px 5px, rgba(50, 50, 50, 0.75)); }
.box-shadow(@style, @c) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
Default values in parametric Mixins
.box-shadow(@style: 3px 5px, @c) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.left_box {
background-color: #FF1010;
.box-shadow(10px 3px 5px, rgba(50, 50, 50, 0.75));
}
.right_box { background-color: #FF1010;
.box-shadow(3px 5px, rgba(50, 50, 50, 0.75)); }
gives
.left_box {
background-color: #FF1010;
box-shadow: 10px 3px 5px rgba(50, 50, 50, 0.75);
-webkit-box-shadow: 10px 3px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 10px 3px 5px rgba(50, 50, 50, 0.75);
} .
right_box {
background-color: #FF1010;
box-shadow: 3px 5px rgba(50, 50, 50, 0.75);
-webkit-box-shadow: 3px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 3px 5px rgba(50, 50, 50, 0.75);
}
@arguments Using all arguments at once
The arguments are for example
div { border:1px solid #bbb; }
without @arguments usage
.gray_border(@width: 1px, @type: solid, @color: #bbb){
border: @width @type @color; }
div { .gray_border(2px, dashed); }
with @arguments
.gray_border(@width: 1px, @type: solid, @color: #bbb){
border: @arguments; }
div { .gray_border(2px, dashed); }
Parametric mixins without parameters
.alert { background: red; color: white; padding: 5px 12px; }
.error_message { .alert; margin: 0 0 12px 0; }
Guarded Mixins
<body>
<div class="left_box">Lighter</div>
<p>
<div class="middle_box">Original</div>
<p>
<div class="right_box">Darker</div>
</body>
@boxwidth: 100px;
@boxheight: 50px;
.set-bg-color (@text-color) when (lightness(@text-color) >=50%) { background-color: #fff; }
.set-bg-color (@text-color) when (lightness(@text-color) <50%) { background-color: #ccc; }
body { font-family: 'Cookie', cursive; font-size: 26px;
color: #ffc; .set-bg-color(#FF1010); }
div { height: @boxheight; width: @boxwidth; }
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
the resulting CSS
.left_box { background-color: #FF1010; .box-shadow(3px
5px, rgba(50, 50, 50, 0.75)); }
.middle_box { background-color: #800000; .box-shadow(3px
5px, rgba(50, 50, 50, 0.75)); }
.right_box { background-color: #000000; .box-shadow(3px
5px, rgba(50, 50, 50, 0.75)); }