下面我们先来了解一下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版到来之前的样子，之后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。

 

　　scss和sass之间的区别

 

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

 

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

 

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




本文转载自中文网