css3之LESS简单入门

CSS（层叠样式表）是一项出色的技术作为一门标记性语言，CSS 的先天性优点是语法相对简单，对使用者的要求较低，但它的致命弱点是需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。造成这一现象的很大原因在于CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。Less的出现，为Web开发者带来了福音，它是一门CSS预处理语言，引入了变量、运算、函数、继承等功能，为CSS语言赋予了动态语言的特性。Less大大简化了CSS的编写，并且降低了CSS的维护成本。就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

语法

1.注释

// 单行注释  不会编译到css中

/* 多行注释  会编译到css中 */

2.变量

// 语法: @变量名: 值
@white: #fff;
@bgColor: #ccc;
@fontSize: 22px;
// 多值变量
@normalSize: 20px 30px 40px 50px;

body {
  background-color:@bgColor;
}

main {
  color: @bgColor;
  background-color: @white;
  font-size:@fontSize;
  padding:@normalSize;
}
aside {
  font-size:@fontSize;
  margin:@normalSize;
}

3.嵌套(尽量不要嵌套超过三层)

.container {
  h1 {
    font-size: 25px;
    color: #e45456;
  }
  p {
    font-size: 25px;
    color: #3c7949;
  }

  .myclass {
     h1 {
      font-size: 25px;
      color: #e45456;
     }
     p {
      font-size: 25px;
      color: #3c7949;
     }
  }
}

4. 父选择器符号(&) 直接子选则器符号(>)

.container {
    > h1 {
     font-size: 25px;
     color: #e45456;
    }
    > p {
     font-size: 25px;
     color: #3c7949;
    }
    
    .myclass {
      h1 {
       font-size: 25px;
      color: #e45456;
      }
      p {
       font-size: 25px;
       color: #3c7949;
      }
    }
}

5.四则运算

.box {
   width: 20px*3 + 10;
   height: 30px/3-2;
 }

6.函数

.effect(@normal:yellow, @hover:orange, @visited:darkorange, @active:green) {
  color: @normal;

  &:hover {
  color: @hover;  
  }

  &:visited {
    color: @visited;
  }

  &:active {
    color: @active;
  }
}

a {
  // .effect(red,green,blue,black);
  .effect()
}

.box {
  .effect(pink,hotpink,lightpink,white);
}

7.导入

不同的功能 要把这些代码放到不同的文件中
格式:  @import "src"

8.继承

aside {
  font-size:24px;
  margin:20px 30px 40px 50px;
  border:1px solid #ccc;
}

main {

  color:#ccc;
  background-color:#fff;
  // font-size:24px;
  // padding:20px 30px 40px 50px;
  &:extend(aside);

  border:none;
}