Less grammar Getting Started

Less grammar Getting Started

Less CSS is a language that can run on pre-Node or browser.

A single structure that combines a traditional style css layout sequence has been optimized, so that we can css class name with HTML nested hierarchical structure through the one-way up.

This has the advantage not only makes the css style layout more clearly, but also allows us to quickly modify the query later while reducing the amount of code, reducing repetitive code to a certain extent, the key is to make css styles interfere with each other

When it is introduced in a manner not described in vue, the less needs to be added in the following style

<style lang="less" scoped></style>

Case Template

Most cases writing style is as follows

<div class="left-menu">
    <p class="second-menu">
      <span class="iconfont" ></span>
      <span class="name"></span>
    </p>
</div>
<div class="info-ctx"></div>

less part

.left-menu{
    with:10px;
    .second-menu{
        .iconfont{
          line-height: 40px;
          padding: 10px;
        }
        .name{}
    }
}
.info-ctx{
     color: #1b75ed;
}

On the basic usage and basic css no difference, with the preparation of structural modifications easier to maintain

The same pattern repeats after writing can be directly re-write the class name to use this style

It also supports the function arithmetic operation, etc., but usually less utilization, as may be used for other values ​​px addition and subtraction, multiplication and division arithmetic

Complex spend in style, with reference to the following example can be

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}

Style as equivalents thereof .p2

.p2{
  background : #64d9c0;
  color:red;
}

& Operator Usage

.filter-item {
    &-tx{
    }
}

Equivalent to

.filter-item {
    .filter-item-tx {
    } 
}

This article has repeatedly Quick Start less, for newcomers, If you want to look for in-depth study of official documents