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的使用方法的更多相关文章

javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
【.net 深呼吸】细说CodeDom（6）：方法参数
本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析前面 ...
[C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法目录简介匿名方法的参数使用范围委托示例简介在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
ArcGIS 10.0紧凑型切片读写方法
首先介绍一下ArcGIS10.0的缓存机制: 切片方案切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...
[BOT] 一种android中实现“圆角矩形”的方法
内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
JS 判断数据类型的三种方法
说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...
.NET Core中间件的注册和管道的构建（3） ---- 使用Map/MapWhen扩展方法
.NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法 0x00 为什么需要Map(MapWhen)扩展如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...

随机推荐

Google stuff
Google Pro Tip: Use Back-of-the-envelope-calculations to Choose the Best Design - High Scalability - ...
(原)nginx 源码编译
要在nginx上开发,所以先了解下这个是干嘛的..百度一下很多编译源码需要的组件 1.zlib 2.pcre 3.openssl 使用ubuntu的话.可以直接使用 sudo apt-get ins ...
使用Atomikos Transactions Essentials实现多数据源JTA分布式事务--转载
原文:http://www.ite/topic/122700 9.17 update:使用NonXADataSourceBean. Mysql在5.0版本和Connecter/J5.0版本后提供了XA ...
Redis的安装、配置 --转载
原文地址:http://blog.sina.com.cn/s/blog_505bf9af0101ehhp.html redis的安装.配置安装步骤如下:下载redis安装包:$ cd /opt/ap ...
php安装ecshop
1.apache2.2正常 2.源码htdoc下面保存不动 3.E:\PHP 安装目录下 php5.3.28 就不支持jpeg php5.2.17 就不支持 mysql 说明就是php的问题,因为其他 ...
在aws ec2上使用root用户登录
aws ec2默认是使用ec2-user账号登陆的,对很多文件夹是没有权限的.如何使用root账号执行命令就是一个问题了.解决办法如下: 1.根据官网提供的方法登录连接到EC2服务器(官网推荐wind ...
Android（java）学习笔记119：继承中父类没有无参构造
/* 如果父类没有无参构造方法,那么子类的构造方法会出现什么现象呢? 报错. 如何解决呢? A:在父类中加一个无参构造方法 B:通过使用super关键字去显示的调用父类的带参构造方法 C:子类通过th ...
Android_Toast
xml文件: main1: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
设定范围和步长的递增数验证器Validator
1.接口注释 @Target({METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER}) @Retention(RUNTIME) @Docume ...
[Doc ID 1666646.1]如何使用功能管理员清除缓存?
文档内容目标解决方案适用于: Oracle iProcurement - 版本 11.5.1 到 12.0.0 [发行版 11.5 到 12] 本文档所含信息适用于所有平台目标怎样通 ...

less的使用方法