当前位置:  首页  >  前端开发  >  CSS+DIV

sass与scss之间的区别是什么

区别是:sass语法类似于rubby,它没有括号的用法,没有严格的缩进,没有分号;变量符号是“!”而不是“$”,赋值符号是“”而不是“:”。less语法类似于CSS,需要使用大括号,使用分号;变量符号是“$”,赋值符号是“:”。
sass和scss是CSS预处理器Sass提供的两种不同的语法,两者相似并且都做同样的事情,但是以不同的风格书写。SCSS是最新的,被认为比Sass更好。

它是来自另一个名为Haml的预处理器,受Haml的简洁启发,是由Ruby开发人员设计和编写的,因此,Sass样式表使用类似Ruby的语法。没

sass适用于那些喜欢与CSS相似的简洁性的人。它使用行的缩进来指定块,而不是括号和分号,因此有括号,没有分号和严格的缩进。sass语法中的文件使用扩展名.sass。

例:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius.my-element
  color= !primary-color
  width= 100%
  overflow= hidden.my-other-element
  +border-radius(5px)

正如我们所看到的,与常规CSS相比,这是一个相当大的变化!变量标志是“!”不“$”,分配符号“=”,而不是“:”,这样有点奇怪!

但这是Sass在2010年5月3.0版到来之前的样子,之后Sassy CSS引入了一种名为scss的全新语法。这种语法旨在通过引入CSS友好语法来缩小Sass和CSS之间的差距。

scss,类似与CSS的语法,完全符合CSS标准,

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}
.my-other-element {
  @include border-radius(5px);
}

scss绝对比sass更接近CSS。

scss和sass之间的区别

sass语法类似于rubby,它没有括号的用法,没有严格的缩进,没有分号;变量符号是“!”而不是“$”,赋值符号是“=”而不是“:”。

less语法类似于CSS,需要使用大括号,使用分号;变量符号是“$”,赋值符号是“:”。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

以上就是sass与scss之间的区别是什么的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有