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;
  }

转载于:https://www.cnblogs.com/nmxs/p/5353999.html

Less 常用基础知识相关推荐

  1. 网络服务器最基本的是文件,你可能想知道的15个网络常用基础知识

    原标题:你可能想知道的15个网络常用基础知识 网络是一个复杂的系统,涉及知识很多.现在腾正小超人给大家分享15个常用的网络基础知识: 1) 如何查看本机所开端口 用netstat -a -n命令查看! ...

  2. Swift常用基础知识(二)

    Swift常用基础知识(一) 函数式编程 函数合成 func add1(_ v1: Int, _ v2: Int) -> Int { v1 + v2 }func currying<A, B ...

  3. Linux常用基础知识必备三之常用指令及操作

    Linux常用基础知识必备三之常用指令及操作 1.vi和vim vi如何使用 vi几种模式下的操作指令 命令模式进入编辑模式 命令模式下的快捷键 底行模式(指按了esc键之后输入按键:后出现) 字符串 ...

  4. HTML和CSS的常用基础知识笔记

    HTML基础知识 标题标签: <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4& ...

  5. C#常用基础知识总结(B/S和C/S的异同属于个人整理)

    转载自"IT弄你"的论坛帖C#基础知识 概念:.net与c# .net/dontnet:一般指.net framework框架,一种平台,一种技术 c#(charp):一种编程语言 ...

  6. verilator常用基础知识

    目录 预学习阶段 verilator语法学习 运行verilator官网的example 电路设计举例 预学习阶段 verilator语法学习 常用网站: OJ刷题网站 HDL基础知识 verilat ...

  7. 30分钟搞定ES6常用基础知识

    ES6基础智商划重点 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值 ...

  8. 实施、运维常用基础知识(适用小白入门)

    Linux 基础命令 软件包管理 压缩和解压缩 远程连接 文件操作 花式读(文件) 进程操作 Linux信息 系统服务 基础命令 TAB键---自动补全 管道符(|):将前一个命令的输出作为下一个命令 ...

  9. 前端HTML5常用基础知识总结

    目录 一: 初识HTML 二:常见网页标签 2.1.标题标签 h1-h6 2.2.段落和换行标签 2.3.文本格式化标签 2.4.div和span标签 2.5.图像标签和路径 2.6.超链接标签 2. ...

  10. C++常用基础知识—STL库(1)

    本文介绍C++常用的STL库知识,常用的函数及其用法,为备战C++编程比赛的朋友及对STL库函数应用时的快速查找提供方便. 后续还会继续更新,请大家多多支持!!! STL简介 顺序性容器 2.1 C+ ...

最新文章

  1. Windows 服务入门指南
  2. matlab div矩阵运算,【求助】多维矩阵求和运算!!
  3. 如何遍历numpy数组?
  4. linux、sql 常用的一些特殊符号
  5. 一个实用的表格(锁定表头,可调整单元格大小,可排序)
  6. 口罩告急,全民互助!“口罩互助”小程序重磅上线!
  7. 广州科目三考试 不得不看的十条提醒(图)
  8. Mac neo4j忘记密码,不删除数据处理方法
  9. jvm 堆外内存_jvm┃java内存区域,跳槽大厂必会知识点
  10. 浅析Ruby on Rails部署方案(三)
  11. Timestamp日期格式转换
  12. Windows7自带截图工具没法保存
  13. FAT、FAT32和exFAT文件系统
  14. 51单片机用STC—ISP烧录程序是一直显示“正在检测目标单片机···”冷启动板子没有反应
  15. Python实践-咚咚呛讲师Python进阶教程
  16. SAP SD V/LD标准定价报表配置
  17. 学院旅行计算机学院,计算机学院学生会 | 关于我们,你所不知道的……
  18. 中小企业要怎么选择ERP系统?
  19. html插入cad,如何在CAD图纸中插入一张Excel数据表格?
  20. Label Assignment

热门文章

  1. FPGA从Xilinx的7系列学起(3)
  2. 八、pyqt5按钮类控件——QPushButton、QRadioButton、QCheckBox
  3. spring mvc -@RequestMapping注解详解
  4. Bytom BIP-32协议和BIP-44协议解读
  5. linux命令——pwd
  6. Jmeter之分布式测试
  7. linux的网络命令整理 更新中
  8. redis客户端jedis连接和spring结合
  9. Log4j使用及配置
  10. [转]理解“Future”