Sass and less the difference? Stylus is what?

　　Now it will basically spend writing style CSS pre-processor, and the processor is the more popular of the three pre-brother of Less , Sass and Stylus ;

　　Prior to this, we first understand a little, sass and scss What is the difference?

　　SCSS Sass 3 is the introduction of new grammar, the syntax is fully compatible with CSS3, and inherited the powerful features of Sass.

　　Sass and SCSS is in fact the same thing, we usually have to call Sass, the difference between the two place the following two points:

　　　　1, different file extensions, Sass is ".sass" suffix extension, and SCSS is ".scss" suffix extension

　　　　2, different syntax notation, Sass is indented strict grammar rules to write, without braces ({}) and semicolon (;), and SCSS grammar and writing our CSS syntax notation is very similar.

　　Sass behind the code given by the SCSS more people accepted style;

　　OK, ready, we'll talk about a few of their difference from the Today of course we just say some of the more commonly used functions today, they themselves are exceptionally rich expansion features:

　　The basic syntax
　　Nested syntax
　　variable
　　@import
　　function

　　First, the basic grammar　　

　　Less & SCSS：

.div{
    color: #000;
}

　　Stylus：

.div
    color: #000

　　Difference: less and scss no difference, stylus is not braces ({}) and the semicolon (;);

　　Second, nested syntax

　　Less & SCSS：

.box {
  &.item {
    color: #000;
  }
}

　　Stylus：

.box 
  &.item 
    color: #000

　　Differences: nested syntax of the three are the same, even the reference to the parent selector mark & the same. Only difference braces ({}) and the semicolon (;);

　　Third, variable

　　Less：

@pink: #FFB6C1;

.div {
  color: @pink;
}

　　Sass：

$pink: #FFB6C1;

.div {
  color: $pink;
}

　　Stylus：

pink = #FFB6C1;

.div 
  color: pink;

　　Differences: Set and reference variables are obvious;

　　Four , @ import

　　Less：

@import (option) filename;

optional:

reference: The use of less file but does not export it 
inline: output included in the source file, but not to deal with 
less: less this file as file, regardless of their extension Why 
css: css file as the file, regardless of extension Why 
once: this file can be imported only once (default) 
multiple: the file can be imported more than once 
optional: when a file is not found yet compiled

　　Sass：

@import  filename;

　　Stylus：

@import  filename;

　　Difference: three formal basically not much different, less more options, but there are some differences on the handling behavior.

　　　　　less extended syntax @import native, and if the file is an extension of .css, and will be treated as CSS @import statements remain intact, if treated as additional extension will import less;

　　　　　Similarly stylus and less, when using @import is not .cssextended, will be considered Stylus fragment;

　　　　　sass is a bit different, it is not extended syntax, but his infer how the introduction of rules are as follows:

　　　　　　　　By default, it will look for Sass and introduced directly into the file, however, in a few cases, it will be compiled into the CSS @import rule:

- - 　If the file extension is .css.
  - 　If the file name with http: // at the beginning.
  - 　If the file name is a url ().
  - 　If @import include any media queries (media queries).

　　　　　　　　If this did not appear, and the extension is .scss or .sass , the name or SCSS Sass file will be introduced . If no extension , Sass will try to find files with the same name or extension .sass of .scss and introduced.

　　Five , function

　　Less：

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

.box{
    .border-radius(10px)
}

　　Sass：

@mixin border-radius {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.page-title {
  @include border-radius;
  padding: 4px;
  margin-top: 10px;
}

//含参数
@function widthFn($n) { 
　　@return $n * 40px + ($n - 1) * 10px; 
} 
.leng { 
　　width: widthFn($n : 5); 
}

　　Stylus：

golden-ratio(n)
  n * 0.618

.golden-box
  width: 200px
  height: golden-ratio(@width)

　　Difference: sass vary widely, using keywords to be displayed to call, and when non-mixin, you need to return the return value;

　　Time to knock the blackboard:

　　 We say today just some usually more commonly used functions, and simple combination of fashion, style preprocessor in this piece, there is still much we need to develop an understanding of the content;

Sass and less the difference? Stylus is what?

Guess you like