博客专栏  >  前端   >  Less 简明教程

Less 简明教程

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。Less 可以让我们用更少的代码做更多的事情

关注
0 已关注
21篇博文
  • 认识 Less

    Less大大简化了 CSS 的编写,并且降低了 CSS 的维护成本。就像它的名称所说的那样,Less 可以让我们用更少的代码做更多的事情。

    2017-11-19 22:26
    64
  • Less 原理

    Less 原理 Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。 Less 并没有裁剪 CSS 原有的特性,更不...

    2017-11-20 10:06
    82
  • Less 的用法

    Less 用法 Less 可以直接在浏览器端运行(支持IE6+、Webkit、Firefox),也可以借助Node.js或者Rhino在服务端运行。 Less是一种动态语言,无论是在浏览器端,还是在服...

    2017-11-20 10:10
    79
  • Less 编译工具

    Less 编译工具 虽然你可以选择在浏览器端使用Less,直接在页面中嵌入一个 Less.js 文件,你也可以选择在服务器端使用Less,使用命令行将Less文件编译成最终的CSS文件。 然而,这两种...

    2017-11-20 10:18
    107
  • Less变量

    Less变量 定义变量 Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope)。简单的讲,变量作用域就是局部变量和全局变量的概念。 Less 中,变量作用域采用的是就近...

    2017-11-20 10:30
    125
  • 什么是Mixin

    什么是Mixin Less中,允许你将一个类嵌入到另一个类中,被嵌入的类也可以看作变量。换句话说,你可以用一个类定义样式,然后把它当作变量,在另一个类中,只要引用变量的名字,就能使用它的所有属性, L...

    2017-11-20 10:38
    151
  • 带参数的mixin

    带参数的mixin 在Less中,还可以像函数一样定义一个带参数的mixin, 这种形式叫做 Parametric Mixin,即带参数的混入。如: // 定义一个样式选择器.borderRadius...

    2017-11-20 11:13
    101
  • 作为函数的mixin

    作为函数的mixin 在一个 mixin 内部定义的变量或 mixin,都调用者可见,因此,它们可以作为它的返回值。如,以下Less代码: .count(@x, @y) {    @sum:(@x +...

    2017-11-20 11:14
    87
  • Less的Mixin嵌套规则

    Less的嵌套规则

    2017-11-20 11:15
    113
  • Less运算和函数

    Less运算和函数 Less运算 在我们的 CSS 中,充斥着大量数值型的 value,比如 color、padding、margin 等。在某些情况下,这些数值之间是有着一定关系的,那么我们怎样利...

    2017-11-20 21:04
    89
  • Less转义字符

    Less转义字符 有时候,当需要引入无效的CSS语法或Less不能识别的字符,就需要使用转义字符。此时,就可以在字符串前面加一个 ~,并将需要转义的字符串放在 "" 中。格式为:...

    2017-11-20 21:06
    170
  • Less注释

    适当的注释是保证代码可读性的必要手段,Less支持两种类型的注释:多行注释和单行注释。

    2017-11-21 07:52
    83
  • Less中的命名空间

    Less中的命名空间 当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C++ 程序员,我猜你肯定会想到命名空间 Namespaces。 ...

    2017-11-21 07:52
    77
  • Less的@import指令

    Less的@import指令 Less中,可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置,导入文件时的处理方式取决于文件的扩展名: 如果扩展名是 .css,...

    2017-11-21 08:59
    394
  • Less的!important关键字

    Less的!important关键字 在调用 mixin 时,如果在后面追加 !important 关键字,就可以将 mixin 里面的所有属性都标记为 !important。如,以下Less代码:...

    2017-11-21 09:01
    100
  • Less的模式匹配

    Less的模式匹配 Less提供了一种机制,允许根据参数的值来改变 mixin的行为。比如,以下代码就可以让 .mixin 根据不同的 @switch 值而表现各异: .mixin (dark, @...

    2017-11-21 09:09
    73
  • Less的条件表达式Guards

    Less的条件表达式 当需要根据表达式,而不是参数的值或数量进行匹配时,条件表达式(Guards)就显得非常有用。如果你熟悉函数式编程的话,对条件表达式也不会陌生。 为了尽可能地接近CSS的语言结构...

    2017-11-21 16:55
    109
  • Less中的循环

    Less中的循环 在Less中,mixin可以调用它自身。通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构。如,使用循环来创建一个网格类: .generate-column...

    2017-11-21 16:57
    76
  • Less中的合并

    Less中的合并 合并是LESS的一个特性,它允许通过指定的语法来为某个属性添加使用逗号或空格分隔的值的列表。对于文本阴影、盒阴影、背景、变换等允许使用值的列表的属性,合并非常有用。 合并的语法,就...

    2017-11-21 17:03
    70
  • Less中的Extend

    Less中的Extend Extend就相当于Java的继承,它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。 一种是: :extend() { } 另一种是: { &amp...

    2017-11-21 17:07
    67

HTML 宝典
934351
ES6标准入门
20917777
Bootstrap 教程
15413769
揭秘 CSS
16215056
img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部