less中的部分语法详解

less中的语法详解,主要是介绍一些平时常用的语法,如果有更多更实用的语法欢迎大家和我交流。

一、变量。

  变量是识别符号是@,在less中以@开头的则是变量,关于变量名的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写,从第二个开始,单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……,当然也是可是使用香肠命名法用下划线“_”来命名。如,box_main,border_bottom,……。

二、混合。

这个模式比较常见,例如:规定的主背景色,主文字颜色等,可以事先定义好相关的颜色。在使用的时候直接调用,例如。 

  .border_radius(@radius:5px){
    border-radius: @radius;
    -webkit-border-radius:@radius;
  }
  .box_02{
    margin-left: 50%;
    width: 200px;
    height:60px;
    .border_radius();
    background:#ccc;
  }

这样方便与后期维护。

三、匹配模式

  匹配模式有助于我们更好的节省代码和唤起记忆。

例:

  .triangle(top,@w:5px,@c:#ccc){
    .sanjiao_001();
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
  }
  .triangle(bottom,@w:5px,@c:#ccc){
    .sanjiao_001();
    border-width:@w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }

调用的时候可以直接使用:

  .sanjiao{
    .triangle(bottom);
  }

四、运算

在less中的运算是默认使用有单位的一方为基础单位运算,

@w= 100px;

  .bar_002{
    width:@w - 30;
    height:20px;
    margin:0 auto;
    background:#cdecde;
  }

此时采用的计算单位就是px为其默认的计算单位。

在less中有一点和css3中不一样的地方就是采用百分比的单位不能和其他单位混合使用,例:

  .bar_002{
    width:100% - 30px;
    height:20px;
    margin:0 auto;
    background:#cdecde;
  }

  在上面的计算中编辑的时候就会报错,不能这样使用,推荐使用的方法是采用css原生的使用方法来使用。

  .bar_002{
    width:~“calc(100% - 30px)”;
    height:20px;
    margin:0 auto;
    background:#cdecde;
  }

使用“~”符号来告诉less引号里面的内容不需要编译。

五、嵌套规则

嵌套规则其实和css中的层级选择器一样,没有太多区别(层级最好控制在3层以内,这样有助于浏览器的识别)。

另外还有个符号不得不说的就是“&”,此符号与相对路径中使用的“../”具有相同的意义,是返回上一次的意思,这个对使用为元素:hover,:avtice等有着很好的选择效果。

六、@arguments变量

当我们给变量设置很多默认值,这个时候我们又不想修改,想直接应用,那么arguments无疑是便捷的方式,使用此参数,可以直接全部使用默认变量。

例:

  .bar_004(@w: 100%,@xx: solid,@c: #ccc){
  border:@arguments;
  }

七、使用important来提升优先级。

在我们使用important,不仅可以使用给变量也可以使用给一个类。用此来提升优先级来达到我们想要的效果。

时间: 2024-12-20 17:15:31

less中的部分语法详解的相关文章

SQL中的JOIN语法详解

参考以下两篇博客: 第一个是 sql语法:inner join on, left join on, right join on详细使用方法 讲了 inner join, left join, right join的意义和用法. 第二个是 SQL中的left outer join,inner join,right outer join用法详解 讲了关系运算背后的数学原理,以及提到了更多类型的连接操作: inner join- 笛卡尔乘积再选取, left outer join, right out

ms-dos中 MSCDEX命名语法详解

一.MSCDEX的语法及参数:        MSCDEX可以在AUTOEXEC.BAT文件中自动加载,也可以在DOS的命令行中载入但要使用光驱,前提条件是在Config.sys文件中加载了光驱的驱动程序.MSCDEX的语法格式为:        C:\DOS\MSCDEX.EXE/D:DRIVER1 [/D:DRIVER2][/E][/K][/S][/V][/L:LETTER][/M:NUMBER]        各项参数的意义如下:        /D:DRIVER1 [/D:DRIVER2

Java8初体验(二)Stream语法详解

原文链接:http://ifeve.com/stream/ 1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel aggregate operations. 我们来解读一下上面的那句话: Stream是元素的集合,这点让Stream看起来用些类似Iterator: 可以支持顺序和并行的对原Stream进行汇聚的操作: 大家可以把Stream当成一个高级版本的

Hadoop Hive sql语法详解

Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构化的数据文件映射为一张数据库表,并提供完整的SQL查询功能,可以将SQL语句转换为MapReduce任务进行运行,通过自己的SQL 去查询分析需要的内容,这套SQL 简称Hive SQL,使不熟悉mapreduce 的用户很方便的利用SQL 语言查询,汇总,分析数据.而mapreduce开发人员可以把己写的mapper 和reducer 作为插件来支持

HTML 中的marquee标签详解

该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果 该标签是个容器标签 语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到: onMouseOut=&q

[持续交付实践] pipeline:pipeline 使用之语法详解

一.引言 jenkins pipeline语法的发展如此之快用日新月异来形容也不为过,而目前国内对jenkins pipeline关注的人还非常少,相关的文章更是稀少,唯一看到w3c有篇相关的估计是直接翻译软件翻的,读下来惨不忍睹.没办法,语法详解这章我干脆把jenkins官网上的语法说明全部翻译了一遍,并更新了陈旧的内容(可怜了我大学四级的英语水平~),英语好的朋友也可以直接到官网阅读. 二.语法简介 Pipeline最基本的部分是"step".基本上,step告诉Jenkins 要

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

JSP语法详解

转自:http://www.cnblogs.com/culffe/articles/1142388.htm ———————————————————————————————————— 1)HTML注释: <!-- 注释内容 [ <%= 表达式 %> ] --> 可以用注释内容,也可以用表达式. 2)隐藏注释: <%-- 注释内容 --%> 注释会被JSP编译时被忽略.编译器不会对<%-- --%>之间的语句编译,它不会显示在客户的浏览器和源代码中. 3)声明:

C# 中的委托和事件详解

C# 中的委托和事件 文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错,解决办法是显式的创建一个委托类型的实例(委托变量).例如:委托类型 委托实例 = new 委托类型(方法名); 引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易