Table of contents
1. Introduction to less
Less is a CSS preprocessing language, which extends the CSS language and adds features such as variables, Mixins, and functions, making CSS easier to maintain and expand. Less can run on Node or the browser.
Use less in the node environment:
install less globally
npm i -g lessInstall less locally
npm i -S lessView less version
lessc -vConvert .less files to .css files
lessc styles.less styles.cssUse less in the browser environment:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 需要一个less编译器 需要引入less -->
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>Install a plugin in vscode: Easy LESS, this plugin can automatically convert .less files into .css files.
2. Variables
In the following code: @mycolor is a variable with a value of red
@mycolor:red;
body{
color: @mycolor
}Compile to css:
body {
color: red;
}3. Mix
A mixin is a method of including (or mixing in) a set of properties from one ruleset into another.
To use mixin just add parentheses ()
#one{
font-size: 28px;
color: teal;
font-family: '楷体';
}
.header{
background-color: #fff;
}
body{
color: red;
// 使用混入
#one();
.header()
};Compile to css:
#one {
font-size: 28px;
color: teal;
font-family: '楷体';
}
.header {
background-color: #fff;
}
body {
color: red;
font-size: 28px;
color: teal;
font-family: '楷体';
background-color: #fff;
}4. Nesting
Less provides the ability to use nesting instead of or in conjunction with cascading.
div{
// & 表示当前选择器
&>a{
text-decoration: none;
}
.one{
color: red;
}
}Compile to css:
div > a {
text-decoration: none;
}
div .one {
color: red;
}@rule nesting and bubbling
@Rules (such as @media or @supports) can be nested in the same way as selectors. The @ rule is placed first, and the relative order of other elements in the same rule set remains unchanged. This is called bubbling
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-color: red;
}
}
@media (min-width: 1280px) {
width: 800px;
}
}Compile to css:
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-color: red;
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}5. Operation
Arithmetic operators +, -, *, / can operate on any number, color or variable. When possible, arithmetic operators perform unit conversions before addition, subtraction, or comparison. The result of the calculation is based on the unit type of the leftmost operand. Units are ignored if the unit conversion is invalid or meaningless. Invalid unit conversion eg px to cm or rad to % conversion.
div{
width: 100px + 50rem; //以第一个像素单位为准
width: 100rem + 50px; //以第一个像素单位为准
width: 100px + 10cm; //以实际操作为准
width: 10cm * 2rem; //以第一个单位为准
color: (#224488 / 2);
color: #112244 + #111;
}Compile to css:
div {
width: 150px;
width: 150rem;
width: 477.95275591px;
width: 20cm;
color: #112244;
color: #223355;
}calc() special case
calc() Math expressions are not evaluated, but variables and math formula values are evaluated within nested functions.
div{
width: calc(100px + 20px)
}Compile to css:
div {
width: calc(100px + 20px);
}6. Escaping
Escaping allows you to use arbitrary strings as property or variable values. Content in any form ~"anything" or form will be output as-is.~'anything'
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
background-color: blue;
}
}Compile to css:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
background-color: blue;
}
}7. Function
Less has a variety of built-in functions for converting colors, processing strings, arithmetic operations, and more. These functions are described in detail in the Less functions manual .
The following code uses the percentage function to convert 0.5 to 50%, and uses the saturate function to increase the color saturation by 5%
@mycolor:orange;
@width:0.5;
.element{
color: saturate(@mycolor,85%);
width: percentage(@width,0.5);
}Compile to css:
.element {
color: #ffa500;
width: 50%;
}8. Namespaces and accessors
Sometimes you want to group mixins for organizational purposes or simply to provide some encapsulation. You can use Less to achieve this requirement more intuitively. Let's say you want to put some mixins and variables under the hood #one for later reuse or distribution:
#one{
.button{
font-size: 28px;
background-color: blue;
}
.button1{
font-family: '宋体';
}
}
body{
color: red;
// 使用
#one.button();
}
Compile to css:
#one .button {
font-size: 28px;
background-color: blue;
}
#one .button1 {
font-family: '宋体';
}
body {
color: red;
font-size: 28px;
background-color: blue;
}9. Mapping
You can use mixins and rulesets as maps of a set of values.
Use square brackets [] to get a rule
#one{
.button{
font-size: 28px;
background-color: blue;
}
}
body{
color: red;
// 使用
font-family: #one.button[font-size];
}Compile to css:
#one .button {
font-size: 28px;
background-color: blue;
}
body {
color: red;
font-family: 28px;
}10. Scope
Scoping in Less is very similar to scoping in CSS. Variables and mixins are looked up locally first, and if not found, are inherited from the "parent" level scope.
@mycolor:orange;
.element{
@mycolor: teal;
color: @mycolor; //当前作用域有@mycolor变量，因此color会取teal
}Compile to css:
.element {
color: teal;
}11. Notes
Less comments are the same as css comments:
// single-line comments
/* Multi-line comment */
12. Import
You can import a .less file, and all variables in this file can be used in full. If the imported file has .less an extension, the extension can be omitted:
@import "library"; // library.less
@import "typo.css";