该系列:
其他待更新...
less是css的扩展,能通过特殊的语法写样式,然后自带工具编译为浏览器所能识别的css,下面是其一些基本用法,一般开发只需用到这些功能。
变量
@符号声明和引用,可写成表达式的形式
@width: 10px;@height: @width + 10px;#header { width: @width; height: @height;}复制代码
编译为
#header { width: 10px; height: 20px;}复制代码
混入(MIXINS)
minxins能够把一串样式规则封装起来,方便复用
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered();}.post a { color: red; .bordered();}复制代码
编译后
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black;}.post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black;}复制代码
注意不是非得类选择器(我看很多例子都用类选择器),也可以用id选择器
#ids{ color:red;}复制代码
嵌套
当css选择器存在父子关系时,可以像下面这样书写
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; }}复制代码
编译为
#header { color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 300px;}复制代码
注意&在嵌套里表示所有祖先选择器,下面是个清除浮动的例子
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }}复制代码
当遇到样式表规则比如@media或@supports时,他会冒泡寻找规则
.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; }}复制代码
编译成
.component { width: 300px;}@media (min-width: 768px) { .component { width: 600px; }}@media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); }}@media (min-width: 1280px) { .component { width: 800px; }}复制代码
操作符
+
, -
, *
, /
能用在数字,颜色,变量操作上,以最左边出现的单位为主,如果单位转换不了,无视右边单位,*和/单位无效
// 能够转换成同一单位@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm// px和cm转换不了,以px为单位,计算(2+5-3)@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 #112244background-color: #112244 + #111; // result is #223355复制代码
calc(v3.0.0)
由于操作符的特性,导致直接在less在3.0版本下使用calc计算表达式会出现意向不到的现象
width: calc(50% + (25vh - 20px)); // result is calc(55%)复制代码
不过3.0版本就修复了这个问题,calc里的表达式编译会保持原样,变量会被替换
@var: 50vh/2;width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))复制代码
Escaping(转义)
当我们需要使用一个固定的值时,可以使用~“anything”或~‘anything’,比如上面的calc出现的问题就可以这样解决
@var: 50vh/2;width: calc(~"50% + (@{var} - 20px)"); // result is calc(50% + (25vh - 20px))复制代码
方法
less内置了很多方法
@base: #f04615;@width: 0.5;.class { width: percentage(@width); // 百分比 returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8);}复制代码
Namespaces and Accessors
namespace类似mixin,是为了更好封装css,不会再像mixin一样在编译后出现
#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... }}#header a { color: orange; #bundle.button(); // can also be written as #bundle > .button}复制代码
编译为
#header a { color: orange; display: block; border: 1px solid black; background-color: grey;}#header a:hover{ background-color: white;}复制代码
注意namespace的(),不写的或就会在编译中出现
Map(v3.5.0)
#colors() { primary: blue; secondary: green;}.button { color: #colors[primary]; border: 1px solid #colors[secondary];}复制代码
编译成
.button { color: blue; border: 1px solid green;}复制代码
作用域
@var: red;#page { @var: white; #header { color: @var; // white }}复制代码
从内向外找,具有变量提升
@var: red;#page { #header { color: @var; // white } @var: white;}复制代码
注释
/* One heck of a block * style comment! */@var: red;// Get in line!@var: white;复制代码
导入
导入的文件包含的变量可以正常范围,默认后缀是less
@import "library"; // library.less@import "typo.css";复制代码