【笔记】Less基础知识点

安装和使用Less

  1. 安装

     npm install -g less
    
  2. 编译

     lessc styles.less > styles.css
    

变量

        /* 定义变量 */
        @background-color:  #ffffff;
        @text-color:  #1A237E;

        p {
          /* 使用变量 */
          background-color:  @background-color;
          color:  @text-color;
          padding:  15px;
        }

        ul {
          background-color:  @background-color;
        }

        li {
          color:  @text-color;
        }

Mixins

        #circle {
          background-color:  #4CAF50;
          border-radius:  100%;
        }

        #small-circle {
          width:  50px;
          height:  50px;
          /* 引用#circle的样式 */
          #circle
        }

        /*  id 为 circle1 的元素不会应用此样式 */
        #circle1() {
          background-color:  #4CAF50;
          border-radius:  100%;
        }

        #big-circle {
          width:  100px;
          height:  100px;
          /* 引用#circle1的样式 */
          #circle1
        }

        /* Mixins可以定义参数,如果不传参,默认是25  */
        #circle2(@size: 25px) {
          background-color:  #4CAF50;
          border-radius:  100%;

          width:  @size;
          height:  @size;
        }

        #big-circle2 {
          width:  100px;
          height:  100px;
          /* 引用#circle2的样式 */
          #circle2(100px)
        }

嵌套

注:嵌套时使用的变量会从当前层向上层查找,直到找到

        ul{
          background-color:  #03A9F4;
          padding:  10px;
          list-style: none;

          li {
            background-color:  #fff;
            border-radius:  3px;
            margin:  10px  0;
          }
        }

会被转换为

        ul {
          background-color:  #03A9F4;
          padding:  10px;
          list-style: none;
        }
        ul li {
          background-color:  #fff;
          border-radius:  3px;
          margin:  10px  0;
        }

运算

        @div-width: 100px;
        @color: #03A9F4;

        div {
          height:  50px;
          display:  inline-block;
        }

        #left {
          width:  @div-width;
          background-color:  @color  -  100;
        }

        #right{
          width: @div-width * 2;
          background-color: @color;
        }

函数

        @var:  #004590;

        div{
          height:  50px;
          width:  50px;
          background-color:  @var;

          &:hover {
            background-color: fadeout(@var,  50%)
          }
        }

编译为

        div {
          height:  50px;
          width:  50px;
          background-color:  #004590;
        }
        div:hover {
          background-color: rgba(0,  69,  144,  0.5);
        }

上一篇
Weex 入门01 - 环境搭建与初步体验 Weex 入门01 - 环境搭建与初步体验
一、开发工具 Intellij IDEA IDEA 中的两个 Weex 插件二、安装环境 安装 node.js,官网下载,一步到底安装。 使用 npm 安装 weex-toolkit,在 shell 输入下面的命令: npm in
2017-03-14
下一篇
【读书】我看到的世界和你们不一样 【读书】我看到的世界和你们不一样
阅读完成时间:2016年12月5日阅读方式:Kindle Android App作者: 眭澔平出版社: 中国广播电视出版社出版年: 2013-1页数: 305定价: 38.00元装帧: 平装ISBN: 9787504367082豆瓣评分:7
2016-12-06