提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > sass与scss之间的区分是什么【html5教程】,sass,scss

sass和scss是CSS预处理器Sass供应的两种差别的语法,二者相似而且都做一样的事变,但是以差别的作风誊写。SCSS是最新的,被以为比Sass更好。

下面我们先来相识一下CSS预处理器Sass供应的两种差别的语法sass和scss的相干学问。

sass,也称为缩进语法,相似于Ruby的编程言语。

它是来自另一个名为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之间的区分是什么的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"sass与scss之间的区分是什么【html5教程】,sass,scss"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线