buttonChan 2020-05-10
通过less.js让less不再像传统的css是静态数据表,让它具备了编程语言的动态性。
得益于Variables(变量)和Mixins()让less可以做到编程语言很多的基础和实用特性,这将大大减少前端的代码量,使用代码变得更加优雅小巧。
官网对less的解释:css的变体,通过less.js进行转换成css
本文内容来源于英文官网加上自己的阅读笔记。
让css成为编程语言最基础最核心的功能,变量
@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }
Mixins把一串属性包括起来,PS.把including 翻译成中文的包括
确实有些怪怪的
根据官网提供的demo,结合我自身的理解,我把它叫它可复用样式属性
在此处定义一段样式代码属性名叫 .bordered
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
在其它地方通过引用.bordered()就相当于引用了上处定义的样式
#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }
在CSS中对于子项语法我们需要这样写
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
而在less可以嵌套写(PS.这是语法糖?)
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
// 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%
通过""或‘’ 中单插入任务字符串作属性和变量,便可转换成熟悉的css
@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }
转换后css如下
@media (min-width: 768px) { .element { font-size: 1.2rem; } }
less提供多种函数,比如 transform color,字符串操作,数学运算
示例:
转成百分比,把0.5 变成50%
设置颜色饱和度为5%
使用颜色lightened(变亮)25%,spun(旋转)8度
@base: #f04615; @width: 0.5; .class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%);//颜色饱和度 background-color: spin(lighten(@base, 25%), 8); }
(Not to be confused with CSS @namespace
or namespace selectors).
不要困惑 css中提供的@namespace 或 namespace 选择器
官方此话的意思应该是less中namespace和css是不一样的。
当在团队合作中要对某个功能进行封装,或对外提供sdk,less提供了命名空间。
注意:需要在namespace后使用(),比如#bundle(),
#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... } }
然后在某处需要使用.button的样式,我们可以这样调用
#header a { color: orange; #bundle.button(); // can also be written as #bundle > .button }
less3.5版本支持Maps,可以定义maps
#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }
输出结果
.button { color: blue; border: 1px solid green; }
less和css类似,先从local查找变量,如果无则往 parent 查找。
@var: red; #page { #header { color: @var; // white } @var: white; }
// 单行
/**/ 多行注释
@import关键字可以在less的任意位置使用,它可以导入*.less可以导入css
@import "library"; // library.less @import "typo.css";
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT