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

2024-03-12 11:49:32

　　现在写样式大家基本上都会用上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返回值；

　　敲黑板时间到：

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

码农公寓

相关文章