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之 ...
随机推荐
- 无任何网络提供程序接受指定的网络路径(系统服务里没有workstation服务)
今天同事访问公司服务器时,提示“无任何网络提供程序接受指定的网络路径”,网络ping正常,把防火墙关掉,再次尝试问题如故. 于是上网搜索: 1.服务停止:一般有workstation,server,c ...
- 云端 Linux下安装 Java
根据需要在给云端的机器安装Java 问题的分解为2个一个是Java源文件的传输.一个是Linux下Java的安装. Java 传输到云端: 可以通过SSH Secure File Transfer C ...
- iOS开发网络篇—发送json数据给服务器以及多值参数
iOS开发网络篇—发送json数据给服务器以及多值参数 一.发送JSON数据给服务器 发送JSON数据给服务器的步骤: (1)一定要使用POST请求 (2)设置请求头 (3)设置JSON数据为请求体 ...
- 转:Ajax中的get和post两种请求方式的异同
1. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML ...
- KnockOut.js入门示例详解
KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架. KO的核心就是绑定,包括数据绑定和行为绑定: K ...
- Mybatis根据表自动生成相关代码
这个地方的生成需要用到三个文件,generatorConfig.xml.mybatis-generator-core-1.3.1.jar和mysql-connector-java-5.1.29.jar ...
- iOS 模拟器上录制Demo视频
在App审核中会让用户上传一段简易的视频,那么如何制作改视频呢? 今天无意中在Cocochina 中看到 说利用QuickTime来制作,而QuickTime是操作系统自带的. 哦 My,God ! ...
- tinymce 编辑器 上传图片
tinymce编辑器进行本地图片上传 首先下载tinymce.js之后 在form中添加一个<textarea>元素 给其一个id和name 然后就可以初始化编辑器了 tinymce.in ...
- C++学习笔记24:makefile文件
makefile make命令:负责c/c++程序编译与链接 make根据指定命令进行建构 建构规则文件:GNUmakefile , makefile,Makefile makefile 文件格式 m ...
- False Discovery Rate, a intuitive explanation
[转载请注明出处]http://www.cnblogs.com/mashiqi Today let's talk about a intuitive explanation of Benjamini- ...