Less and SCSS

One, variable

For developers, variables should be our best friends. If you want to repeat the use of a message (in this case, color),
You can set it to a variable. In this way, you can guarantee your consistency and may reduce scrolling code to find color values,
Copy, paste and other tedious work. You can even add or subtract some of the hex values you need to render to these colors.

Take a look at the following example:

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue-#333;

Second, mixed (mixin)

Occasionally, we create style rules that are reused in style sheets. It can be done in the style sheet using less.

Example:

. border {
border-top:1px dotted #333;
}
Article.post {
Background: #eee;
. border;
}

Ul.menu {
Background: #ccc;
. border;
}
This can give you the same effect as you would add in two elements, respectively, in the bordered class--and only in the style sheet.

In Scss, you want to add a @mixin declaration before a style rule that states that it is nested. Then, call it through @include:

@mixin Border {
border-top:1px dotted #333;
}
Article.post {
Background: #eee;
@include border;
}
Ul.menu {
Background: #ccc;
@include

}

Three, the parameter mixed

As with function functions in CSS, these are useful for the extra work that is done in the current CSS. The best and most useful examples
is a lot of the browser private prefixes that we're going through during the transition from CSS2 to CSS3.

. Border-radius (@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
Border-radius: @radius;
}

In this example,. Border-radius has a default 3px fillet, but you can use any value you need: Border-radius (10px) will generate a rounded corner with a radius of 10px.

The syntax in sass is much like less, just using the $ declaration variable and then using the aforementioned @mixin and @include to invoke.

Nesting rules

Nesting class and ID in CSS is the only way to avoid interfering with your style or interfering with other styles. But it could be messy.
Using a selector similar to #site-body. Post. Post-header H2 is unattractive and takes up a lot of unnecessary space.
With less, you can nest ID, class, and tags.

Example:

#site-body {...
. Post {...
. post-header {...
H2 {...}
A {...
&:visited {...}
&:hover {...}
}
}
}
}

Less and SCSS