数据类型与运算

Less-数据类型

Less的数据类型概念比较模糊,只支持一些基本的数据类型,例如数字、字符串、布尔值、颜色

数字:1、2em、12px、50%、6deg

字符串(分为有引号无引号):"foo"、"light"、haz

布尔值:true、false

颜色:green、#F0F0F0、#333、grba(255, 255, 255, 0)

SASS-数据类型

SASS的数据类型比较强大,他有6种数据类型,除了同样的基本类型,还有数组和对象

数组list(用空格或者逗号分隔):1px 3px 0 1px; Arial, sans-serif, Helvetica

Maps(相当于js的对象):(key1: value1, key2: value2)

空值:null

Less-运算

支持加减乘除单位运算、也支持颜色运算

例如:

// 单位运算
left: 1cm + 10mm;
right: 90px - 12px;
margin-top: 5% * 2;
bottom: 90% / 3;
padding-left: 2px + 10px - 3cm;

// 颜色运算
color: #224466 / 2; // 结果为#112233
background: #224466 + #333; // 结果为#557799

SASS-运算

同样支持加减乘除、取模%运算和颜色运算;还支持字符串拼接运算、布尔( and,or和not)运算;

支持插值语句#{},编写表达式。

复杂运算示例:

// 字符串运算
font-family: sans- + "serif";
font-size: 10px + 2px auto; // 相当于12px auto

// 圆括号
width: 10px + (5px * 2);

// 插值语句#{}
content: "Have #{10 + 2} pieces";

你可能感兴趣的:(前端,css)