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则是没有大括号({})和分号(;);文章地址https://www.yii666.com/article/332400.html

  二、嵌套语法

  Less & SCSS:

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

  Stylus:

.box
&.item
color: #000

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

  三、变量
文章来源地址https://www.yii666.com/article/332400.html

  Less:

@pink: #FFB6C1;
.div {
color: @pink;
}

  Sass:网址:yii666.com

$pink: #FFB6C1;

.div {
color: $pink;
}

  Stylus:

pink = #FFB6C1;

.div
color: pink;

  区别:变量的设置和引用都很明显;

  四、@import

  Less:网址:yii666.com<

@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片段;文章来源地址:https://www.yii666.com/article/332400.html

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

  敲黑板时间到:

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

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

sass与less的区别?Stylus又是啥?-相关文章

  1. IasS,CasS,PasS,SasS的区别

    IasS: (Infrastructure-as-a-Service(基础设施即服务))租用的是硬件,服务器,物理机等CasS: (container as a Service) 容器服务租用的是容器,以docker技术为代表PasS:(Platform-as-a-Service(平台即服务))租用的是平台,阿里云,腾讯云等SasS:(Software-as-a-Service(软件即服务))租用的是云服务,比如小

  2. varnish pipe 和pass的区别分析

    这两天在学习varnish,在学到vcl时,不理解pipe和pass的区别以及如何区分加以应用。通过两天的搜索,总算是理清了概念。现在记录在博客上跟大家分享。当 vcl_recv 函数接收到请求时,它要判断如何处理这个请求。有三种情况 :在这里,我就有几个疑惑:在理解这几个问题前,

  3. iass,pass,cass,sass,vm,container

    分布式存储hdfs 大文件,swift 对象存贮。为七牛的CDN系统目前大部分还不是自建的,采用的是整合其它CDN的方式做的。也就是说出了七牛的文件分发使用的是网宿和蓝汛的老牌CDN的分发节点,自身只做技术。 虚拟机和容器不是服务提供商提供的唯一服务。他们通常还会提供防

  4. python的continue和pass的区别

    结果:结论:continue表示跳过后面的程序,重新循环,而pass表示站位,后面的代码(else之前)还是会执行。

  5. AWS re:Invent 2014回顾

    亚马逊在2014年11月11-14日的拉斯维加斯举行了一年一度的re:Invent大会。在今年的大会上,亚马逊一股脑发布和更新了很多服务。现在就由我来带领大家了解一下这些新服务。安全及规范相关AWS Key Management Service该服务可用于管理数据加密秘钥,以及使用硬件设备来保护秘钥。它

  6. Invent 2014回顾

    AWS re:Invent 2014回顾 亚马逊在2014年11月11-14日的拉斯维加斯举行了一年一度的re:Invent大会。在今年的大会上,亚马逊一股脑发布和更新了很多服务。现在就由我来带领大家了解一下这些新服务。安全及规范相关AWS Key Management Service该服务可用于管理数据加密秘钥,以及使用硬件

  7. Iass、Pass、SasS三种云服务区别?

    Iass、Pass、SasS三种云服务区别我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼、中间、低层三大块。那么我们就可以把Iass(基础设施)、Pass(平台)、Sass(软件)理解成这栋楼的三部分。基础设施在最下端,平台在中间,软件在顶端。别的一些“软”的层可以在这些层

  8. 5分钟理解iaas paas saas三种云服务区别

    随着云计算的大热,向我咨询云计算相关问题的童鞋也越来越多,其中最近问的比较多的一个问题便是云计算中的pass是什么意思?整好今天有空,统一给大家解释下pass是什么意思?和Iass、Sass之间有什么区别呢?其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png