【Html】22 - Less初步了解

less

• Less（Leaner Style Sheets ）是一门向后兼容的 CSS 扩展语言。
• 是一种动态样式语言，对CSS赋予了动态语言的特性；

变量（Variables）

• 变量可以单独自定义一系列通用样式，在需要的时候可以调用。

Less代码

// 可以自定义样式
@width: 10px;
@height: @width + 10px;
// 在需要的地方调用即可
#header {
  width: @width;
  height: @height;
}

编译后的CSS的代码

#header {
   
  width: 10px;
  height: 20px;
}

混合（Mixins）

• 可以将定义好的一组类class/id的属性，引入到另一组类class/id的属性中

Less代码

// 已经定义好的类
.box{
    color: #ccc;
    border: 1px solid #ccc;
}
//把定义好的类引入到其他类中
#main{
    font-size: 12px;
    //引入box的属性代码
    .box()
}

编译后的CSS的代码

.box {
   
  color: #ccc;
  border: 1px solid #ccc;
}
#main {
   
  font-size: 12px;
  /*引入box的属性代码*/
  color: #ccc;
  border: 1px solid #ccc;
}

嵌套（Nesting）

• 可以用使用一个选择器嵌套另一个选择器来书写代码（模仿了 HTML 的组织结构）实现继承；
• 使代码更加简洁；

Less代码