less基本语法

什么是LESSCSS

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

语言特性

1、变量：

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了

less中声明变量一定要用@,@变量名：变量；

 1 LESS源码：
 2 
 3 @color: #4D926F;
 4 
 5 #header {
 6     color: @color;
 7 }
 8 h2 {
 9     color: @color;
10 }
1 编译后的CSS：
2 
3 #header {
4     color: #4D926F;
5 }
6 h2 {
7     color: #4D926F;
8 }

2、混合（Mixins）

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。

我们还可以带参数地调用，就像使用函数一样。

 1 /*第一种：不带默认值*/
 2 .box1{
 3     width: 100px; height: 100px;
 4     margin: 30px auto;
 5     .border
 6 }
 7 .box2{
 8     width: 100px; height: 100px;
 9     margin: 30px auto;
10     .border01(30px);
11 }
12 .border{
13     border: 1px solid red;
14 }
15 .border01(@border_width){
16     border: @border_width solid red;
17 }

 

 1 LESS源码：
 2 /*带默认值：需要变得时候再去变化或者去改*/
 3 .rounded-corners (@radius: 5px) {
 4     -webkit-border-radius: @radius;
 5     -moz-border-radius: @radius;
 6     -ms-border-radius: @radius;
 7     -o-border-radius: @radius;
 8     border-radius: @radius;
 9 }
10 
11 #header {
12     .rounded-corners;
13 }
14 #footer {
15     .rounded-corners(10px);//在这里变量也可以是多个中间用,隔开
16 }
17 编译后的CSS：
18 
19 #header {
20     -webkit-border-radius: 5px;
21     -moz-border-radius: 5px;
22     -ms-border-radius: 5px;
23     -o-border-radius: 5px;
24     border-radius: 5px;
25 }
26 #footer {
27     -webkit-border-radius: 10px;
28     -moz-border-radius: 10px;
29     -ms-border-radius: 10px;
30     -o-border-radius: 10px;
31     border-radius: 10px;
32 }

3、嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

 1 LESS源码：
 2 
 3 #header {
 4     h1 {
 5         font-size: 26px;
 6         font-weight: bold;
 7     }
 8     p {
 9         font-size: 12px;
10         a {
11             text-decoration: none;
12             &:hover {
13                 border-width: 1px
14             }
15         }
16     }
17 }
18 编译后的CSS：
19 
20 #header h1 {
21     font-size: 26px;
22     font-weight: bold;
23 }
24 #header p {
25     font-size: 12px;
26 }
27 #header p a {
28     text-decoration: none;
29 }
30 #header p a:hover {
31     border-width: 1px;
32 }

4、函数和运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

 1 LESS源码：
 2 
 3 @the-border: 1px;
 4 @base-color: #111;
 5 @red:        #842210;
 6 
 7 #header {
 8     color: (@base-color * 3);
 9     border-left: @the-border;
10     border-right: (@the-border * 2);
11 }
12 #footer {
13     color: (@base-color + #003300);
14     border-color: desaturate(@red, 10%);
15 }
16 编译后的CSS：
17 
18 #header {
19     color: #333;
20     border-left: 1px;
21     border-right: 2px;
22 }
23 #footer {
24     color: #114411;
25     border-color: #7d2717;
26 }

 

posted @ 2017-02-07 20:17  haonanElva  阅读(329)  评论(0)  编辑  收藏  举报