LESS学习

1.变量

我们可以把一个css样式的值赋给一个参数,然后再设置样式的时候只需要设置这个参数名,如果要修改,就改参数的值就可以了。

demo.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
<style> </style>
</head> <body>
<h1>我是标题1</h1> <h2 id="h2">我是标题2</h2> <h3 class="h3">我是标题3</h3>
</body>
</html>

styles.less

@light_green: #009933;
h1 {
color: @light_green;
} h2 {
background-color: @light_green;
}

2.Mixin

Mixin可以让类实现继承,而且允许传入参数

.font_class(@font-size:14px){
font-size: @font-size;
color:@light_green
}
#h2{
.font_class
}
h3{
.font_class(20px)
}

这里定义一个font_class类,可以传入参数font-size,参数的默认值是14px。

3.嵌套

经常会用到#name1 .class1这样的方式来选择id=name1里面的所有的含有类class1的标签。

在less中,可以用嵌套:

html

<div id="name1">
<h3 class="class1">hello h3</h3>
<h4 class="class2">hell h4</h4>
</div>

styles.less

@light_green: #009933;
@dark_green: #009999;
#name1 {
.class1 {
color: @light_green;
&:hover {
color: @dark_green
}
}
.class2 {
color: @dark_green;
} }

4.函数运算

在less中可以实现加减乘除的运算

@base_font_size: 10px;
h1 {
font-size: @base_font_size;
} h2 {
font-size: @base_font_size*2;
} h3 {
font-size: @base_font_size+4;
}

5.转换成CSS文件

在命令行中执行

lessc styles.less

就可以把less文件转换成css文件

less的使用方法的更多相关文章

  1. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  2. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  3. 【.net 深呼吸】细说CodeDom(6):方法参数

    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...

  4. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  5. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  6. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  7. ArcGIS 10.0紧凑型切片读写方法

    首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...

  8. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  9. JS 判断数据类型的三种方法

    说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...

  10. .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法

    .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法 0x00 为什么需要Map(MapWhen)扩展 如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...

随机推荐

  1. 信号之sigsuspend函数

    更改进程的信号屏蔽字可以阻塞所选择的信号,或解除对它们的阻塞.使用这种技术可以保护不希望由信号中断的代码临界区.如果希望对一个信号解除阻塞,然后pause等待以前被阻塞的信号发生,则又将如何呢?假定信 ...

  2. CSS选择器优先级

    1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序     例如: .a{ color:red } .b{ color:green }     由于b晚于a定义,所以b覆盖a,反 ...

  3. Oracle恢复已删除数据

    Oracle恢复已删除的数据,主要有两种方法:SCN和时间戳. 一.通过SCN恢复删除且已提交的数据 1.获得当前数据库的scn号 select current_scn from v$database ...

  4. 如何在Xilinx ISE中使用TCL提高工作效率

    http://wenku.baidu.com/link?url=jxtsPLGUlWwYuD8TtfWYYU_NhY5Qty3rx8ZDLCkINLe39JRGb90V5HoJhnkn9r_PQ6vZ ...

  5. 关于async和await的一些误区实例详解

    转载自 http://www.jb51.net/article/53399.htm 这篇文章主要介绍了关于async和await的一些误区实例详解,有助于更加深入的理解C#程序设计,需要的朋友可以参考 ...

  6. JDK Tools - xjc: 将 XML Schema 编译成 Java 类

    xjc 是 JAXB 将 xsd 生成 Java 类的工具. 命令格式 xjc [ options ] schema file/URL/dir/jar ... [-b bindinfo ] ... 命 ...

  7. 服务端缓存HttpRuntime.Cache的使用

    HttpRuntime.Cache.Insert("缓存key", "缓存content", null, DateTime.Now.AddMinutes(3), ...

  8. OJ——华为编程题目:输入字符串括号是否匹配

    package t0815; /* * 华为编程题目:输入字符串括号是否匹配 * 若都匹配输出为0,否则为1 * 样例输入:Terminal user [name | number (1)] * 样例 ...

  9. Oracle Varchar2长度 及 PHP 长度判断

    oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型.          对应该类型,在oracle中有三种比较常用的类型:varchar2(byte).varchar2( ...

  10. ios简单数据库运用

    一.添加类 二.打开数据库 三.创表 四.插入数据 五.取出数据 一.添加类 1.在设置Linked Frameworks and Libraries 中,点加号并添加libsqlite3.0.dyl ...