对比less聊scss（2）：变量和数据类型

在less中，声明变量使用@符号，而scss也有用到@符号，这也是以后的篇章要讲的关键字的符号。

而scss中的变量则是用$符号来标记变量，是不是让程序员倍感熟悉的符号啊~~（很多linux支持的语言变量都是$来定义，包括linux-shell）

 

然而，和less不同的是，scss新增了几种数据类型。在这点要比less高明很多，因为less的数据类型很模糊。下面分别对比一下两者：

less：

数字 -> 1em、2、4px、6deg、10%

颜色 -> #FF0、#FCFCFC、blue、rgba(9,9,9,0.5)

字符串 -> "content"、-class

布尔型 -> true、false、所有非true变量均为false

 

scss：

 

 

1、不同单位类型的运算

--> scss

转换后：

下面是注释部分报错内容：

从上面的测试得出下面结果：

第一组：不同单位 -> 加减乘除 -> 报错

第二组：相同单位

　　-> 除 -> 不报错 -> 转换后无单位

　　-> 乘 -> 报错

　　-> 加减 -> 运算正确

第三组：有单位与无单位的运算 -> 加减乘除 -> 运算正确

第四组：有单位数值与字符串运算 -> 字符串中是数值

　　-> 加：连接符号，并且把连接后的变量加上了双引号

　　-> 减：直接组合

　　-> 乘除：可以运算

第五组：有单位数值与字符串运算 -> 字符串是非数值

　　-> 加：同样是连接符

　　-> 减、除：直接连接

　　-> 乘：报错

 

例子还有很多，不过按照上面的例子来看，scss对变量类型做了很明确的分类，这点less就十分模糊。

 

--> less

转换后：

less对加减乘除的运算带单位不带单位都可以运算，单位不同的以第一个单位为准。

如果是数值和字符串，就无法运算了，加减作为连接符（是用于连接多个属性值的），而乘除则会报错。

 

2、字符串的连接 #{}

--> scss

scss可以通过#{}的方式使字符串做任意的连接，我们有下面两种连接方式： 

#{$a}#{$b}-name 等同于 #{$a + $b}-name 等同于 #{$a + $b "-name"}

#{}中的变量会自动过滤两边的引号

转换后：

而scss还可以这么玩，但less却不可以

结果：

 

--> less

最后是less只能做下面这种简单的字符串拼接

结果：

属性名：less、scss都可以拼接

选择器名：less只能拼字段，无法拼选择器符（.#>,），scss可以

属性值：less不可以拼，scss可以

变量双引号：less无法消去，scss可以

 

3、颜色的调色盘

--> scss

结果：

 

--> less

结果：

总结：

就颜色运算来看，less的观赏性不如scss，但less功能上要优于scss。

颜色加减：scss带alpha通道的无法运算，less都可以

颜色乘除：scss关键字常量（blue）无法运算，less都可以

但scss会保留颜色书写的格式，而less都会转换成6位16进制码。

 

 4、布尔运算

scss提供了布尔运算符，可以进行布尔运算，而less只能在 when 的mixin中才能用来判断，且不能连续和嵌套。

scss中 非 null和false 的变量和值都会判定为 true；

less中 非 true 的变量和值都会判定为false。

下面只例举scss的布尔运算，因为less中不存在布尔运算：

结果：

 

5、其他的类型

scss中除了上面传统的几种类型外，还比less多出 null值类型、数组类型、map类型。

以后的文章我会通过scss的判断循环来详细讲解布尔运算、数组和map。