css extension technology: the difference between Less and Sass_html/css_WEB-ITnose

This week I studied the two CSS frameworks of Less and Sass. I basically understood their respective syntax and characteristics, and through two HTML web design exercises, I felt what they bring to us developers. Convenience brought by css web page layout process. Below is some summary of my differences between them.

The similarities between Less and Sass:

1. Variables: You can define a series of common styles separately, when needed call.

2. Mixins: class in class (introducing one class into another class to realize inheritance between classes), and can also be mixed with parameters, Just like functions.

3. Nesting: Nest classes within classes, thereby reducing code duplication.

4. Operations: provides four arithmetic operations: addition, subtraction, multiplication and division, which can perform operations on attribute values ​​and colors.

The difference between Less and Sass:

1. Implementation method: Less is based on JavaScript and is It is processed on the client side; Sass is based on Ruby and is processed on the server side.

2. Define variables: Less uses the prefix: @ when defining variables; Sass uses the prefix: $ when defining variables.

//Less定义变量：@color: #4D926F;#header {    color: @color;}//Sass定义变量    $blue : #1875e7;　        　　div {    　　　color : $blue;    　　}

3. Mixins: When using mixins in Less, just name them in classB according to classA Yes; in Sass, you first need to use the @mixin command when defining a mix, and secondly, you need to use the @include command when calling to introduce the previously defined mix.

//Less中的混合：.rounded-corners (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    -ms-border-radius: @radius;    -o-border-radius: @radius;    border-radius: @radius;}#header {    .rounded-corners;}#footer {    .rounded-corners(10px);}//Sass中的混合： @mixin left($value: 10px) {    　　　　float: left;    　　　　margin-right: $value;    　　}    div {    　　　　@include left(20px);    　　}

4. Parsing method: Less can be parsed upward/downward; Sass can only be parsed upward.

5. Scope of variables: Variables in Less are divided into global and local; Sass variables can be understood as being global, but you can follow the variable by! default, change the attribute value of the variable before importing it into the Sass file to solve this problem.

//Less：@width:100px;h1{  @width:200px;  width:@width;}h2{  width:@width;}编译后：h1 {  width: 200px;}h2 {  width: 100px;}//Sass：$borderColor:red !default;.border{  border:1px solid $borderColor;}编译后：.border {  border: 1px solid red; }

6. Compared with Less, Sass has added conditional statements (if, if...else) and loop statements (for Loops, while loops and each loops) and custom functions:

//if条件句：    p {    　　　　@if 1 + 1 == 2 { border: 1px solid; }    　　　　@if 5 < 3 { border: 2px dotted; }    　　}//if...else条件句：    @if lightness($color) > 30% {    　　　　background-color: #000;    　　} @else {    　　　　background-color: #fff;    　　}//循环语句：//for循环：    @for $i from 1 to 10 {    　　　　.border-#{$i} {    　　　　　　border: #{$i}px solid blue;    　　　　}    　　}//while循环：    　$i: 6;    　　@while $i > 0 {    　　　　.item-#{$i} { width: 2em * $i; }    　　　　$i: $i - 2;    　　}//each循环，类似于for循环：    @each $member in a, b, c, d {    　　　　.#{$member} {    　　　　　　background-image: url("/image/#{$member}.jpg");    　　　　}    　　}//自定义函数：    @function double($n) {    　　　　@return $n * 2;    　　}        　　#sidebar {    　　　　width: double(5px);    　　}

The above is my understanding of the difference between Less and Sass Summarize. They are all cool tools for developers, and they can also help developers work more efficiently and quickly. As for which one you choose to use, you can flexibly use one or two of them according to your own preferences or the requirements of the company you work for.