CSS preprocessing Less_html/css_WEB-ITnose

Take advantage of the free time these days to learn about css preprocessing

Introduction to less

Less is a CSS pre-compiler, which means it You can extend the CSS language, adding features such as variables, mixins, functions and many other technologies to make your CSS more maintainable, themed and scalable.

Less can run in Node environment, browser environment and Rhino environment. There are also 3 optional tools for you to compile files and monitor any changes.

Syntax

Variables

Declare a variable:

@width：100px；.test {    width: @width;}

Mixed

.border {    border: 1px solid red;}.test {    width: @box_width;    height: 100px;    background: #ccc;    .border;  //直接混合使用}    

Embedded Set

Normal writing

.test {  font-size: 10px;}. test a {  color: red;}

less writing:

.test {   font-size: 10px;a {  color: red;  }}

can also contain pseudo-classes:

.test {    font-size: 10px;    a {       &:hover {          color: blue;       }      color: red;    }}

Operation

@width: 5px;.test { width: @width + 10;  //15px}

less can infer the units here

Function

.border_radius(@width:5px) { //5px是可选参数，表示默认值    -webkit-border-radius: @width;    -moz-border-radius: @width;    -ms-border-radius: @width;    border-radius: @width;}.test {    .border_radius(20px);  }

Namespace

.bundle {  .button {    display: block;    border: 1px solid black;    background-color: grey;    &:hover {      background-color: white    }  }}//现在如果我们想在 .header a 中混合 .button 类，那么我们可以这样做：.header a {      color: orange;      .bundle > .button;    }

Scope

@var: red;.page {  #header {    color: @var; // white  }  @var: white;}

Avoid compilation

.test {    width: ~'calc(300px - 30px)';}

Comments

//css will not be compiled /**/will be edited to css

For more usage syntax, please check the less Chinese website . http://lesscss.net/ Personal github blog: aralic.github.io