Why Choose less

CSS code development and maintenance are more difficult, especially in CSS of various sizes and colors, see more absolute vomiting. So there are CSS preprocessing languages which are easy to develop and maintain and manage, and they can be compiled to generate CSS.

As a back-end Javer, there are roughly three CSS preprocessing languages I know LESS, SASS, Stylus . These preprocessing languages provide variables, mixins, functions, operations and other functions, which greatly reduce the difficulty of CSS writing. In these languages SASS Based on Ruby, LESS,Stylus Based on Node.js. Ruby doesn't have much contact with SASS, so in order to save the cost of learning, it should abandon SASS decisively. Stylus is a rising star, currently github Upper activity is not as good as LESS and SASS . In addition, the LESS grammar is fully compatible with CSS, and the learning cycle is shorter (SASS 3 has also been changed to CSS-compatible grammar), and the Bootstrap framework also uses the LESS language. After weighing the pros and cons, I finally chose LESS.

Install LESS

less is node-based, so make sure you have it before installation Node.js Development environment.

Global installation of the package manager using node.js:

$ npm install -g less

After installation, Less compiler can be used to compile less source files into css:

$ lessc styles.less styles.css

The - x option is provided inside the lessc command to generate compressed CSS. Less C provides a way to extract compression into one after V3 clean-css Plug-in, install clean-css command as follows:

$ npm install -g less-plugin-clean-css

After installing the plug-in, lessc will automatically call the plug-in with the following commands:

$ lessc --clean-css styles.less styles.min.css

Use less.js for front-end development

Link less style files into corresponding html files:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

download less.js And introduced in the html file:

<script src="less.js" type="text/javascript"></script>

Option: You can configure less before loading the less.js file

<!-- Need to less.js Pre-script settings -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

variables:

Variable definition

For common attribute values that often appear in CSS, we can use variables to manage them uniformly.

a, .link { color: #428bca; }
.widget { color: #fff; background: #428bca; }

Unified management using LESS variables:

// Defining variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%); // Create related colors using built-in functions

// Using variables
a, .link { color: @link-color; }
a:hover { color: @link-color-hover; }
.widget { color: #fff; background: @link-color; }

Variable Interpolation Statement

The above example uses variables as "attribute values" and in fact variables can be used elsewhere, such as selectors, attribute names, URL s, or @import instructions.

// Defining variables
@my-selector: banner;

// Variables as selectors
.@{my-selector} {  font-weight: bold; line-height: 40px; margin: 0 auto; }

// Defining variables
@images: "../img";
// Use variables in URL s
body { color: #444; background: url("@{images}/white-sand.png"); }

// Defining variables
@themes: "../../src/themes";

// Use variables in the @import directive
@import "@{themes}/tidal-wave.less";

// Defining variables
@property: color;

// Use in attribute names
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

Variables are used as variable names

This sentence may be a bit around, I think the most direct example is:

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;  // @@var=@fnord=I am fnord.

It will eventually be compiled into:

content: "I am fnord.";

Inert Loading of Variables

You can use variables before defining them

.lazy-eval {
  width: @var; // Use before defining variables
}

@var: @a;
@a: 9%;

Finally compiled into:

.lazy-eval-scope {
  width: 9%;
}

You can even do this:

.lazy-eval-scope {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;

In the same scope, the variables defined later will override the variables defined earlier, so:

@var: @a;
.lazy-eval-scope {
  width: @var;
}
@a: 100%;
@a: 99%;

It will be compiled into:

.lazy-eval-scope {
  width: 99%;
}

The principle of proximity is adopted in different scopes:

@var: @a;
.lazy-eval-scope {
  width: @var;
  @a: 9%;
}
@a: 100%;
@a: 99%;

It will be compiled into:

.lazy-eval-scope {
  width: 9%;
}

Coverage of default variables

When using third-party frameworks, we may need to modify the values of some variables'attributes. According to the principle of lazy loading of variables above, we can use this method:

// Variables in third-party frameworks
@base-color: green;
@dark-color: darken(@base-color, 10%);

// Using third-party libraries
@import "library.less";
@base-color: red;
// According to the principle of variable inert loading, red overrides the variables defined in the framework.
// So the @dark-color variable will also be changed to dark red drak-red
// This ensures that we don't have to modify any code in the framework when using third-party frameworks.

Inheritance:extend

Extended is a pseudo-Class selector in less that combines common CSS styles.

nav ul {
  // Here the & symbol represents the selector itself
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

It will be compiled into:

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

Grammatical Rules of Inheritance

////////////////
// Basic Writing
.a:extend(.b) {}
.some-class:extend(.bucket tr) {}

// Equivalent to the above
.a {
  &:extend(.b);
}

////////////////
// All keywords denote inheritance of all.dClass selector
.c:extend(.d all) {
  // such as.d or .x.d or .d.x
  // The preceding formulation will only inherit.dselector
}
// For example:
.a.class,
.class.a,
.class > .a {
  color: blue;
}
.testa:extend(.class) {} // No matching selector was found
.testb:extend(.class all) {} // Match all include.classSelector

////////////////
// Multiple inheritance
.e:extend(.f) {}
.e:extend(.g) {}
// Inheritance of multiple class selectors can be separated by commas
// Notice that commas make a big difference.
.e:extend(.f, .g) {}
// This multi-inheritance grammar is also allowed.
.e:extend(.f):extend(.g) {}

Style mixing: mixins

Style mixing is inserting existing styles into selectors

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

It will be compiled into:

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

No output style mix:

.my-mixin {
  color: black;
}
// This part will not be exported.
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}
// Parentheses can be added or not added after mixing styles

It will be compiled into:

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

mixins with parameters

// Define mixins
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

/////
// Using mixins
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

mixins default parameter

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

///////
// Use default parameters directly
#header {
  .border-radius;
}

Multi parameter mixins

// Separation between multiple variables is also used.
.caret-down(@width: 10px, @color: #ccc){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

// Multiple variables can also be separated by ";"
.caret-down(@width: 10px, @color: #ccc){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

@ arguments variable

@ The arguments variable is similar to arguments in JS and is used to represent all input parameters of mixins.

// Define mixins
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

/////
// Use
.big-block {
  .box-shadow(2px; 5px);
}

Compiled into:

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

Variable parameters

Like programming languages, variable parameters can be represented by...

.mixin(...) {        /* matching 0-N A parameter */  }
.mixin() {           /* matching 0 A parameter */    }
.mixin(@a: 1) {      /* matching 0-1 A parameter */  }
.mixin(@a: 1; ...) { /* matching 0-N A parameter */  }
.mixin(@a; ...) {    /* matching 1-N parameter */    }

Example:

.mixin(@a; @rest...) {
    content: @rest;
}