sass与less的区别？Stylus又是啥？

　　

　　如今写样式你们基本上都会用上CSS预处理器，而比较流行的预处理器就是这三位老哥了Less、Sass 和 Stylus；

 

　　在这以前，咱们先了解一点，sass和scss有什么区别？

　　SCSS 是 Sass 3 引入新的语法，其语法彻底兼容 CSS3，而且继承了 Sass 的强大功能。

　　SCSS 和 Sass 实际上是同一种东西，咱们平时都称之为 Sass，二者之间不一样之处有如下两点：

　　　　一、文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

　　　　二、语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。

 

　　后面的 Sass 代码会用被更多人接受的 SCSS 风格给出；

 

　　OK，准备就绪，咱们今天就从如下几点说说它们的区别，固然咱们今天只说了一些比较经常使用的功能，它们自己是有着极其丰富的扩展特性：

 

• 　　基本语法
• 　　嵌套语法
• 　　变量
• 　　@import
• 　　函数

　　

　　1、基本语法　　

　　Less & SCSS：

.div{
    color: #000;
}

 

　　Stylus：

.div
    color: #000

 

　　区别：less和scss没有区别，stylus则是没有大括号({})和分号(;)；

 

　　2、嵌套语法

 

　　Less & SCSS：

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

 

　　Stylus：

.box 
  &.item 
    color: #000

　　区别：三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同。区别也只是大括号({})和分号(;)；

 

 

　　3、变量

　　Less：

@pink: #FFB6C1;

.div {
  color: @pink;
}

 

　　Sass：

$pink: #FFB6C1;

.div {
  color: $pink;
}

　　Stylus：

pink = #FFB6C1;

.div 
  color: pink;

　　区别：变量的设置和引用都很明显；

 

　　四、@import

　　Less：

@import (option) filename;

optional:

reference: 使用该less文件可是不输出它
inline: 包括在源文件中输出，可是不做处理
less: 将该文件视为less文件，不管其扩展名为何
css: 将文件视为css文件，不管扩展名为何
once: 该文件仅可导入一次 (默认)
multiple: 该文件能够屡次导入
optional: 当没有发现文件时仍然编译

　　Sass：

@import  filename;

　　Stylus：

@import  filename;

　　区别：三者形式上基本都没有太大区别，less多了选项，可是处理行为上却有一些不一样。

　　　　　less扩展了原生的@import的语法，若是文件是.css的扩展名，将处理为CSS和@import语句保持原样，若是为其余的扩展名将处理为less导入；

　　　　　stylus与less相似，当使用@import没有.css扩展，会被认为是Stylus片断；

　　　　　sass则有点不一样，它没有扩展语法，而是本身推断引入的方式，规则以下：

　　　　　　　　默认状况下，它会寻找 Sass 文件并直接引入， 可是，在少数几种状况下，它会被编译成 CSS 的 @import 规则：

• • • 　若是文件的扩展名是 .css。
    • 　若是文件名以 http:// 开头。
    • 　若是文件名是 url()。
    • 　若是 @import 包含了任何媒体查询（media queries）。

　　　　　　　　若是上述状况都没有出现，而且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 若是没有扩展名， Sass 将试着找出具备 .scss 或 .sass 扩展名的同名文件并将其引入。

 

　　五、函数

　　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)

　　区别：sass区别较大，须要显示的使用关键字去调用，且非mixin时，须要return返回值；

 

 

　　敲黑板时间到：

　　 咱们今天说的只是一些平时比较经常使用的功能，且简单组合的方式，在样式预处理器这块，还有很大的内容须要你们去逐步了解；