Less 预编译css 笔记

less 作为预编译css 其实也是一种样式,只不过写法有点有不同而已。

下面开始贡献代码:

变量(Variables) 利用@声明变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合(Mixins) 可以理解一个样式class里面可以包含另一个class样式

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered ();
}

嵌套(Nesting) 常用ul li a 的嵌套关系

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }

  .logo {
    width: 300px;

    &:hover{       代表上一级  logo
        color:red;
    }
  }

}

以上就是常用的方法

你可能感兴趣的:(Less,预编译)