动态的样式表lesscss:简单学习lesscss语法

什么是LessCSS

LessCSS是一种CSS预处理器，它可以扩展CSS语言，为CSS引入了变量、函数、混合、嵌套规则等特性，进一步简化了CSS的编写并使其更易于维护。

LessCSS语法

变量

使用@符号声明一个变量，并给定一个值。如：

@myColor: blue;

在其他地方可以使用@myColor来引用该变量。

嵌套规则

在LessCSS中，可以嵌套CSS规则，这使得整个样式表的结构更清晰。如：

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  h1 {
    font-size: 3rem;
  }

  p {
    font-size: 1.5rem;
    color: #666;
  }
}

混合

混合可以将一组CSS规则封装成一个Mixin，以后可以在样式中反复引用它。

#myMixin() {
  font-size: 2rem;
  color: #333;
}

.container {
  #myMixin();
}

函数

LessCSS提供了一些内置函数来操作样式属性。如：

@my-color: #888;

.container {
  background-color: darken(@my-color, 10%);
}

上面的代码会将@my-color变量的颜色值变暗10%，然后将结果设置成.container元素的background-color。

例子

例子1：使用变量

@blue: #0074d9;

.navbar {
  background-color: @blue;
}

.btn {
  background-color: @blue;
  color: white;
}

上面的代码使用了一个变量@blue，将样式表中的多个元素的背景颜色设为了同一个颜色。

例子2：使用混合

#box-shadow(@x: 0, @y: 0, @blur: 2px, @color: rgba(0,0,0,0.5)) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}

.card {
  #box-shadow(5px, 5px);
}

上面的代码定义了一个Mixin #box-shadow，它可以接受4个参数，分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色。然后使用了这个Mixin，将.card元素设置了阴影效果。

上面这两个例子展示了LessCSS的基本语法和特性，并可以在实际开发中使用。