zoukankan      html  css  js  c++  java
  • css less学习 变量

    1. 变量用法:

      所有变量都以@开头

      1.1 选择器:

    // Variables
    @my-selector: banner;
    
    // Usage
    .@{my-selector} {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }
    
    //Compiles to:
    
    .banner {
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }

      1.2 url

    // Variables
    @images: "../img";
    
    // Usage
    body {
      color: #444;
      background: url("@{images}/white-sand.png");
    }

      1.3 import 导入

    // Variables
    @themes: "../../src/themes";
    
    // Usage
    @import "@{themes}/tidal-wave.less";

      1.4 属性名替换:

    @property: color;
    
    .widget {
      @{property}: #0ee;
      background-@{property}: #999;
    }
    
    //Compiles to:
    
    .widget {
      color: #0ee;
      background-color: #999;
    }

     1.5 变量名替换

    @fnord:  "I am fnord.";
    @var:    "fnord";
    content: @@var;
    
    //Which compiles to:
    
    content: "I am fnord.";

     1.6 变量的lazy loading

       变量是lazy loading,因而不用再使用前命名。

       变量查找方法:现在只了解本地文件的变量查找,方式如下:类似C++,每一个大括号下是一个作用域,通常会有一个大的作用域下面会有多个小的作用域,形成一个作用域链,如 最外层 -> .class -> .brass ,变量查找时,首先会查找当前作用域,如果当前作用域有,则选最后一个,如果没有,则往上一层作用域查找,直到找到最上面一层。如果都没有,则会报错并提示该变量没有定义。

        

    @var: 0;
    .class {
      @var: 1;
      .brass {
        @var: 2;
        three: @var;
        @var: 3;
      }
      one: @var;
    }
    
    //Compiles to:
    
    .class {
      one: 1;
    }
    .class .brass {
      three: 3;
    }

    参考文章:http://lesscss.org/features/#variables-feature

  • 相关阅读:
    并发之线程封闭与ThreadLocal解析
    并发之不可变对象
    开发者
    并发之atomicInteger与CAS机制
    并发之synchronized关键字的应用
    并发之volatile关键字
    并发研究之可见性、有序性、原子性
    并发研究之Java内存模型(Java Memory Model)
    并发研究之CPU缓存一致性协议(MESI)
    线程安全的日期处理
  • 原文地址:https://www.cnblogs.com/lifeisshort/p/4886382.html
Copyright © 2011-2022 走看看