less快速入门

less快速入门

通过less.js让less不再像传统的css是静态数据表，让它具备了编程语言的动态性。

得益于Variables(变量)和Mixins()让less可以做到编程语言很多的基础和实用特性，这将大大减少前端的代码量，使用代码变得更加优雅小巧。

官网：http://lesscss.org/

官网对less的解释：css的变体，通过less.js进行转换成css

本文内容来源于英文官网加上自己的阅读笔记。

让css成为编程语言最基础最核心的功能，变量

Mixins把一串属性包括起来，PS.把including 翻译成中文的包括 确实有些怪怪的

根据官网提供的demo，结合我自身的理解，我把它叫它可复用样式属性

在此处定义一段样式代码属性名叫 .bordered

在其它地方通过引用.bordered()就相当于引用了上处定义的样式

在CSS中对于子项语法我们需要这样写

而在less可以嵌套写（PS.这是语法糖？）

通过""或‘’ 中单插入任务字符串作属性和变量，便可转换成熟悉的css

转换后css如下

less提供多种函数，比如 transform color，字符串操作，数学运算

示例：

转成百分比，把0.5 变成50%

设置颜色饱和度为5%

使用颜色lightened(变亮)25%，spun(旋转)8度

(Not to be confused with CSS @namespace or namespace selectors).

不要困惑 css中提供的@namespace 或 namespace 选择器

官方此话的意思应该是less中namespace和css是不一样的。

当在团队合作中要对某个功能进行封装，或对外提供sdk，less提供了命名空间。

注意：需要在namespace后使用()，比如#bundle()，

然后在某处需要使用.button的样式，我们可以这样调用

less3.5版本支持Maps，可以定义maps

输出结果

less和css类似，先从local查找变量，如果无则往 parent 查找。

// 单行

/**/ 多行注释

@import关键字可以在less的任意位置使用，它可以导入*.less可以导入css