Less常用来写样式,比较多的用法是使用第三方软件编译成CSS文件,然后在HTML页面引入CSS文件。而不是直接在HTML页面里引入编译文件和Less文件。如此以来,在后期修改方便的多。当然,在写小项目的时候可能会觉得写CSS比写Less方便的多。写LESS更多的是后期的维护和修改,它可以实现改一个地方多处修改的好处。

它可以在Node.js中使用,也可以在浏览器端使用,也就是客户端使用。

@charset编码:

@charset "utf-8"

Less的注释:

可以使用css中的注释(/**/)也可以使用//注释,但是使用//不会被编译。

/*该注释会被编译*/

//该注释不会被编译

变量。

@开头。

@bgColor : red;

混合:Mixin

混合变量:

.border{border:1px solid red;}

带参数的混合:

.border-radius(@radius){css代码}

可设置默认值

.border-radius(@radius:5px){css代码}

用法:

.test_hunhe{

  .border-radius(30px);

}

运算

任何数字、颜色或者变量都可以参与运算,运算应该被包裹在括号里。如+ - * /

匹配模式

相当于js中的if,但不完全是。

满足条件后才能匹配。

用法:(三角的写法)

.sanjiao{

  width:0;

  height:0;

  overflow:hidden;

 

  border-width:10px;

  border-color:transparent transparent red transparent;

  border-style:dashed dashed solid dashed;

}

//匹配模式

.triangle(top,@w:5px,@c:#ccc){

  border-width:@w;

  border-color:transparent transparent @c transparent;

  border-style:dashed dashed solid dashed;

}

.triangle(bottom,@w:5px,@c:#ccc){

  border-width:@w;

  border-color:@c transparent transparent transparent;

  border-style:solid dashed dashed dashed;

}

.triangle(left,@w:5px,@c:#ccc){

  border-width:@w;

  border-color:transparent @c transparent transparent;

  border-style:dashed dashed solid dashed;

}

.triangle(right,@w:5px,@c:#ccc){

  border-width:@w;

  border-color:transparent transparent transparent @c;

  border-style:dashed dashed solid dashed;

}

.triangle(@_,@w:5px,@c:#ccc){  //@_代表始终带上这部分

  border-width:@w;

  border-color:transparent transparent transparent @c;

  border-style:dashed dashed solid dashed;

}

嵌套规则。嵌套建议不大于3层。最多3层。

其中有两种用法:

&对伪类使用:hover或focus...

&对连接的使用:&-item

&代表上一层选择器。

用法:

.item{

  @w:130px;

  @h:130px;

  @img_h:40px;

 

  width:@w;

  height:@h;

 

  @_img{  //此处代表的是.item_img

    height:@img_h;

  }

}

@arguments变量。

@arguments包含了所有传递进来的参数。

!important关键字。

会为所有混合所带来的样式,添加上!important。优先级更高。

避免编译。

有时候需要输出一些不正确的语法或者使用一些Less不认识的专有语法。

可以在字符串前加上一个~

用法:width:~'calc(100%-35)'

@import引入文件。

如果引入的是Less文件,则可以不带后缀 @import "ku"

如果引入的不是Less文件,则需要带后缀。如:@import "a.css"

或者:@import (less) "a.css"

Less的用法的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

  10. [转]thinkphp 模板显示display和assign的用法

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

随机推荐

  1. Git-Git里程碑

    里程碑即Tag,是人为对提交进行的命名.这和Git的提交ID是否太长无关,使用任何数字版本号无论长短,都没有使用一个直观的表意的字符串来得方便.例如:用里程碑名称"v2.1"对应于 ...

  2. laravel5.5用户认证源码分析

    目录 1. 生成相关文件和配置 2. 分析路由文件 3. 以登陆开始为例,分析auth到底是怎么工作的 3.1 分析登录文件 3.2 分析门面Auth. 1. 生成相关文件和配置 快速生成命令 php ...

  3. CommonTwo

    public int commonTwo(String[] a, String[] b) { int startA=0; int startB=0; int count=0; while((( sta ...

  4. shell脚本获取网页快照并生成缩略图

    获取网页快照并生成缩略图可分两步进行: 1.获取网页快照 2.生成缩略图 获取网页快照 这里我们用 phantomjs 来实现.关于 phantomjs 的详细用法可参考官方网站. 1.安装 我的环境 ...

  5. Python学习5,三级菜单实例

    _author_ = "Happyboy" data = { '北京':{ "昌平":{ "沙河":["Happyboy" ...

  6. Python 黑魔法(持续收录)

    Python 黑魔法(持续收录) zip 对矩阵进行转置 a = [[1, 2, 3], [4, 5, 6]] print(list(map(list, zip(*a)))) zip 反转字典 a = ...

  7. Elasticsearch相关度评分_score

    相关度评分 _score 的目的 是为了将当前查询的结果进行排序,比较不同查询结果的相关度评分没有太大意义. _score的计算方式 score(q,d) = # score(q,d) 是文档 d 与 ...

  8. css深入理解vertical-align

    第一讲:vertical-align家族基本认识 了解vertical-align支持的属性值以及组成 属性: 1.inherit 2.线类 baseline,top,middle,bottom 3. ...

  9. Problem 1036 四塔问题

    Accept: 590    Submit: 1506Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description “汉诺 ...

  10. 有向图强连通分量Tarjan算法

    在https://www.byvoid.com/zhs/blog/scc-tarjan中关于Tarjan算法的描述非常好,转述如下: 首先解释几个概念: 有向图强连通分量:在有向图G中,如果两个顶点间 ...