[Less] Add some material to CSS

Blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

Compared with Sass's high-profile declaration, Less is relatively low-key. See the introduction on the official website below

Official website address: Less Chinese website

What is Less

If you already know what Sass is, I believe it will be clearer about what Less is. It is also a weapon of CSS, which makes CSS more powerful. (I feel like speaking a bit plain recently)

Official answer: Less (short for Leaner Style Sheets) is a backward compatible CSS extension language.

Summary: Since the official is how concise and low-key, there is no need to be too much bells and whistles

Install Less

You can use npm to install Less.

npm install -g less

Can also be used in the browser

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

Less variables

Variables are of course the first one to talk about. The Less variable uses the @ symbol.

grammar

@variablename: value;

Example

@base-font: Helvetica, sans-serif;
@my-color: red;
@my-font-size: 18px;

body {
  font-family: @base-font;
  font-size: @my-color;
  color: @y-font-size;
}

Convert to CSS code

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

In fact, the use of variables is directly put into the corresponding value.

Variable scope

Sass variables actually have scope. The scope of Sass variables can only have an effect on the current level. If it can’t be found currently, it’s like searching on the parent node.

@myColor: red;

h1 {
  @myColor: green;   // 只在 h1 里头有用，局部作用域
  color: @myColor;  // green
}
p {
  color: @myColor;  // red
}

Nesting rules for Less

This is a good thing for us to write, and it is the most obvious addition.

Nested

Nesting is still fun to look at the code directly

less code

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css code

nav ul {
  margin: 0;
  padding: 20px;
}
nav li {
  color: #FFFFFF;
}

A bit like HTML

@Rule nesting and bubbling

@ Rules (such as @media or @supports ) can be nested in the same way as selectors.

The @ rule will be placed first, and the relative order of other elements in the same rule set will remain unchanged. This is called bubbling.

// less
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// css
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

Import file @import

"Import" works as you expect. You can import a .less file, and all the variables in this file can be used. If the imported file has an .less , you can omit the extension.

Don't ask why you want to use the method of importing files now, it is convenient to ask! It's really fragrant! Instant noodles: really fragrant? ? ?

grammar

@import filename; //less可省略
@import "filename.css";

Mixins

Mixin is a method of including (or mixing) a set of attributes from one rule set to another rule set

Example

.important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

At first glance, isn’t this just a normal class style?

Use mix

.text {
  .important-text();
}

The use of less is mixed, which is quite casual and very easy to use!

Maps

Starting from Less 3.5, you can also use mixins and rulesets as a map of a set of values.

For example, when making a theme color, you can choose the mapping of Less well.

Example

// less
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

// css
.button {
  color: blue;
  border: 1px solid green;
}

Written at the end

After I wrote Sass, I wrote less. I found a lot of things in common and a lot of them. I felt that the knowledge was browsed again. Using Less, if your application needs to use multiple themes, you can consider using less.

thanks

Universal network
And the hardworking self, personal blog , GitHub test , GitHub
Public Account-Guizimo, Mini Program-Xiaogui Blog

[Less] Add some material to CSS