文章地址：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. MaxCompute Spark开发指南

    0. 概述 本文档面向需要使用MaxCompute Spark进行开发的用户使用.本指南主要适用于具备有Spark开发经验的开发人员. MaxCompute Spark是MaxCompute提供的兼容 ...

  2. JZOJ 5459 购物

    Description X 城的商场中,有着琳琅满目的各种商品.一日,小X 带着小Y 前来购物,小Y 一共看中了n件商品,每一件商品价格为Pi.小X 现在手中共有m个单位的现金,以及k 张优惠券.小X ...

  3. SQL Server导入数据报错"无法在只读列“Id”中插入数据"

    使用sql server 导入数据报错:无法在只读列'id'中插入数据.如下图所示: 查找出现该问题的原因是表中id为自动增长的标识列,需要在[编辑映射]中勾选"启用标识插入": ...

  4. 一款优秀的前端JS框架—AngularJS

      前  言 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表 ...

  5. 洛谷P1681 最大正方形II

    P1681 最大正方形II 题目背景 忙完了学校的事,v神终于可以做他的“正事”:陪女朋友散步.一天,他和女朋友走着走着,不知不觉就来到 了一个千里无烟的地方.v神正要往回走,如发现了一块牌子,牌子上 ...

  6. jenkins执行selenium自动化测试浏览器不显示解决方法

    因为jenkins是用windows installer 安装成 windows的服务了,那么jenkins是一个后台服务,所以跑selium cases 的时候不显示浏览器 解决办法:Step 1. ...

  7. jmeter使用Badboy录制、检查点和参数化

    jmeter使用Badboy录制 1.打开Badboy,在地址栏输入需要录制的网址,如:百度首页

  8. oralce系统触发器

    系统事件是指基于oracle事件(例如logon.logoff和startup.shutdown)所建立的触发器,通过使用系统事件触发器,提供了跟踪系统或是数据库变化机制.下面介绍使用的系统事件属性函 ...

  9. win2003开启telnet

    1.在服务器上,cmd中输入命令services.msc打开服务窗口,找到telnet服务,先开启它的依赖服务Remote Procedure Call,在开启telnet服务. 2.本地电脑中cmd ...

  10. XPath 获取两个node中间的HTML Nodes

    XPath 获取两个node中间的HTML Nodes 2015-06-01 16:42 972人阅读 评论(0) 收藏 举报 //div[@id="Recipe"]//h5[co ...