LESS 中的注释
  也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。
  也可以使用// 注释 不会被编译的
变量
  声明变量的话一定要用@开头 例如:@变量名称:值;
  @test_width:300px;
  .box{
      width:@test_width;
      height:@test_width;
      background-color:yellow;
    }
混合-(Mixin)
  混合(mixin)变量
    例如: .border{border:solid 10px red}
    .box{
      width:@test_width;
      height:@test_width;
      background-color:yellow;
      .border;
    }
  带参数的混合
    .border-radius(@radius){css 代码}
    可认定默认值
    .border-radius(@radius:5px){css 代码}
  混合-可带的参数
    .border_02(@border_width){
      border:solid yellow @border_width;
    }
    .test_hunhe{
      .border_02(30px);
    }
  混合 -默认带值
    .border_03(@border_width:10px){
        border:solid green @border_width;
    }
    .test_hunhe_03{
      .border_03();
    }
    .test_hunhe_04{
      .border_04(20px);
    }
  混合的例子
    .border_radius(@radus:5px){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        border-radius:@radius;
      }
    .radius_test{
      width:100px;
      height:40px;
      background-color:green;
      .border_radius();
    }
匹配模式
      .sanjiao{
        width:0;
        height:0;
        overflow:hidden;
        border-width:10px;
        border-color:transparent transparent red transparent;
        border-style:dashed dashed solid dashed;
     }

    .triangle(top,@w:5px,@c:#ccc){
            border-width:@w;
            border-colo:transparent transparent @c transparent
            border-style:dashed dashed solid dashed;
      }
    .triangle(bottom,@w:5px,@c:#ccc){
            border-width:@w;
            border-colo:@c transparent transparent transparent
            border-style:solid dashed dashed dashed;
      }
    .triangle(left,@w:5px,@c:#ccc){
          border-width:@w;
          border-colo: transparent @c transparent transparent
          border-style: dashed solid dashed dashed;
      }
    .triangle(right,@w:5px,@c:#ccc){
          border-width:@w;
          border-colo: transparent transparent transparent @c;
          border-style: dashed dashed dashed solid;
      }
    .trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。
          width:0;
          height:0;
          overflow:hidden;
      }
    .sanjiao{
      .trangle(top,100px);
      }
  // 匹配模式- 定位
    .pos(r){
      position:relative;
    }
    .pos(a){
      position:absolute;
    }
    .pos(f){
      position:fixed;
    }
运算
  @test_01:300px;
  .box_02{
    width:@test_01 +20;
  }
  .box_02{
    width:@test_01 -20;
  }
  .box_02{
    width:(@test_01 20) *5;
    color:#ccc -10;
  }
嵌套:
  .list{
      width:600px;
      margin30px auto;
      padding:0;
      list-style:none;
      li{
        height:30px;
        line-height:30px;
        background-color:pink;
        margin-bottom:5px;
      }
      a{
        float:left;
        &hover{
        color:red; //& 代表他的上一层选择器。
        }
      }
    }
@arguments 变量
    @arguments 包含了所有的传递进来的参数。
      .border_arg(@w:30px,@c:red,@xx:solid){
      .border:@arguments;
    }
避免编译
  .test_03{
    width:~'calc(300px -30)';
  }

!importan关键字
    .test_important{
      .border_radius() !important;
  }

Less 常用基础知识的更多相关文章

  1. scala和正则表达式常用基础知识示例

    http://www.cnblogs.com/deerchao/archive/2006/08/24/zhengzhe30fengzhongjiaocheng.html .     匹配除换行符以外的 ...

  2. matplotlib常用基础知识

    linestyle(ls)线型参数表 常用color(c)参数表 marker标记符号表 plt常用方法表 plt.legend(loc=0)用于显示图例,图例的位置参数loc matplotlib常 ...

  3. R语言常用基础知识

    seq(from = 1, to = 1, by = ((to - from)/(length.out - 1)),     length.out = NULL, along.with = NULL, ...

  4. JS常用基础知识

    前言:在js中dom和bom是我们操作的基本,在最初接触时候我也懵,但是后来慢慢发现其实bom就是操作浏览器,而dom就是操作文本框节点.

  5. R语言常用基础知识(入门)

    data.frame 动态确定列名称 var <- "mpg" #Doesn't work mtcars$var #These both work, but note tha ...

  6. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  7. 【转载】Python编程中常用的12种基础知识总结

    Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...

  8. Python编程中常用的12种基础知识总结

    原地址:http://blog.jobbole.com/48541/ Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时 ...

  9. Ext常用开发基础知识

    Ext常用开发基础知识 组件定义 //这种方法可以缓存所需要的组件 调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加 ...

随机推荐

  1. 菜鸟学配置vim

    看啥都不会的菜鸟怎么进行vim配置 如果你想让你的vim和VS差不多你一定需要这个网址 http://www.open-open.com/lib/view/open1429884437588.html ...

  2. angular2-响应式表单

    响应式表单是同步的.模板驱动表单是异步的.这个不同点很重要 使用响应式表单,我们会在代码中创建整个表单控件树. 我们可以立即更新一个值或者深入到表单中的任意节点,因为所有的控件都始终是可用的. 模板驱 ...

  3. 让zepto支持ie

    找到zepto源码:修改为如下代码: zepto.Z = function(dom, selector) { dom = dom || [] // 支持ie10,主要是支持wp8 if(window. ...

  4. C语言入门(一)环境搭建

    1. 下载Code::Blocks(源文本编辑器) 2. 下载编译器MinGW(或者下载好自带编译器的codeblocks) http://jingyan.baidu.com/article/c843 ...

  5. linux 安装和卸载软件

    安装: apt-get install cups-pdf 卸载:apt -get remove cups

  6. log4j2单独的配置与使用&log4j2+slf4j的结合的配置与使用

    转载自:https://github.com/iamyong 一.log4j2单独的配置与使用 所用jar文件 log4j-api-2.8.2.jar log4j-core-2.8.2.jar 配置文 ...

  7. java原生文件打包

    一.背景 前端时间,自己做的项目需要打包功能,不想再引外部的jar包 便用java.util.zip做了下该功能 二.适用场景 生成多个word.excel.xml等文件,并要求打包下载的情形 例:项 ...

  8. Browser进程和浏览器内核(Renderer进程)的通信过程

    看到这里,首先,应该对浏览器内的进程和线程都有一定理解了,那么接下来,再谈谈浏览器的Browser进程(控制进程)是如何和内核通信的, 这点也理解后,就可以将这部分的知识串联起来,从头到尾有一个完整的 ...

  9. python编写的简单的mysql巡检脚本

    准备工作:1    安装python 3.5,本次使用源码安装.2    安装psutil模块,使用python3.5自带的easy_install包直接运行cd /opt/python3/bin./ ...

  10. 浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

    转发网址:https://www.cnblogs.com/wenzheshen/p/7724065.html 当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F1 ...