文章地址：https://www.cnblogs.com/sandraryan/

之前就了解过less，但项目一直用的是css，所以，重新做一次系统的了解，顺便写个博客Orz

简介

less和sass都是css的预处理语言，最常用于bootstrap

less 是基于js的，在客户端处理（编译less文件）

sass基于ruby，在服务器端处理

less安装引入

另一种引入方法是直接下载 （指路：官网），或者cdn引入

举个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="box">

        <p class="p1">test p</p>

    </div>

    <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>

    <script></script>

</body>

</html>

html文件里引入css文件（这个css文件是less文件编译产生的，vscode自动编译），引入cdn的less文件

less 文件
@blue: lightblue;

.p1 {

    background-color: @blue;

}

less文件（具体后续再解释~）

编译后的css文件：

.p1 {

  background-color: lightblue;

}

以上 一个简单的demo~~~~

变量

普通变量

@blue: lightblue;

.p1 {

    background-color: @blue;

}

less的引入和使用的更多相关文章

  1. 谈谈DOMContentLoaded：Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  2. NGINX引入线程池 性能提升9倍

    1. 引言 正如我们所知,NGINX采用了异步.事件驱动的方法来处理连接.这种处理方式无需(像使用传统架构的服务器一样)为每个请求创建额外的专用进程或者线程,而是在一个工作进程中处理多个连接和请求.为 ...

  3. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  4. iOS引入JavaScriptCore引擎框架（二）

    为何放弃第一种方案 UIWebView的JSContext获取     上篇中,我们通过简单的kvc获取UIWebVIew的JSContext,但是实际上,apple并未给开发者提供访问UIWebVi ...

  5. iOS引入JavaScriptCore引擎框架（一）

    JavaScriptCore引擎     我们都知道WebKit是个渲染引擎,简单来说负责页面的布局,绘制以及层的合成,但是WebKit工程中不仅仅有关于渲染相关的逻辑,也集成了默认的javascri ...

  6. C++01.类的引入

    1.假设我们要输出张三,李四两个人的基本信息,包括姓名,年龄,可以用以下的C程序实现: eg: #include <stdio.h> int main(int argc,char **ar ...

  7. Highchart插件简介和引入方式

    一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...

  8. 当没有用 EXISTS 引入子查询时，在选择列表中只能指定一个表达式。

    当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式.比如 select * from T_Employee where FNumber not in ( select top 5*  ...

  9. JavaScript模板引擎artTemplate.js——引入子模板

    之前的例子都是单一结构的对象,如果遇到复杂对象结构,我们可以通过引入子模板来实现html的渲染. 依旧以之前的数据作为例子: <div id="content">< ...

  10. 织梦多语言站点，{dede:include filename=''/}引入问题

    织梦模板include插入非模板目录文件出现"无法在这个位置找到"错误的解决办法 以下是dede V55_UTF8 查dede include标签手册 (3) include 引入 ...

随机推荐

  1. Mac系统常用快捷键大全

    苹果Mac系统常用快捷键有很多,但是很多童鞋对于这些mac快捷键都不是很熟悉,今天小编为大家整理了一份Mac系统常用快捷键大全,大家快收藏起来吧!平时在使用mac系统的时候可以提高不少工作效率哦! M ...

  2. python基础--基础数据类型

    1.输入 python2中的输入: 关键字:input()  --> 需要人为的告诉input你输入的是哪种类型的数据(声明数据类型) >>> name = input('pl ...

  3. 计蒜客 Prefix Free Code(字典树+树状数组)

    Consider n initial strings of lower case letters, where no initial string is a prefix of any other i ...

  4. golang标准库中有些函数只有签名没有函数体是怎么回事？

  5. 微服务开源生态报告 No.8

    「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...

  6. opencv 图像基本操作

    目录:读取图像,获取属性信息,图像ROI,图像通道的拆分和合并 1.  读取图像 像素值返回:直接使用坐标即可获得, 修改像素值:直接通过坐标进行赋值 能用矩阵操作,便用,使用numpy中的array ...

  7. spring boot 使用POI导出数据到Excel表格

    在spring boot 的项目经常碰到将数据导出到Excel表格的需求,而POI技术则对于java操作Excel表格提供了API,POI中对于多种类型的文档都提供了操作的接口,但是其对于Excel表 ...

  8. SDUT-3400_数据结构实验之排序三：bucket sort

    数据结构实验之排序三:bucket sort Time Limit: 250 ms Memory Limit: 65536 KiB Problem Description 根据人口普查结果,知道目前淄 ...

  9. Leetcode687.Longest Univalue Path最长同值路径

    给定一个二叉树,找到最长的路径,这个路径中的每个节点具有相同值. 这条路径可以经过也可以不经过根节点. 注意:两个节点之间的路径长度由它们之间的边数表示. 示例 1: 输入: 5 / \ 4 5 / ...

  10. LeetCode169 Majority Element, LintCode47 Majority Number II, LeetCode229 Majority Element II, LintCode48 Majority Number III

    LeetCode169. Majority Element Given an array of size n, find the majority element. The majority elem ...