组团学
学习方向
登录/注册

LESS

阅读 (388)

一、Less 概述

  • 维护css弊端

    CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

    CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。

    不方便维护及扩展，不利于复用。

    CSS 没有很好的计算能力

    非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

  • 说明

    Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

    做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

    它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

    LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单，本质上，LESS 包含一套自定义的语法及一个解析器。

  • Less中文网址：http://lesscss.cn/

    常见的CSS预处理器：Sass、Less、Stylus

    一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

二、Less 安装

  • 步骤

    ①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

    ②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

    ③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

    ④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

    ⑤命令行编译 lessc path/xxx.less path/xxx.css

三、Less 编译

  • 说明

    浏览器只能识别CSS，LESS只是用来提升CSS可维护性的一个工具，所最终需要将LESS编译成CSS。两种种方式：命令行编译方式和插件编译方式。

命令行编译方式

  • 步骤

    命令行编译

    lessc  path/xxx.less  path/xxx.css

sublime text—插件编译方式

  • 说明

    通过命令行编译效率比较低下，一般都会借助于编辑器来完成编译，以sublime_text为例，sublime_text默认并不支持LESS的编译操作，需要安装插件实现。

  • 步骤

    1. 执行npm install -g less-plugin-clean-css（使用sublime text才用）
    2. ctrl+shit+p打开命令面板
    3. 输入install package然后回车
    4. 安装 LESS、lessc、Less2Css三个插件
    5. alt+s快捷键即可实现编译

VScode—插件编译方式

  • 说明

    Easy LESS 插件用来把less文件编译为css文件

    安装完毕插件，重新加载下 vscode。

    只要保存一下Less文件，会自动生成CSS文件。

easyless9804305.png

四、Less 变量

  • 说明

    变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;
  • 命名规则
    1. 必须有@为前缀
    2. 不能包含特殊字符
    3. 不能以数字开头
    4. 大小写敏感
@color: pink;

五、Less 混合（Mixins）

  • 说明

    混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

    .yellow{
    color: yellow;
}

    如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

    .div{
    font-size: 14px;
    .yellow();
}

.span{
    font-size: 12px;
    .yellow();
}

    .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）

    #green{
    color: green;
}

.div{
    font-size: 14px;
    #green();
}

.span{
    font-size: 12px;
    #green()
}

六、Less 嵌套（Nesting）

  • 说明

    Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
  color: black;
}
#header .nav{
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 语言我们可以这样书写代码：

#header {
  color: black;
  .nav{
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

七、Less 运算（Operations）

  • 说明

    任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

    /*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
  • 注意
    1. 乘号（*）和除号（/）的写法
    2. 运算符中间左右有个空格隔开 1px + 5
    3. 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
    4. 如果两个值之间只有一个值有单位，则运算结果就取该单位

八、Less calc() 特例

  • 说明

    为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

九、转义（Escaping）

  • 说明

    转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

注意，从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

十、函数（Functions）

  • 说明

    Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在 Less 函数手册 (https://less.bootcss.com/functions/)中有详细介绍。

    函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

  • 参见：函数手册

    https://less.bootcss.com/functions/

十一、命名空间和访问符

(不要和 CSS @namespace 或 namespace selectors 混淆了)。

  • 说明

    有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

​ 现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

  • 注意

    如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。

十二、映射（Maps）

  • 说明
    从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

​ 输出符合预期：

.button {
  color: blue;
  border: 1px solid green;
}

十三、作用域（Scope）

  • 说明

    Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

十四、注释（Comments）

  • 说明

    块注释和行注释都可以使用：

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

十五、导入（Importing）

  • 说明

    “导入”的工作方式和预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";
需要 登录 才可以提问哦
头像
：
回复