Scss与Sass分别是什么意思

小编给大家分享一下Scss与Sass分别是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联是一家集网站建设,北川羌族企业网站建设,北川羌族品牌网站建设,网站定制,北川羌族网站建设报价,网络营销,网络优化,北川羌族网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

Sass是采用Ruby语言编写的一款CSS预处理语言;Sass能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。Scss是Sass3引入新的语法,是CSS3语法的超集,说白了Scss就是Sass的升级版。

Sass是什么

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

Sass官方网站:http://sass-lang.com

Scss是什么

Scss 是 Sass 3 引入新的语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。

由于 Scss 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 Scss 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 Scss。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进。

Scss 与 Sass异同

Sass 和 Scss 其实就是同一种东西,我们平时都称之为 Sass,两者之间不同之处主要有以下两点:

1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 Scss 是以“.scss”后缀为扩展名。

2.语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

我们不妨来看看下面两段代码,这样会更加直观,更容易理解。

简单的Sass代码

#sidebar
width: 30%
background-color: #faa

对应的Scss代码

#sidebar {
   width: 30%;
   background-color: #faa;
}

另外,SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子:

#sidebar {width: 30%; background-color: #faa}

我们不妨接着再分享几段 Scss 代码

Sass允许选择器嵌套。比如,下面的CSS代码:

div {
     h2 {
        color:blue;
    }
 }

输出的CSS样式为

div h2 {
    color: blue;
}

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

a {
    &:hover { color: #0099cc; }
}

输出的CSS样式为

a:hover {
   color: #0099cc;
}

以上是“Scss与Sass分别是什么意思”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:Scss与Sass分别是什么意思
当前网址:http://bzwzjz.com/article/picohp.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 企业网站建设 成都网站建设 高端品牌网站建设 成都网站制作 企业网站设计 达州网站设计 成都网站设计公司 成都网站设计 成都网站建设 高端网站设计 成都网站设计 网站制作 品牌网站建设 网站设计公司 移动手机网站制作 营销网站建设 网站建设 上市集团网站建设 定制网站制作 网站设计 成都网站建设 外贸营销网站建设