【英文】Less学习笔记

Posted on Edited on Views:

Introduction

Less (or written as LESS) is a dynamic cascading style sheet language designed by Alexis Sellier, which is influenced by Sass and also influenced the new syntax of Sass: SCSS. (Wikipedia)

Compiling Less using the browser

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title></title>
    <style type="text/less">
        ...
    </style>
</head>
<body>
    <script src="less.min.js"></script>
</body>
</html>

Comments

1
2
3
// Single line comment, which will not appear in the CSS file after compiling

/* Multiline comment, which will appear in the CSS file after compiling */

Variables

  • Variables are usually placed at the beginning of the file

Selector variables

1
2
3
4
5
@variable: #id;

@{id} {
    ...
}
1
2
3
4
5
@variable: id;

#@{id} {
    ...
}

Property variables

1
2
3
4
5
@variable: value;

#app {
    color: @variable;
}

URL variables

1
2
3
4
5
@variable: "../images/";

#app {
    background: url("@variable/01.png");
}

Declaration variables

1
2
3
4
5
@variable: {background: #FFF;};

#app {
    @variable();
}

Variable arithmetic

  • To prevent operators from being treated as variable names, space should be used between the operator and the variables
1
2
3
4
5
@width: 300px;

#app {
    width: (@width - 10) * 2;
}

Variable defining variables

1
@variable: @variable2;

CSS nesting

  • & represents the name of the parent selector
1
2
3
4
5
6
7
8
9
10
#div1 {

    ...
    
    & #div2 {
    
        ...
        
    }
}

Shortcut

  • & can be omitted
1
2
3
4
5
6
7
8
9
10
#div1 {

    ...
    
    #div2 {
    
        ...
        
    }
}

Media queries

1
2
3
4
5
6
7
8
9
10
#app {
    @media screen {
        @media (max-width:768px) {
            background: #FFF;
        }
    }
    @media tv {
        background: #FFF;
    }
}

Mixing methods

Methods without parameters

1
2
3
4
5
6
7
8
9
10
11
12
13
// Define the method
.methodName() {
    background: #FFF;
}
#methodName() {
    background: #FFF;
}

#app {
    // Call the method
    .methodName();
    #methodName();
}

Methods with default parameters

1
2
3
4
5
6
7
.methodName(@variable: #FFF) {
    background: @variable
}

#app {
    .methodName();
}

Importing all arguments

  • Import all arguments using @arguments
1
2
3
.methodName(@variable: 1px, @variable: 1px, @variable: 1px, @variable: #FFF) {
    box-shadow: @arguments;
}

Method matching patterns

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.methodName(top, @width: 1px, @color: FFF) {
    border-color: transparent transparent @color transparent;
}
.methodName(right, @width: 1px, @color: FFF) {
    border-color: transparent @color transparent transparent;
}
.methodName(bottom, @width: 1px, @color: FFF) {
    border-color: @color transparent transparent transparent;
}
.methodName(left, @width: 1px, @color: FFF) {
    border-color: transparent transparent transparent @color;
}
.methodName(@_, @width: 1px, @color: FFF) {
    border-color: transparent transparent transparent transparent;
}

#app {
    .methodName(left, 1px, #FFF);
}

Method namespace

1
2
3
4
5
6
7
8
9
#methodName1() {
    .methodName2() {
        background: #FFF;
    }
}

#app {
    #methodName1() > .methodName2();
}

Method conditional filtering

AND

1
2
3
4
5
6
7
.methodName(@width) when (@width > 100) and (@width < 200) {
    ...
}

#app {
    .methodName();
}

OR

1
2
3
4
5
6
7
.methodName(@width) when (@width > 100) , (@width < 200) {
    ...
}

#app {
    .methodName();
}

NOT

1
2
3
4
5
6
7
.methodName(@width) when not (@width > 100) {
    ...
}

#app {
    .methodName();
}

Simulating loop method with recursion

1
2
3
4
5
6
7
.methodName(loopCount);
.methodName(@num, @i: 0) when (@i < @num) {

    ...
    
    .methodName(@num, (@i + 1))
}

Methods with variable length parameters

1
2
3
4
5
6
7
.methodName(...) {
    box-shadow: @arguments;
}

#app {
    .methodName(1px, 1px, 1px, #FFF);
}

Specifying highest priority

1
2
3
4
5
6
7
.methodName() {
    ...
}

#app {
    .methodName() !important;
}

Property concatenation method

Separated by commas

1
2
3
4
5
6
7
8
.methodName() {
    propertyName+: propertyValue;
}

#app() {
    .methodName();
    propertyName+: propertyValue;
}
1
2
3
#app {
    propertyName: propertyValue, propertyValue;
}

Separated by spaces

1
2
3
4
5
6
7
8
.methodName() {
    propertyName+_: propertyValue;
}

#app() {
    .methodName();
    propertyName+_: propertyValue;
}
1
2
3
#app {
    propertyName: propertyValue propertyValue;
}

Inheritance

Direct calling

1
2
3
4
5
6
7
#main {
    ...
}

#app {
    #main;
}

Inheritance using the extend keyword

1
2
3
4
5
6
7
#main {
    ...
}

#app {
    &:extend(#main)
}

Inheriting multiple levels

1
2
3
4
5
6
7
8
9
#father {
    #son {
        ...
    }
}

#app {
    &:extend(#father #son)
}

Inheritance by global search and replace

1
2
3
4
5
6
7
#main {
    ...
}

#app:extend(#main all) {
    ...
}

Importing

  • Importing another less file in a less file

<filename>: The filename of another less file, the file extension can be specified or not specified

1
@import "<filename>";

Importing without immediately compiling

1
@import (reference) "<filename>";

Preveing duplicated code from being parsed

1
@import (once) "<filename>";

Allowing importing multiple files with the same name

1
2
@import (multiple) "<filename>";
@import (multiple) "<filename>";