less笔记
koala工具
注释:
1./**/,可以被编译
2.//,不可以被编译
申明变量:
@box_width:300px;
.box{
width:@box_width;
}
混合:
一:.box{
.border;
}
.border{
border:5px solid red;
}
二:
@width:100px;
@height:100px;
.border:{
border:5px solid red;
}
.box1{
width:@width;
height:@height;
.border;
}
.box2{
.box1;
background-color:green;
}
混合可带参数:
.get_border(@width){
border:@width solid black
}
.box{
.get_border(1px);
}
混合设置默认参数
.get_border_default(@width:30px){
border:@width dash green;
}
.box{
.get_border_default();
}
匹配模式:
.getBjColor(1,@w:300px,@h:300px){
width:@w;
height:@h;
background-color:black;
}
.getBjColor(2,@w:300px,@h:300px){
width:@w;
height:@h;
background-color:black;
}
.getBjColor(3,@w:300px,@h:300px){
width:@w;
height:@h;
background-color:black;
}
//不管匹配谁,都需要执行这个方法.
.getBjColor(@_,@w:100px,@h:100px){
border-radius: 10px;
}
.box3{
.getBjColor(2);
}
运算:
.getWidth(@w){
width:@w+20px;//这里只要在运算中有一个px就可以.
}
.box4{
.getWidth(80);
.getBjColor(2);
}
嵌套:
.box5{
border: 1px solid red;
width: 100px;
height: 100px;
span{
display: block;
height: 50px;
background-color: yellow;
a{
font-size: 18px;
//代表上一层选择器
&:hover{//伪类
font-size:20px;
color:red;
}
}
}
}
@arguments:
.get_border6(@w,@s,@c){
border: @arguments;
}
.get_size(@w,@h){
width: @w;
height: @h;
}
.box6{
.get_border6(1px,solid,red);
.get_size(200px,300px);
}
无法编译:有时候需要一些特殊写法,就会造成less无法变异的问题.比如IE下的*,_还有滤镜.这个时候就无需编译,原样输出
.box7{
.get_border6(1px,solid,red);
.get_size(200px,300px);
background-color: red;
opacity: 0.5;
filter:~"alpha(opacity=0.5)"; //添加~致使无法编译
}
!important:
.box8{
.get_border() !important;//这里面所有的属性添加了!important
}
less笔记的更多相关文章
- git-简单流程(学习笔记)
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- NET Core-学习笔记(三)
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
- springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- vtune 错误
The Data Cannot be displayed,there is no viewpoint available for data 1. In a console, run your appl ...
- C++编程优化心得(持续更新)
1. 对齐原则.比如64位总线,每次寻址读取8B.编程时注意变量地址,尽量消耗总线最少的寻址次数.堆内存申请时,系统严格按照对齐原则分配,故而使用时候也尽量不要跨寻址边界. 2. 需要的时候,可为了效 ...
- MongoDB下载文件 百度盘共享
1> mongodb下载地址: http://www.mongodb.org/downloads 官方下载不了,可以到百度共享盘里面下载 MongoDB 2.6.5 Windows 64位: ...
- 关于uboot和kernel的一些理解
经过多次的修改和实验,终于能够在mini2440开发板上进行各种uboot和kernel的挂载实验了,在此期间学习到了很多知识,也理解了一些知识1->分区uboot和kernel的分区表要一致u ...
- HANS123
//策略:HANS123//周期:日内//类别:趋势突破 作为外汇市场上广为流行的一种突破交易策略,HANS123以其简洁的开盘后N根K线的高低点突破,作为交易信号触发的评判标准.这也是一种入场较早的 ...
- (spring-第19回【AOP基础篇】)基于AspectJ和Schema的AOP
基于AspectJ就是基于@AspectJ注解,基于Schema就是全部依靠配置文件.那么首先要了解Java注解. Java注解初探 在JDK5.0中,我们可以自定义标签,并通过Java语言的反射机制 ...
- RABBITMQ/JAVA (主题)
上篇博文中,我们进一步改良了日志系统.即使用Direct类型的转换器,使得接受者有能力进行选择性的接收日志,而非fanout那样,只能够无脑的转发. 虽然使用Direct类型的转换器改进了日志系统.但 ...
- [转]Centos 6.5 安装 Scrapy 0.22.2成功
0. python -V (此时显示为2.6.6) 1. yum -y update 2. yum groupinstall -y development 3. yum ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
- Struts 2开讲了!!!
首先我们要知道我们为什么要学习Struts2这门技术? Struts2是java程序员所必需学习的一门技术几乎面试都会提起! Struts英文单词是什么意思,怎么理解? 翻译:支柱,支杆,来源于建筑和 ...