文章地址：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. python基础--反射、元类、单例设计模式

    反射:reflect,反射指的是一个对象应该具备可以检测.修改.增加自身属性的能力,反射就是通过字符串操作属性 hasattr(对象,带查询的属性名称) 判断某个对象中是否存在某个属性 getattr ...

  2. PYTHON网络爬虫与信息提取[网络爬虫协议](单元二)

    robots.txt在网站的根目录下 遵守 自动或人工识别robots.txt再进行内容爬取 约束性:建议性,不遵守协议,存在法律风险. 基本语法: User-agent: * Disallow: / ...

  3. 【Ruby】与ruby相关的内容

    本博文是为了记录Ruby相关的可学习资源,以便日常使用 在线学习Rails的网站版本 Ruby on Rails教程(Rails 5) Ruby的中文社区 Ruby China

  4. AJAX(二)-实现验证码异步验证功能

    案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...

  5. Redis 扫盲

    Redis扫盲 非关系型数据库分类: 键值存储数据库:主要会使用到一个 Hash 表,这个表有一个特定的键和一个指针指向特定的数据,Redis 列存储数据库:应对分布式存储的海量数据,键仍然存在,但是 ...

  6. 调用Lua脚本print(xxx)报attempt to call a nil value (global 'print')错误

    在自己程序里调用Lua脚本print(xxx) 报出attempt to call a nil value (global 'print')错误 解决方法: luaopen_base(L); 或者 l ...

  7. Wireshark抓包常见问题解析（转）

    1. tcp out-of-order(tcp有问题) 解答: 1). 应该有很多原因.但是多半是网络拥塞,导致顺序包抵达时间不同,延时太长,或者包丢失,需要重新组合数据单元 因为他们可能是通过不同的 ...

  8. 自定义View系列教程01--常用工具介绍

    站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定 ...

  9. Servlet容器container

    通俗点说,所谓容器,就是放东西的地方.Servlet容器自然就是放Servlet的地方.J2EE开发,是有分工的.一般的程序员,写得都是应用开发,我们会按照一定的规则,开发我们的系统,比如用Servl ...

  10. C++中delete this

    Is it legal (and moral) for a member function to say delete this? As long as you’re careful, it’s ok ...