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)扩展 如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...
随机推荐
-
【leetcode】Populating Next Right Pointers in Each Node I &; II（middle）
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
-
php 请求参数限制
公司有个群发短信的小项目,项目上线了很久也没有什么问题,最近有商家说 我短信群发不能用 现象是:发现有时候可以发送,有时候不可以发送,看截图发送的手机数量不一样 通过调试php代码发现 php 只接受 ...
-
Python基础：绑定和方法调用
首先,方法仅仅是类内部定义的函数,也就是说,方法是类属性而不是实例属性. 其次方法有两种被调用的方式:调用绑定的方法和调用未绑定的方法. 当存在一个实例时,方法才被认为绑定到了那个实例上,没有实例时方 ...
-
js 判断字符串中是否有某字符串
<script> var test=['<div class="cur"></div>','<div class="cur&qu ...
-
ucenter 同步登录总结
部署: discuz默认安装后就安装了uc_server应用 各应用根目录必须有uc_client文件夹. 下载ucenter程序查看范例程序 应用管理中,应用的主 URL必须指向到应用的根目录,应用 ...
-
XML 新手入门基础知识（复制，留着自己看）
如果您是 XML 新手,本文将为您介绍 XML 文档的基础结构,以及创建构造良好的 XML 需要遵循的规则,包括命名约定.正确的标记嵌套.属性规则.声明和实体.您还可以从本文了解到 DTD 和 sch ...
-
21.C++- ";++";操作符重载、隐式转换之explicit关键字、类的类型转换函数
++操作符重载 ++操作符分为前置++和后置++,比如: ++a; a++; ++操作符可以进行全局函数或成员函数重载 重载前置++操作符不需要参数 重载后置++操作符需要一个int类型的占位参数 ...
-
Asp.net Core IdentityServer4 入门教程（一）：概念解析
目录 1.IdentityServer4 是什么 2.什么是OpenID和OAuth 2.0协议 3.IdentityServer4 可以用来做什么 其他 1.IdentityServer4 是什么 ...
-
SqlServer主键和自增长设置
SqlServer主键和自增长设置 Intro 有时候有些 sql 语句有些不太记得了,谨以此文备忘. 设置主键以及自增长可分两种情况: 新创建表 表已创建但是没有设置主键和自增长 新创建表 创建表 ...
- 版本控制--git+idea