sass与less的区别？Stylus又是啥？
sass与less的区别？Stylus又是啥？
一、总结
一句话总结：
Less、Sass 和 Stylus是比较流行的CSS预处理器，功能都差不多，写法相差也不大（但是也有差别），使用都非常简单，stylus是没有大括号({})和分号(;)
1、比较流行的CSS预处理器？
Less、Sass 和 Stylus；
2、sass和scss有什么区别？
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
3、Less、Sass 和 Stylus 的具体区别板块？
1、基本语法；2、嵌套语法；3、变量；4、@import；5、函数
二、sass与less的区别？Stylus又是啥？
转自或参考：sass与less的区别？Stylus又是啥？
https://www.cnblogs.com/webcabana/p/11260203.html
现在写样式大家基本上都会用上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返回值；
敲黑板时间到：
我们今天说的只是一些平时比较常用的功能，且简单组合的方式，在样式预处理器这块，还有很大的内容需要大家去逐步了解；
