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笔记的更多相关文章

  1. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记(三)

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. jsp与php混用的漏洞

    接手一个项目是jsp写的,用起来感觉开发是在太麻烦了.于是新功能就用php写的,jsp.php两者之间相互跳转, 突然一天发现在tomcat的web站下打开php竟然显示了php源码,在php站下看j ...

  2. IBatis.Net XML文件配置

    一.添加Provider.config <?xml version="1.0" encoding="utf-8"?> <providers x ...

  3. vs2013 遇到的web性能记录器无法使用问题

    诊断和修复Web测试记录栏的问题.自2005年以来VSTS运也出现了各种由客户多年来提出不同的问题.记录Web测试时,这在一定程度经常提到的一个话题是一个残疾或不存在的Web测试记录吧.因为它可以令人 ...

  4. 64位Win7系统下vs2010调试无法连接oracle

    64位win7系统的Program Files (x86)路径中有括号,oracle不认识这样的路径,所以就出现不能连接数据库的问题.所以我们可以将vs2010的内部调试web服务器WebDev.We ...

  5. Jmeter—5 关联 响应数据传递-正则表达式提取器

    在测试过程中,遇到一个问题:用户登录成功后服务器会返回一个登录凭证,之后所有的操作都需要带上此凭证.我们怎么获取登录凭证并传递给后续的操作? Jmeter提供了正则表达式提取器,用变量提取参数,后续通 ...

  6. 字符串中带有emoji表情处理

    1:先删除字符然后解析当前字符再显示 edit.addTextChangedListener(new TextWatcher() { @Override public void beforeTextC ...

  7. C++虚函数示例

    和Java不同,CDerive derive语句可以直接生成对象,不需要new关键字 重载虚函数才可以用父类引用调用子类对象,重载普通函数没有效果 #include<iostream> # ...

  8. [转]http://lua-users.org/wiki/LpegTutorial

    Simple Matching LPeg is a powerful notation for matching text data, which is more capable than Lua s ...

  9. Thrift 个人实战--Thrift 网络服务模型

    前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...

  10. gdb使用心得

    启用调试gdb gdb 路径到prog_1dray 然后就直接进去gdb了 进去后输入r *.par 参数文件就行了 暂时学到这,用到这!日后再学习更新