less-day1

发表于 | 分类于

less overview

variables

  • Variables
1
2
3
4
5
6
7
8
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@bd-bold : 4px solid @nice-blue;
#header {
  color: @light-blue;
  border: @bd-bold
}

output 

1
2
3
#header {
  color: #6c94be;
}
  • mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

  • Nested Rules (tlnr)

  • Nested Directives and Bubbling

Directives such as media or keyframe can be nested in the same way as selectors.
Directive is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.

1
2
3
4
5
6
7
8
9
10
11
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

mixin在引用时可以不加卡号,.mix;

reference