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

  

  现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了LessSassStylus

 

  在这之前,我们先了解一点,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返回值;

 

 

  敲黑板时间到:

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

 

上一篇:在vue-cli 3中, 给stylus、sass样式传入共享的全局变量


下一篇:vue-cli 常用命令