文章地址：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. vagrant简介

    什么是vagrant? 简单理解,就是可以通过Vagrant这个工具管理虚拟机,比如说想创建一个centos环境的虚拟机,不需要安装系统这么麻烦,通过vagrant可以快速创建 官网地址:https: ...

  2. hdu 1296 Polynomial Problem(多项式模拟)

    Problem Description We have learned how to obtain the value of a polynomial when we were a middle sc ...

  3. echarts 重新渲染(重新绘制,重新加载数据)等

  4. HDU 1536 求解SG函数

    #include<stdio.h> #include<string.h> #include<algorithm> #include<set> using ...

  5. Node.js的框架-express

    Node.js的框架 express 是第三方的 express const express=require('express'); const app=express(); const PORT=3 ...

  6. CSS hack处理

    css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差. 各浏览器CSS解析: 1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safar ...

  7. 使用新版本5+SDK创建最简Android原生工程（Android studio）http://ask.dcloud.net.cn/article/13232

    1 使用Android Studio创建一个工程 2 删除原生工程中Java目录下系统默认创建的源代码 3 复制SDK->libs->lib.5plus.base-release.aar文 ...

  8. python 模块 chardet下载及介绍

    python 模块 chardet下载及介绍   在处理字符串时,常常会遇到不知道字符串是何种编码,如果不知道字符串的编码就不能将字符串转换成需要的编码.面对多种不同编码的输入方式,是否会有一种有效的 ...

  9. JS DOM节点的增删改查

    合并拆分 行内样式  script写在html里面

  10. Python科学计算生态圈