1. Directory structure

\

\

2.index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less</title>
    <link  href="styles.css" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/less.js/3.0.0-pre.4/less.js"></script>
</head>
<body>
    <div class="dialog"></div>
</body>
</html>
Copy the code


3.styles.less

@color: color;
@dialog: .dialog;
@suffix: fix; // Whitespace is ignored, and single or double quotation marks are required to preserve whitespace@hi: '徐 ';
@dear: with confirmed;.dialog{// for the rule property widget, it must be in the form of "@{variable name}"background- the @ {color} :# 888; // For the rule attribute, you must use the form "@{variable name}" @{color} :#000eff;
  border-color: @dialog-border-color;
  border-width: @dialog-border-width;
  border-style: solid; } // For selector, must use the form @{{dialog}{"@{variable name}"width: 200px;
}
@{dialog}::after{
  content: '@{hi}@{dear}'; // For string concatenation, you must use the form "@{variable name}"}@h: 1000px; // For selector parts, the form "@{variable name}" must be used.ie-@{suffix}{
  @h: 30px; // Scopes exist. Local scopes take precedence over global scopes.height: @h; // For attribute values, either form can be usedline-height: 30px; } / /1. The variable starts with @. The variable name consists of letters, digits, underscores, and hyphens2. No provision for definition before use; @dialog-border-color: #f70009;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. Take the last defined value as the final value;Copy the code

4. Installation and command line usage

$ npm install -g less
Copy the code
$ lessc styles.less styles.css
Copy the code

\

5. Generate styles. The CSS

.dialog {
  background-color: # 888;
  color: #000eff;
  border-color: #f70009;
  border-width: 1px;
  border-style: solid;
}
.dialog {
  width: 200px;
}
.dialog::after {
  content: 'Xu Tongbao';
}
.ie-fix {
  height: 30px;
  line-height: 30px;
}
Copy the code

6. Run result \

\

\

\