[Less] add some material to CSS

[Less] add some material to CSS

Blog description

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

explain

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

Official website address: Less Chinese network

What is Less

When you know what Sass is, I believe you should be clear about what Less is. It is also a weapon of CSS to make CSS more powerful. (I feel a little naive recently, ha)

Official answer: Less (short for leader style sheets) is a backward compatible CSS extension language.

Conclusion: since the officials are so concise and low-key, they don't have to be too flashy

Install Less

You can use npm to install Less.

npm install -g less

It 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 variable

Of course, variables are the first thing 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, it is to put the use of variables directly into the corresponding values.

Scope of variable

Sass variables actually have a scope. The scope of SASS variables can only be effective at the current level. If they are not found, it is like looking for them on the parent node

@myColor: red;

h1 {
  @myColor: green;   // Only useful in h1, local scope
  color: @myColor;  // green
}
p {
  color: @myColor;  // red
}

Nesting rules for Less

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

nesting

Nesting or looking directly at the code

less code

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

css code

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

It's a bit like HTML

@Rule nesting and bubbling

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

@Rules are placed first, and the relative order of other elements in the same rule set remains 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 variables in this file can be used. If the imported file has a. less extension, you can omit the extension.

Now don't ask why you want to use the method of importing files. It's convenient to ask! It's really fragrant! Instant noodles: really fragrant???

grammar
@import filename; //less can be omitted
@import "filename.css";

Mixed Mixins

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

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

At first glance, isn't this an ordinary class style

Use mix
.text {
  .important-text();
}

The use of less is quite random and easy to use!

Map Maps

Starting with less version 3.5, you can also use mixins and rulesets as a set of value map s.

For example, when making a theme color, you can choose Less's mapping.

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

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

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

Last words

After writing Sass, I wrote less. I found a lot in common and a lot worse. I felt that I had browsed the knowledge again. Use less. If your application needs to use multiple themes, consider using less.

thank

Universal network

And hard-working themselves, Personal blogGitHub testGitHub

The official account - the son of the Mo, a small program - little blog

Tags: Front-end less css

Posted on Mon, 22 Nov 2021 22:01:45 -0500 by Druid