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

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

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

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

SCSS 和 Sass 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

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

2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

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

OK，准备就绪，我们今天就从以下几点说说它们的区别，当然我们今天只说了一些比较常用的功能，它们本身是有着极其丰富的扩展特性：

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

一、基本语法

Less & SCSS：

.div{

    color: #000;

}

Stylus：

.div

    color: #000

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

二、嵌套语法

Less & SCSS：

.box {

  &.item {

    color: #000;

  }

}

Stylus：

.box

  &.item

    color: #000

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

三、变量

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返回值；

敲黑板时间到：

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