在Less中，可以定义变量、混合（Mixin）、嵌套规则、函数和许多其他功能，让CSS更具可维护性。以下是一些基本的Less语法和写法：
变量：使用@符号定义变量。例如：
less
@color: #ff0000; 
body { 
  background-color: @color; 
}
编译后的CSS为：
css
body { 
  background-color: #ff0000; 
}
混合（Mixins）：混合允许你定义可重用的CSS声明，然后在你的Less文件中多次调用它。例如：
less
.border-radius(@radius) { 
  -webkit-border-radius: @radius; 
  -moz-border-radius: @radius; 
  border-radius: @radius; 
} 
 
#header { 
  .border-radius(10px); 
}
编译后的CSS为：
border radius什么意思
css
#header { 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 10px; 
}
嵌套：Less允许你使用嵌套语法，这样可以更清晰地表示HTML文档的结构。例如：
less
#header { 
  h1 { 
    font-size: 26px; 
    font-weight: bold; 
  } 
  p { 
    font-size: 12px; 
    a { 
      text-decoration: none; 
      &:hover { border-width: 1px } 
    } 
  } 
}
编译后的CSS为：
css
#header h1 { 
  font-size: 26px; 
  font-weight: bold; 
} 
#header p { 
  font-size: 12px; 
} 
#header p a { 
  text-decoration: none; 
} 
#header p a:hover { 
  border-width: 1px; 
}
运算和函数：Less也支持运算和函数，增加了CSS的动态性。例如，可以使用加法、减法、乘法和除法运算，以及内置的颜函数等。例如：
加法运算：@width: 200px; .container { width: @width + 50px; } 编译后 .container { width: 250px; }。
颜函数：@color: saturate(#ff0000, 10%); 增加颜的饱和度。
导入：可以使用@import指令将一个Less文件的内容导入到另一个文件中。例如：@import "styles.less";。
注释：在Less中，//注释的内容不会在编译后的CSS文件中显示，而/* */注释的内容会显示在编译后的CSS文件中。例如：// This is a Less comment 和 /* This is a CSS comment */。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。