// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
乘法和加法都不会转换数字的单位。
@base: 2cm * 3mm; // result is 6cm
我们可以对颜色进行算术运算:
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
虽然可以但是更推荐使用Less自带的Color Function。
calc 表达式
calc表达式和算数表达是不一样的,他只会执行变量和数学方法的结果。
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
上午面了一家公司,面试官是公司的技术总监感觉特别nb说话起来,于是问了一下公司的技术栈等等。好奇心驱使问了一下公司用了哪一种预处理器。得知选择了Less作为预处理器。因为公司用使用了Ant Design那一套,于是心里就有b数了为什么选Less。因为Ant D用的预处理器就是Less。所以我想借此机会看看Less,之前有看过Sass,还有css in js (styled-components)等等方案。所以看Less也很轻松,这里记录一下看到的一些东西。
变量设置
Outputs:
Mixins
Mixins就是把一组规则和其他规则混合(组合)在一起。假设有下面这个样式
我们想要把这组规则利用到其他的规则集里。我们只需要在需要使用这些属性的类名中插入这样的东西:
现在
.bordered
的属性会做用到#menu a
和.post a
里(我们也可以用#ids做为mixin的命名)。Nesting
Less 让我们能够写出内联的而非级联的CSS样式。假设我们有下面的级联样式
但是在Less里面我们可以写成这样
这样的代码更加的简洁。而且和HTML的内联相似。
我们还可以在内联里面使用伪类。只需要通过一个
&
符号。这里有一个非常经典的清理浮动的样式。Nested At-Rules and Bubbling
有一些规则选择器比如
@media
和@supports
也可以内联。如果内敛的话这些规则会被放在顶层而不是内部。举个例子输出结果
Operations
算术表达式
+
,-
,*
,/
可以计算任何的数字,颜色和变量。如果可能,数学运算会将单位考虑在内,并在进行加法,减法或者比较之前转换数字。计算出来的结果会依赖最左边的单位。如果单位之间无法转换,单位会被忽略掉,然后直接计算出来。乘法和加法都不会转换数字的单位。
我们可以对颜色进行算术运算:
虽然可以但是更推荐使用Less自带的
Color Function
。calc 表达式
calc表达式和算数表达是不一样的,他只会执行变量和数学方法的结果。
Escaping
Escaping 允许我们把一个任意的字符串作为变量名或者一个属性。语法是~"anything"或者~'anything'。这样自负就不会被解释器转换。
结果
Less 3.5 之前的话,直接写就可以了
Functions
Less自带了很多操作颜色,操作字符串和进行数学运算的方法。这些方法使用起来都非常的简单。下面这个例子展示了使用
percentage
方法把0.5
转换成50%
。把@base
的饱和度调成5%
。把background
设置为25%
的明亮再旋转8%
的角度。Namespaces and Accessors
如果你想要使用命名空间重用或者分发一些样式的时候
你可以直接这样使用
Maps
从3.5开始我们可以使用map . 就像js的对象一样。
Scope
个人认为Less的作用域很奇怪。两个例子可以证明。
第一个例子很正常。而第二个感觉就比较反人类。
输出的结果如下
Comments
可以使用多行和单行注释
Importing
如果想要引用其他的less直接使用
@import
语法就好了Less仿佛没有流程控制语句,体流程控制是作为Function的形式实现的。