Less

Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making CSS easier to maintain and expand. It is not a language for direct use, but a language for CSS generation. Less can run on Node or in a browser.

NPM install -g less Use :lessc *.less > *.cssCopy the code

1.variable

  • @ name: value;Value is printed exactly as it is. Don’t forget the last quote
  • Both selector and attribute names can be in variable format:@{name}, you can add content before and after
  • When a variable appears in a string, the format is:"@ {name}..."
  • Can be#or.The selector at the beginning is passing#name()or.name(Used directly, with or without parentheses)
  • You can use one variable as the name of another variable,@@name,@nameWill become the name that references the variable
  • A value can be a specific value or a set of attributes
  • Variables can also perform four operations without involving non-numeric content, such as 100px+1=101px, where 100px can also be a variable
  • Variables follow the proximity rule, and you can override external variables by defining them directly in a property set or function
1.1. Attribute name and value
Statement: @ border - name: border; @border-value:1px solid red; @a:1px; @b:solid; @c:red; @bc:{background:red; }; Use: @ {border - name} : @ border - value; border: @a @b @c; @bc();Copy the code
1.2. Url Variables (in quotes)
Disclaimer: @ images:".. /img"; Use: background - the image:"@{images}/1.jpg";
Copy the code
1.3. Single or multiple attribute sets
Statement: @ style - the list: {background:red; color: white}; Use: @ style - the list ();Copy the code
1.4. Variables of variables
Disclaimer: @ front:"xixi";
         @current: "front"; Use: width: @ @ current;// "xixi"
Copy the code

1.5. Selector variables

  • Selector variables need curly braces ({})
  • Variables can be preceded by selection operators.
Disclaimer: @ name: the main; Use: @{name}{} #{name}{}.{name}{}Copy the code

**1.6 variable operations: ** can perform four operations on variables

  • There must be Spaces on both sides of the subtraction operation. You can also use the + (-n) format
  • You can also manipulate colors
  • You can also perform operations between variables
  • The division operation must be done inside curly braces
Disclaimer: @ width: 300 px; @color:#111;
     @height:80; Use: width:(@width +1 - 1) *2; => 600px
     color: @color+#222; = > #333333
     height:@height*1%; = >80%
     height:(@width/2) = > 150px
Copy the code

2,nested

2.1, the common
a{
  #b{
    .c{
      color: red; // a #b .c{}
    }
  }
  div{}   => a div
  >div{}  => a > div
}
Copy the code
2.2 ampersand
  • Represents the name of the selector at the previous level. The match ignores the Spaces between the selectors
  • Pseudo classes are often used
#header{
    .title{     // #header .title
        font-weight:bold;
    }
    &.title{     // #header.title font-weight:bold; }}Copy the code
2.3,Media queries
body{
  background-color: yellow;
  @media screen {
    @media (max-width: 768px) {
        background-color: red;
         >div{color: red; } } @media (max-width: 612px) { background-color: blue; }}} body {background-color: yellow; } @media screen and (max-width: 768px) { body { background-color: red; body > div {color: red; } } } @media screen and (max-width: 612px) { body { background-color: blue; }}Copy the code

3,function

  • Format:.name(@arg1:10px,... args){}, function parameters are in the form of variables, function names are not allowed to contain variables, the function will have promotion
  • The function can specify a default value, which is used when there are no arguments. If no default value is specified, all values must be passed
  • When arguments have default values or no arguments, use the function without writing ()
  • Can be used when the parameter is uncertain.Instead, used when called@argumentsGet all, like JS.
  • Functions can be overloaded, that is, they have the same name but an inconsistent number of arguments
  • When a function is repeated, it is called in the order defined
  • The argument can also be a concrete string (without quotes) that is passed to the call, with @_ representing any character
  • Just add after the method name! important, all attributes that are appended will be appended! important
Statement: setSize1 (@ a, @ b) {width:@a; height:@b; } .setSize2(@a,@b:55px){ } .setSize3(@a:110px,@b:55px){} .setSize4(...) {border: @arguments; width: @a; {}}. SetSize5 (left). SetSize5 (right) {}. SetSize5 (@ _) {} use: .setSize1(110px,20px) .setSize2(110px) .setSize3(11px,5px) .setSize3(11px) .setSize3() .setSize3 .setSize4(1px,solid,red); .setSize5(right)// Call.setsize5 (right) and.setsize5 (@_)
Copy the code

  • The function is followed by when condition… Where, AND,, AND not respectively represent AND or not. If the conditions are not met, the output will not be

  • The comparison operation is as follows:

    >, >=, =, =<, <, =Copy the code

    It stands for theta is equal to theta

    .if(@width,@height) when not (@width<100px),(@height>100) {width: @width; height: @height; } If either @width or @height is greater than 100px, the set of attributes will be outputCopy the code

4, other

4.1,! important
  • Method with important added after the method, which means that every attribute in the method is set to important
4.2,@import

  • Using @import “name” will automatically import a.less file named name. You can also import CSS, which is CSS syntax

  • After the import, the current less file can use the imported file variables, functions and other operations

  • @import

    The back can be modified,

    @import(modified)"name"
Copy the code
    • Reference: Will introduce but will not modify
    • Once: The same file is imported only once (default) and the same CSS is generated only once
    • Multiple: Allows you to import multiple files with the same name, generating the same CSS
4.3 Splicing attributes of the same name
  • The + stands for comma
  • The +_ is the space
.border(){
  border+_: 1px;
}
main{
  box-shadow+: inset 0 0 10px #555;
  box-shadow+: 0 020px black; .border(); border+_: solid red; } main {box-shadow: inset0 0 10px #555.0 0 20px black;
  border: 1px solid red;
}
Copy the code
4.4, inheritance,
  • use& : the extend (... The selector)Inheritance can be implemented by appending the current selector after the selector to be inherited, and methods are introduced into the current property set
  • The default value does not inherit the selector’s attribute selection; if you want to inherit, you can add all after the required selection
.border{
  border: 1px solid red;
  .img{
    max-width: 10px;
  }
}
div{
  .border;
  width: 100px;
}
div{
  &:extend(.border);
}
// div:extend(.border){} is equivalent to the aboveBorder, div {border: 1px solid red;
}
// If use &:extend(.border all); So the following becomes.border. Img, div.img
.border .img { 
  max-width: 10px;
}
div {
  border: 1px solid red;
  width: 100px;
}
Copy the code
4.5. Built-in methods

See the official website: lesscss.cn/functions/

  • percentage(@number); // Convert the number to a percentage, such as 0.5 -> 50%
  • round(number, [places: 0]); // Ceil, floor, SQRT, ABS, POW, etc
  • isnumber(value); // Check if it is a number
  • …
  height: percentage(0.1); / / 10%
  width: round(0.5); / / 1
  width: isnumber(100px) ; // true
  width: isnumber(red) ; // false
  color: iscolor(red); // true
Copy the code