CSS preprocessing Less_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS preprocessing Less_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:21

Original

1016 people have browsed it

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;}

Copy after login

Mixed

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

Copy after login

Embedded Set

Normal writing

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

Copy after login

less writing:

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

Copy after login

can also contain pseudo-classes:

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

Copy after login

Operation

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

Copy after login

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);  }

Copy after login

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;    }

Copy after login

Scope

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

Copy after login

Avoid compilation

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

Copy after login

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