关键词：

使用

在引入less.js前先要把你的样式文件引入：

<link rel="stylesheet/less" type="text/css" href="./less/style.less">
<script type="text/javascript" src="./js/less.min.js"></script>

less.js下载

语法

1.变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

2.混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

带参数混合

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

@arguments 变量

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

3.模式匹配和导引表达式

如果想让.mixin根据不同的@switch值而表现各异，如下这般设置：

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

现在，如果运行:

@switch: light;

.class {
  .mixin(@switch, #888);
}

就会得到下列CSS:

.class {
  color: #a2a2a2;
  display: block;
}

引导

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

除去关键字true以外的值都被视示布尔假：

.class {
  .truth(40); // Will not match any of the above definitions.
}

导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。

.mixin (@a) when (@a > 10), (@a < -10) { ... }

导引可以无参数，也可以对参数进行比较运算：

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：

• ispixel
• ispercentage
• isem

最后再补充一点，在导引序列中可以使用and关键字实现与条件：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

使用not关键字实现或条件:

.mixin (@b) when not (@b > 0) { ... }

4.嵌套规则

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

5.JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + ‘!‘`;

sqli-labs通关（less31~less40）(代码片段)

目录Less31Less32Less33Less34Less35Less36Less37Less38Less39Less40Less31这关和前两关也只是闭合不同的差别……思路还是通过HTTP参数污染绕过WAF爆数据的payload：#下面两步找列数http://192.168.101.16/sqli-labs-master/Less-31/login.php?id=1&am 查看详情

less学习笔记(代码片段)

目录less文档less学习笔记less基础注释变量变量的延迟加载（重点）less的嵌套规则less的混合普通混合带参数的混合带默认值的混合命名参数匹配模式arguments变量less运算less继承less避免编译less文档链接:link.less学习笔记less基... 查看详情

less使用入门

LESSS是基于JavaScript，所以，是在客户端处理的。使用less很简单：1下载less.js2新建less文件后缀名称是.less3在页面中引入less文件，跟引入普通的css的是一样的，区别：rel=stylesheet/less  css是stylesheet/css 4在less文件的下方引... 查看详情

浅谈less

less定义：less是css扩展技术 引用变量，mixin混合，运算，以及函数 简化css代码，降低css维护成本 配合使用解析器kolar写less的步骤：建立文件夹，然后再建立.html以及.less的文本 启动kolar 配置路径+找到less文件 写一部分less文件... 查看详情

less一些选择器(代码片段)

Less常见的预处理语言：LessSassStylusLess学习使用Less的方式页面引入js代码文件解析1、我们可以直接在客户端使用.less（LESS源文件），只需要从http://lesscss.org下载less.js文件，然后在我们需要引入LESS源文件的HTML中加入如下代码,也可... 查看详情

less入门

less是一门CSS预处理语言，增加了变量，Mixin，函数等特性，使得CSS更加方便维护，开发；less可以运行在Node或者浏览器，但最终都是将.less文件转换成.css文件，因为浏览器渲染时只能识别.css文件；1.不同情况下使用less编译器编译... 查看详情

less

在本周我们学习了less的基本用法，它是什么，有什么作用？ Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。Less可以运行在Node或浏览器端。如何使用引用less？在页面中加... 查看详情

less

less步骤1.新建文件夹-2、html-less名称.less3.kocla点4＋.找到文件夹5.文件-输入less-进入kocla刷新6.生成用less名称命名的CSS文件6.在HTML中引入的是CSS文件 二在LESS中引入的文件一定是@INPOREANT.1-LESS后缀名可以省略。声明@变量名（自取）--... 查看详情

less

使用在引入less.js前先要把你的样式文件引入：<linkrel="stylesheet/less"type="text/css"href="./less/style.less"><scripttype="text/javascript"src="./js/less.min.js"></script>less.js下载语法1.变量@nice-blue:#5B8 查看详情

less快速入门(代码片段)

概览Less（LeanerStyleSheets的缩写）是一门向后兼容的CSS扩展语言。这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具。因为Less和CSS非常像，因此很容易学习。而... 查看详情

less06引入(importing)

main.less@wp:960px;.colorsss{color:darkgreen;}index.css.color{color:#ff6600;}style.less//@import"main.less";//@import(reference)"main.less";//引用LESS文件，但是不输出//@import(inline)"main.less";//引用LESS文件，但是不进 查看详情

web前端之less简介(代码片段)

目录一、less简介二、安装插件三、编写less四、less语法less注释父子关系嵌套变量其他五、混合函数六、补充一、less简介less是一门css的预处理语言less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式在less中... 查看详情

sublime编译less

1首先node下全局安装less:npminstallless-g  lessc命令可编译less文件2然后sublime安装less插件：ctrl+shift+p>installPackage>输入less+Enter   支持less高亮3安装将less转换为css的less2Css:ctrl+shift+p>installP 查看详情

less

1.什么是Less？　　Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node、浏览器和Rhino平台上。网上有很多第三方工具帮助你编译Less... 查看详情

less

/*怎么创建less文件呢？有怎么使用less.css呢？今天介绍一下目前最流行的less.css 首先创建一个.less文件，（在哪里引用css，就在那里创建.less文件）如果你是用VisualStudioCode编辑器的话 你可以下载扩展EasyLESS　然后创建一个... 查看详情

vuejs配置less

在webstorm上配置Less 　　首先，全局安装less　　npminstallless-g　　然后，在webstorm上配置less插件，"File"-->"settings"-->"Tools"　　　　在"fileWatchers"-->"+"-->"Less"　　　　在"Program"里填写less的安装路径；　　在"Argument"　里的... 查看详情

less

在遇到less之前，一直和css交往，当less出现在我码农生涯的时候，被她给深深地吸引。从此，less成了自己码农生活里面的一房，css退居二房！那么，less到底有什么魅力让我如此迷上她呢？less初识Less是一门CSS预处理语言，它扩展... 查看详情

css预处理器---less

一、简介:　　Less是一种动态样式语言,可以在样式中使用变量，继承，运算，函数二、使用　　(1)客户端使用　1//引入您的.less样式文件，rel属性区别去css为stylesheet/less2<linkrel="stylesheet/less"type="text/css"href="style.less">3//引入less... 查看详情