电话
13363039260
sass与scss之间的区别是什么
2024-01-17 15:35 小编
它是来自另一个名为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版到来之前的样子，之后SassyCSS引入了一种名为scss的全新语法。这种语法旨在通过引入CSS友好语法来缩小Sass和CSS之间的差距。
scss，类似与CSS的语法，完全符合CSS标准，
//Variable
$primary-color:hotpink;
//Mixin
@mixinborder-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{
@includeborder-radius(5px);
}
scss绝对比sass更接近CSS。
猜你喜欢
联络方式：
13363039260
微信二维码 