A detailed explanation of less grammar

Experience

CSS may be the most annoying part of me before I touch less, because it often involves writing a large number of seemingly illogical code that is inconvenient to maintain and extend and is not conducive to reuse. And I have to think about how to write CSS code that is well organized and easy to maintain. Unlike Javascript,java languages, CSS is a non programming language, with no variables, functions, scopes and other concepts. So for me, accustomed to oop, seemingly illogical code means heavy manual labor. Until I met less, it introduced variables, blending, operations, and functions, based on the syntax of CSS. simplifies the use of CSS, reduce the cost of CSS maintenance, so that the CSS programmable, so that the code more elegant, with less CSS code to do more things introduction

What is less? Less is a dynamic style language . As a form of CSS extension, it does not reduce the functionality of CSS, but in the existing CSS syntax, for CSS to add the characteristics of the programming language. Less contains a set of custom syntax and a parser that the user can use to define their own style rules, which will eventually be compiled with the parser to generate the corresponding CSS file benefits

(1) The real role of less is to convert CSS using advanced features into standard CSS. These are done by the HTTP request when the Web client initiates the request, or it can be done at the time of editing

(2) Less can be configured to automatically minimize the generated CSS file, which is conducive to saving bandwidth

(3) Less need to write the amount of code significantly less

(4) With CSS can be very good integration of the use of

(5) Easier to manage CSS. When you need to change the style of the Web site, if you directly rewrite these styles, the workload will be very vast, but with less is very simple, change the global configuration can be

(6) less compatible CSS3. CSS3 Grammar currently needs to write special syntax for each browser, such as rounded corners, box shadow, deformation, transition, etc., if the code used less first packaged, use will be much easier

How to quickly start less, you can refer to my another blog--less simple application
http://blog.csdn.net/iamcgt/article/details/73005964 syntax variables

(1) You can assign the value of a property to a variable, which is a complete "constant", so you can define only one

For example:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {color: @light-blue;}

Results

#header {color: #6c94be;}

(2) The variable name can also be defined as a variable

For example:

@fnord: "I am Fnord."
@var: ' Fnord ';
Content: @ @var;

Results

Content: "I am Fnord."

Mixed

Define some common set of attributes as one class and then call these properties in another class. Any class, ID, or element attribute set can be introduced in the same way

For example:

. bordered {
  border-top:dotted 1px black;
  Border-bottom:solid 2px black;
}
#menu a {
  color: #111;
  . Bordered
}
. Post a {
  color:red;
  . bordered;
}

Results

#menu a {
  color: #111;
  border-top:dotted 1px black;
  Border-bottom:solid 2px black;
Post a {
  color:red;
  border-top:dotted 1px black;
  Border-bottom:solid 2px black;
}

mixed with parameters

(1) You can define a set of attributes with parameters like functions

For example:

. Border-radius (@radius) {
  Border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  . Border-radius (4px);
}
. button {
  . Border-radius (6px);  
}

(2) You can also set default values for parameters

For example:

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

(3) You can also define a collection without parameter attributes to hide this collection of attributes from exposing it to CSS

For example:

. Wrap () {
  text-wrap:wrap;
  White-space:pre-wrap;
  White-space:-moz-pre-wrap;
  Word-wrap:break-word;
}

Pre {. Wrap}

Results

Pre {
  text-wrap:wrap;
  White-space:pre-wrap;
  White-space:-moz-pre-wrap;
  Word-wrap:break-word;
}

(4) The @arguments contains all the parameters passed in. You do not have to process each parameter individually

For example:

. Box-shadow (@x:0, @y:0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
Box-shadow (2px, 5px);

Results

box-shadow:2px 5px 1px #000;
  -moz-box-shadow:2px 5px 1px #000;
  -webkit-box-shadow:2px 5px 1px #000;

Pattern Matching

(1) Change the default rendering of the blend according to the parameters passed in

For example:

Let. Mixin varies according to the @switch value
. mixin (Dark, @color) {
  Color:darken (@color, 10%);
Mixin (light, @color) {
  Color:lighten (@color, 10%);
Mixin (@_, @color) {
  display:block;
}

Running
@switch: light;

class {
  . mixin (@switch, #888);
}

Results

. class {
  color: #a2a2a2;
  Display:block;
}
/*
mixin will get the light color of incoming colors. If the @switch is set to dark, it will get dark. The

concrete implementation is as follows: The
first mixed definition is not matched because it only accepts dark as the
second mixed definition is successfully matched because it only accepts light the
third mixed definition is successfully matched because it accepts arbitrary values

Only a matching blend is used. A variable can match any incoming value, and a fixed value other than a variable will only match an incoming value that is equal to it.
*/

(2) can also match multiple parameters

For example:

. Mixin (@a) {
  color: @a;
}
. Mixin (@a, @b) {
  color:fade (@a, @b);
}

leader Expression

(1) match according to expression, not match by value and parameter

For example:

When keyword is used to define a guide sequence (this example has only one leader)
. Mixin (@a) when (Lightness (@a) >= 50%) {
  background-color:black;
}
. Mixin (@a) when (Lightness (@a) < 50%) {
  background-color:white;
}
. Mixin (@a) {
  color: @a;
}

Run
. Class1 {. Mixin (#ddd)}
. class2 {. Mixin (#555)}

Results

. class1 {
  background-color:black;
  Color: #ddd;
Class2 {
  background-color:white;
  Color: #555;
}

(2) All the comparison operations available in the Guide are: > >= = =< <. In addition, the keyword True only represents a Boolean truth value, except that values other than the keyword true are viewed as Boolean false

For example:

. Truth (@a) when (@a) {...}
. Truth (@a) when (@a = True) {...}

(3) The guide sequence uses a comma ', '-split, which is considered a match success only if all conditions are met

For example:

. Mixin (@a) when (@a >), (@a <-10) {...}

(4) The guidance can be without parameters, and can be compared to the parameters of the operation

For example:

@media: Mobile;

Mixin (@a) when (@media = Mobile) {...}.
Mixin (@a) when (@media = Desktop) {...}.

Max (@a, @b) when (@a > @b) {width: @a}
. Max (@a, @b) when (@a < @b) {width: @b}

(5) If you want to match based on the type of the value, you can use the is* function

For example:

. Mixin (@a, @b:0) when (Isnumber (@b)) {...}
. Mixin (@a, @b:black) when (IsColor (@b)) {...}

(6) Common detection function:

IsColor

Isnumber

Isstring

Iskeyword

Isurl

To determine whether a value is a pure number or a unit amount, you can use the following function:

Ispixel

Ispercentage

Isem

(7) Using and keyword implementation and conditions

. Mixin (@a) when (Isnumber (@a)) and (@a > 0) {...}

(8) Using the NOT keyword to implement or condition

. Mixin (@b) when not (@b > 0) {...}

Nesting Rules

(1) Writing cascading styles in a nested manner

For example:

Css

#header {color:black;}
#header. Navigation {
  font-size:12px
}
#header. logo { 
  width:300px; 
}
#header. logo:hover {
  Text-decoration:none
}

Less

#header {
  color:black;

  . Navigation {
    font-size:12px
  }
  . Logo {
    width:300px;
    &:hover {Text-decoration:none}}}

Or

#header        {color:black;
  . Navigation  {font-size:12px}
  . logo        {width:300px;
    &:hover    {Text-decoration:none}}}

(2) The & symbol is used to write a series selector instead of a descendant selector. This is especially useful for pseudo classes, such as: hover and: Focus

For example:

. bordered {
  &.float {
    float:left 
  }
  . Top {
    margin:5px 
  }
}

Results

. bordered.float {
  float:left  
}
. Bordered. Top {
  margin:5px
}

Operation

(1) Any number, color or variable can participate in the operation

For example:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

Color: #888/4;
Background-color: @base-color + #111;
height:100%/2 + @filler;

(2) Less operation can distinguish color and unit

For example:

@var: 1px + 5;  Less output 6px

//brackets also allow width to be used
: (@var + 5) * 2;

You can perform operations in a composite property
border: (@width * 2) solid black;

Color function

(1) Less provides a series of color operation functions. Colors are first converted to HSL color space and then operated at the channel level

Lighten (@color, 10%);     Returns a lighter color

darken (@color, 10%) than the @color lower 10%;      Returns a darker color

saturate (@color, 10%) than the @color height of 10%;    Returns a color
desaturate (@color, 10%) that is 10% more than the @color saturation;  Returns a color

Fadein (@color, 10%) of less than @color saturation 10%;      Returns a color
fadeout (@color, 10%) with less than @color 10% opacity;     Returns a color
fade (@color, 50%) that is 10% more transparent than @color;        Returns a color with a color transparency of 50%

(@color, spin);         Returns color

spin (@color, -10) with a hue greater than @color 10 degrees;        Returns a color

mix (@color1, @color2) that is smaller than the @color 10-degree hue;    Returns the color of a blend @ color1 and @ Color2

Use

@base: #f04615;

class {
  color:saturate (@base, 5);
  Background-color:lighten (Spin (@base, 8), 25%);

(2) can also extract color information

Hue (@color);      
Saturation (@color); 

(3) You can also create another color on a channel of one color

@new: HSL (Hue (@old), 45%, 90%);

Math function

Less provides a convenient set of mathematical functions that you can use to process values of some numeric types

Round (1.67); Returns ' 2 '
ceil (2.4);   Returns ' 3 '
floor (2.6);  Returns ' 2 '
percentage (0.5);//returns ' 50% '

name Space

In order to better organize CSS or simply for better encapsulation, some variables or mixed modules are packaged

For example:

#bundle {
  . button () {
    display:block;
    border:1px solid black;
    Background-color:grey;
    &:hover {background-color:white}
  }.
  tab {...}.
  Citation {...}}
}

Use

#header a {
  color:orange;
  #bundle > button;

Scope

The scopes in less are very similar to other programming languages, first looking for variables or mixed modules locally, and if they're not found, they look in the parent scope until they find it.

For example:

@var: red;

#page {
  @var: white;
  #header {
    color: @var;//White
  }
}

#footer {
  color: @var;//Red  
}

Notes

CSS-style annotations are still retained in less, less also support double slash annotations, but are automatically filtered when compiled into CSS

For example:

/* Hello, I ' m a css-style comment
/. class {Color:black}

//Hi, I ' m a silent comment, I won ' t show up R CSS
. class {Color:white}

Importing

(1) You can introduce the. less file in the main file by introducing the following situation,. The less suffix can be brought without

For example:

@import "Lib.less";
@import "Lib";

(2) If you want to import a CSS file and do not want to less it, just use the. css suffix so that less will skip it and not deal with it.

@import "Lib.css";

string Interpolation

Variables can be embedded into strings in a way that is similar to Ruby and PHP

For example:

@base-url: "http://assets.fnord.com";
Background-image:url ("@{base-url}/images/bg.png");

Avoid compiling

Sometimes we need to output some incorrect CSS syntax or use some proprietary syntax that less don't know. To output such a value we can add a ~ to the string, and we're going to avoid compiling the value with "" included

For example:

. class {
  filter: ~ "Ms:alwaysHasItsOwnSyntax.For.Stuff ()";
}

Results

. class {
  filter:ms:alwaysHasItsOwnSyntax.For.Stuff ();
}

JavaScript Expressions

(1) JavaScript expressions can also be used in. less files. Can be used in reverse quotes

@var: ' Hello '. toUpperCase () + '! ' `;    @var: "Hello!";

(2) You can also use string interpolation and avoid compiling

@str: "Hello";
@var: ~ ' @{str} '. toUpperCase () + '! ' `; @var: hello!;

(3) You can also access the JavaScript environment

@height: ' Document.body.clientHeight ';

(4) parsing a JavaScript string into a 16-color value, you can use color functions

@color: Color (' Window.colors.baseColor ');
@darkcolor: Darken (@color, 10%);

Reference

http://www.bootcss.com/p/lesscss/#docs