zoukankan      html  css  js  c++  java
  • CSS预编译:less入门

    LESS预编译是向下兼容CSS并且为当前CSS扩展功能。

    LESS官网就是最好的学习资源。

    这篇文章是对LESS的一个Overview,仅作为初步了解。因为官网是英文,所以我也尽量顺应它的表达避免歧义。

    Variables

    use variables for more comprihensible code:

    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    
    #header {
      color: @light-blue;
    }

    and the Output is:

    #header {
      color: #6c94be;
    }

    Mixins

    mixins are a way of including a bunch of properties you can use from one rule-set to anthor .See the fllowing css:

    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

    if we want use the properties in other rule-set, just drop in the name of css where we want use it,like so:

    #menu a {
      color: #111;
      .bordered;
    }
    
    .post a {
      color: red;
      .bordered;
    }

    now the properties will apear in #menu an .post. It's convenient.

    Nesting

    we also have the ablities to use nesting instead of for more concise code:

    #header {
      color: black;
      .navigation {
        font-size: 12px;
      }
      .logo {
        width: 300px;
      }
    }

    it's mimics the structrue of your HTML.

    we can also bundle pseudo-sectors with mixins using this method.For example,the classical clearfix hack.

    .clearfix {
      display: block;
      zoom: 1;
    
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

    Nested At-Rules and Bubbling

    at-rules such as @media or @support can be also nested .

    the at-rule in the top is relative order against other elements inside the same ruleset remains unchanged.

    .component {
      width: 300px;
      @media (min-width: 768px) {
         600px;
        @media  (min-resolution: 192dpi) {
          background-image: url(/img/retina2x.png);
        }
      }
      @media (min- 1280px) {
        width: 800px;
      }
    }

    Operations

     arthmatical operations can be operated in any number.

    // numbers are converted into the same units
    @conversion-1: 5cm + 10mm; // result is 6cm
    @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
    
    // conversion is impossible
    @incompatible-units: 2 + 5px - 3cm; // result is 4px
    
    // example with variables
    @base: 5%;
    @filler: @base * 2; // result is 10%
    @other: @base + @filler; // result is 15%

    but notice problems like these:

    @base: 2cm * 3mm; // result is 6cm
    
    
    // do arithemtic on colors:
    
    @color: #224488 / 2; //results in #112244
    background-color: #112244 + #111; // result is #223355

    calc() exception

    for CSS compatibility ,calc() can not evaluate math expression, but will evaluate variables and math in nested function.like so:

    @var: 50vh/2;
     calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

    Escaping

    this allows you to use arbitratry strings as property or variable value with no change.Anything in ~"anything" or ~'anthing' can work.

    @min768: ~"(min- 768px)";
    .element {
      @media @min768 {
        font-size: 1.2rem;
      }
    }

    Functions

    Less provide a variety of function to handle with transform colors or manipulate strings or do maths.if you want more,see Function Reference.

    Namespaces and Accessors

    anytime you want group your mixins you can do this intuitively in LESS.

    #bundle() {
      .button {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {
          background-color: white
        }
      }
      .tab { ... }
      .citation { ... }
    }

    now if you use them in other place ,do like so:

    #header a {
      color: orange;
      #bundle > .button;  // can also be written as #bundle.button
    }

    Scope

    scope in LESS is as same as other programming lanuage like JavaScript.variables and mixins are fitst looked for locally,and if not found ,the compiler will look in parent scope,and so on.

    Comments

    Just like CSS.

    Importing

    how it can be?

  • 相关阅读:
    WinAPI: GetClassName
    Delphi 常用API 函数
    DELPHI加密字串(异或运算加密)
    delphi中获得进程列表或想要的进程(枚举进程、遍历进程)
    如何把窗体关闭到系统托盘
    让窗体接受拖放, 并获取拖过来的文件信息
    如何获取图片中第一个像素的颜色值?
    android 使用get和post将数据提交到服务器
    android 简单的读写联系人
    android ContentObserver内容观察者基本使用
  • 原文地址:https://www.cnblogs.com/FunkyEric/p/9063556.html
Copyright © 2011-2022 走看看