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之 ...
随机推荐
- jsp与php混用的漏洞
接手一个项目是jsp写的,用起来感觉开发是在太麻烦了.于是新功能就用php写的,jsp.php两者之间相互跳转, 突然一天发现在tomcat的web站下打开php竟然显示了php源码,在php站下看j ...
- IBatis.Net XML文件配置
一.添加Provider.config <?xml version="1.0" encoding="utf-8"?> <providers x ...
- vs2013 遇到的web性能记录器无法使用问题
诊断和修复Web测试记录栏的问题.自2005年以来VSTS运也出现了各种由客户多年来提出不同的问题.记录Web测试时,这在一定程度经常提到的一个话题是一个残疾或不存在的Web测试记录吧.因为它可以令人 ...
- 64位Win7系统下vs2010调试无法连接oracle
64位win7系统的Program Files (x86)路径中有括号,oracle不认识这样的路径,所以就出现不能连接数据库的问题.所以我们可以将vs2010的内部调试web服务器WebDev.We ...
- Jmeter—5 关联 响应数据传递-正则表达式提取器
在测试过程中,遇到一个问题:用户登录成功后服务器会返回一个登录凭证,之后所有的操作都需要带上此凭证.我们怎么获取登录凭证并传递给后续的操作? Jmeter提供了正则表达式提取器,用变量提取参数,后续通 ...
- 字符串中带有emoji表情处理
1:先删除字符然后解析当前字符再显示 edit.addTextChangedListener(new TextWatcher() { @Override public void beforeTextC ...
- C++虚函数示例
和Java不同,CDerive derive语句可以直接生成对象,不需要new关键字 重载虚函数才可以用父类引用调用子类对象,重载普通函数没有效果 #include<iostream> # ...
- [转]http://lua-users.org/wiki/LpegTutorial
Simple Matching LPeg is a powerful notation for matching text data, which is more capable than Lua s ...
- Thrift 个人实战--Thrift 网络服务模型
前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...
- gdb使用心得
启用调试gdb gdb 路径到prog_1dray 然后就直接进去gdb了 进去后输入r *.par 参数文件就行了 暂时学到这,用到这!日后再学习更新