Introduction and difference of dynamic style language scss&less

A. What is Sass/scss&less?

Sass (syntactically Awesome stylesheets) is a dynamic style language that has the same syntax as CSS (but has more features), is better written than CSS, and is easier to read. Sass syntax is similar to Haml, which is indented syntax (makeup), intended to write HTML and CSS quickly.

less a dynamic style language. CSS is given the characteristics of dynamic language, such as variables, inheritance, operations, functions. Less can be run either on the client (ie 6+, Webkit, Firefox) or on the server (with the help of Node.js). Less English station needs to turn over the wall, also can visit the Chinese station

What's the difference between sass and scss?

Sass originally with Haml the same indentation syntax, for the front-end to write CSS is very intuitive, and can not add the original CSS to the Sass inside, so Sass improved syntax, Sass 3 became SCSS (Sassy CSS). Compatible with the original syntax, just replace the original indentation with {}.

Sass

. Content
  margin:10px Auto
  H1
    font-size:24px;

Scss

. content{
  margin:10px Auto
  h1{
    font-size:24px;
  }

Two. Sass/scss&less difference?

1.Sass is based on Ruby, is processed on the server, and less is the need to introduce less.js to deal with less code output CSS to the browser, can also be used in the development of less, and then compiled into a CSS file, directly into the project, there are Less.app, Tools such as Simpleless and Codekit.app also have an online compilation address.

2. Variable characters are not the same, less is @, and Scss is $, and the scope of the variable is not the same, the following will be mentioned.

3. Output settings, less no output settings, SASS provides 4 output options: Nested, compact, compressed and expanded.

4.SASS supports conditional statements, you can use if{}else{},for{} loops, and so on. And less does not support it.

/* Sample Sass "If" statement * * *

@if lightness ($color) > 30% {
  background-color: #000;
} @else {
  backgr Ound-color: #fff;
}

/* Sample Sass "for" Loop * *
@for $i from 1 to ten {
  . border-#{$i} {
    border: #{$i}px solid blue;

Three. Common features of Sass/scss&less

1. Variable

Allows us to define a common style individually so that it can be invoked in CSS.

Less variable

@color: #4d926f;
#header {
  color: @color;
}
h2{
  color: @color;
}

SCSS variable

$color: #4d926f;
#header {
  color: $color;
}
h2{
  color: $color;
}

Post-compiled CSS

#header {color: #4d926f;}
H2{color: #4d926f;}

2. Mixing

Blending can easily introduce a well-defined class A into another class B, thus simply implementing Class B inheriting all the attributes in Class A. We can also call with parameters, just like we use functions.

Less mixing

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

#header {
  . rounded-corners;
}
#footer {
  . rounded-corners (11px);
}

SCSS Mixing

@mixin rounded-corners ($radius: 5px) {
  Border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#header {
  @include rounded-corners;
}
#footer {
  @include rounded-corners (11px);
}

Post-compiled CSS

#header {
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
}
#footer {
  border-radius:11px;
  -webkit-border-radius:11px;
  -moz-border-radius:11px;
}

3. Nesting

We can nest another selector in one selector to implement inheritance, which greatly reduces the amount of code and the code looks clearer.
Less nesting

#header {
  h1 {
    font-size:26px;
    Font-weight:bold;
  }
  p {font-size:12px;
    a {text-decoration:none;
      &:hover {border-width:1px}}}}

Scss nesting

#header {
  h1 {
    font-size:26px;
    Font-weight:bold;
  }
  p {font-size:12px;
    a {text-decoration:none;
      &:hover {border-width:1px}}}}

Post-compiled CSS

#header H1 {
  font-size:26px;
  Font-weight:bold;
}
#header p {
  font-size:12px;
}
#header p a {
  text-decoration:none;
}
#header p a:hover {
  border-width:1px
}

3. Functions & Operations

Operations provide addition, subtraction, multiplication, and addition operations; We can do property values and color operations so that we can implement complex relationships between property values.
Less function operation

@the-border:1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  Border-left: @the-border;
  Border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  Border-color:desaturate (@red, 10%);

scss-function operation

$the-border:1px;
$base-color: #111;
$red:        #842210;
#header {
  color: $base-color * 3;
  Border-left: $the-border;
  Border-right: $the-border * 2;
}
#footer {
  color: $base-color + #003300;
  Border-color:desaturate ($red, 10%);

Post-compiled CSS

#header {
  color: #333;
  border-left:1px;
  border-right:2px;
}
#footer {
  color: #114411;
  Border-color: #7d2717;
}

4.color function

Provides a series of color operation functions. The colors are first converted to HSL color space and then operated at the channel level:

Lighten (@color, 10%);
/* Return a color which is 10% *lighter* than @color * * *
darken (@color, 10%);
/* Return a color which is 10% *darker* than @color * * *

saturate (@color, 10%);
/* Return a color 10% *more* saturated than @color * * *
desaturate (@color, 10%);
/* Return a color 10% *less* saturated than @color * * *

Fadein (@color, 10%);
/* Return a color 10% *less* transparent than @color * * *
fadeout (@color, 10%);
/* Return a color 10% *more* transparent than @color * * *

spin (@color);
/* Return a-color with a-degree larger in hue than @color * * *
spin (@color, -10);
/* Return a color with a degree smaller hue than @color * *

SCSS also supports the color function by simply changing the @ to $.

5. Scope

less-Scopes

@color: #00c; /* Blue/
#header {
  @color: #c00/* Red/
  border:1px solid @color;
  border:1px solid @color; /* Blue Border */
}

After the less-scope is compiled

#header {border:1px solid #cc0000;}
#footer {border:1px solid #0000cc;}

scss-Scopes

$color: #00c; /* Blue/
#header {
  $color: #c00;/* Red/
  border:1px solid $color;////
}
#footer {
  bord er:1px solid $color; /* Red Border */
}

After the scss-scope is compiled

#header {border:1px solid #c00}
#footer {border:1px solid #c00}

As we can see, the variables in less and scss vary with the scope, because we redefine the color variable in #header, and the value of the variable will be different and will only be valid in that selector. All the places before or after it, if not redefined, will keep the original value.

Scopes are slightly different in sass. In the code above, when the @color variable turns red, the value of the variable after this here is rewritten (red). The above example can explain this very well.

6.Importing

File Introduction
Less-import

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

In Scss, it is also possible to import.
Scss-import

Files needing to be import must be named at the beginning of _, such as _rounded.scss
@import "rounded";

Four. SASS/SCSS Installation

SCSS installation requires a ruby environment

$ gem Install Sass

After installation, you can compile sass directly.

$ sass--watch Style.scss:style.css

There is also a sharp weapon is the top of the compass, I will use a Bovinlai introduction.

Five. Less installation use

1. Use on client

When you introduce your. Less style file, set the Rel property value to "Stylesheet/less":

Then in the less website download less.js, introduced in:

Note that your less style file must be introduced before introducing the less.js.

2. Install and use on service side

* Installation

The easiest way to install less on the server side is through NPM (node's package manager), like this:

$ NPM Install less

If you want to download the latest stable version of less, you can try something like the following:

$ NPM Install Less@latest

* Use

Use at the command line

You can invoke the less parser at the terminal:

$ LESSC styles.less

The above command will pass the compiled CSS to stdout, which you can save to a file:

$ LESSC styles.less > Styles.css

How do you want to compress the compiled CSS, then add a-x parameter to it.
Some of the compiler tools are also mentioned above, which is more convenient.