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. 无任何网络提供程序接受指定的网络路径(系统服务里没有workstation服务)

    今天同事访问公司服务器时,提示“无任何网络提供程序接受指定的网络路径”,网络ping正常,把防火墙关掉,再次尝试问题如故. 于是上网搜索: 1.服务停止:一般有workstation,server,c ...

  2. 云端 Linux下安装 Java

    根据需要在给云端的机器安装Java 问题的分解为2个一个是Java源文件的传输.一个是Linux下Java的安装. Java 传输到云端: 可以通过SSH Secure File Transfer C ...

  3. iOS开发网络篇—发送json数据给服务器以及多值参数

    iOS开发网络篇—发送json数据给服务器以及多值参数 一.发送JSON数据给服务器 发送JSON数据给服务器的步骤: (1)一定要使用POST请求 (2)设置请求头 (3)设置JSON数据为请求体 ...

  4. 转:Ajax中的get和post两种请求方式的异同

    1. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML ...

  5. KnockOut.js入门示例详解

    KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架. KO的核心就是绑定,包括数据绑定和行为绑定: K ...

  6. Mybatis根据表自动生成相关代码

    这个地方的生成需要用到三个文件,generatorConfig.xml.mybatis-generator-core-1.3.1.jar和mysql-connector-java-5.1.29.jar ...

  7. iOS 模拟器上录制Demo视频

    在App审核中会让用户上传一段简易的视频,那么如何制作改视频呢? 今天无意中在Cocochina 中看到 说利用QuickTime来制作,而QuickTime是操作系统自带的. 哦 My,God ! ...

  8. tinymce 编辑器 上传图片

    tinymce编辑器进行本地图片上传 首先下载tinymce.js之后 在form中添加一个<textarea>元素 给其一个id和name 然后就可以初始化编辑器了 tinymce.in ...

  9. C++学习笔记24:makefile文件

    makefile make命令:负责c/c++程序编译与链接 make根据指定命令进行建构 建构规则文件:GNUmakefile , makefile,Makefile makefile 文件格式 m ...

  10. False Discovery Rate, a intuitive explanation

    [转载请注明出处]http://www.cnblogs.com/mashiqi Today let's talk about a intuitive explanation of Benjamini- ...