[Less] Add something to CSS

Blog Description

The information in this 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!

Explain

Less is more understated than Sass's high-profile statement. See below on the official website

Official address: Less Chinese Network

What is Less

Now that you know what Sass is, you're confident that you'll get a clearer picture of what Less is. It's also a weapon of CSS to make CSS even more powerful. (I feel a bit rustic about what I've been saying lately)

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

Summary: Since the authorities are so concise and low-key, there's no need to be too much fancy

Install Less

You can use npm to install Less.

npm install -g less

Also available in browsers

<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

Variables are of course 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, the use of variables is directly put into the corresponding value.

Scope of variables

Sass variables are actually scoped. The scope of a Sass variable can only be effective at the current level, if it is not currently found, as if it were found on a parent node

@myColor: red;

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

Nested Rules for Less

This is a good thing to write about and the most obvious addition.

nesting

Nested or just looking 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;
}

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 is placed first and the relative order of the 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 expected. You can import a.less file where all variables are used. If the imported file has a.less extension, the extension can be omitted.

Now don't ask why you want to use the import file method, ask is convenient! That's the fragrance! Instant noodles: delicious???

grammar

@import filename; //less Omittable
@import "filename.css";

Mixed Mixins

Mixin 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 a common class style?

Use mixing

.text {
  .important-text();
}

less uses mixing, which is quite arbitrary and very useful!

Maps

Beginning with 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 Less's mapping very 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;
}

Write in the last words

After writing Sass, I wrote less, found a lot in common, but also a lot of differences, and browsed through my sensory knowledge again. With Less, if your application needs to use multiple themes, consider using less.

Thank

Universal Network

And a hard-working self, Personal Blog，GitHub Test，GitHub

Public Number - Guizimo, Applet - Xiaogui Blog