�ݺ�ߣ

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

Mixins
.border-radius (@radius: 15px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#div1 {
.border-radius();
}
#div2 {
.border-radius(5px);
}

Nested rules
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
color: red;
}
}
}
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
color: red;
}

Operations
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
@var: 1px + 5;

Functions
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}

Scope
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
@import "library"; // library.less
@import "typo.css";
Importing

�ݺ�ߣ

Css4less

More Related Content

Css4less