LESS 是一种 CSS 预处理器，可以在 CSS 的基础上添加变量、函数、运算等功能，让 CSS 编写更加高效和灵活。而条件选择是 LESS 中的一种重要功能，可以根据不同的条件生成不同的样式，让 CSS 更加智能和可维护。本文将介绍 LESS 条件选择的使用方法和实践经验，帮助前端开发者更好地运用 LESS 生成静态 CSS 文件。
条件选择语法
LESS 中的条件选择主要有两种语法：@if 和 when。
@if 语法
@if 语法类似于 JavaScript 中的 if 语句，可以根据条件判断是否执行某段代码。其基本语法如下：
@if (condition) {
// code here
} else {
// code here
}其中，condition 是一个表达式，可以是变量、运算、函数等，返回一个布尔值。如果 condition 的值为 true，则执行 if 语句块中的代码；否则执行 else 语句块中的代码。例如：
// javascriptcn.com 代码示例
@color: red;
div {
@if (@color == red) {
color: @color;
} else {
color: blue;
}
}上面的代码中，如果变量 @color 的值为 red，则设置 div 的颜色为 red；否则设置为 blue。
when 语法
when 语法是 LESS 新增的一种条件选择语法，与 @if 语法类似，但更加简洁和易读。其基本语法如下：
// javascriptcn.com 代码示例
.mixin(@color) when (@color == red) {
color: @color;
}
.mixin(@color) when (@color == blue) {
color: @color;
}
div {
.mixin(red);
}其中，when 后面的表达式返回一个布尔值，表示是否匹配当前的 mixin。如果匹配，则执行 mixin 中的代码；否则忽略 mixin。上面的代码中，当调用 .mixin(red) 时，会执行第一个 mixin，设置 div 的颜色为 red。
条件选择实践
条件选择在实际开发中有很多用途，例如根据不同的设备类型生成不同的样式、根据不同的主题生成不同的样式等。下面将介绍一些常用的条件选择实践。
根据设备类型生成样式
在响应式设计中，我们常常需要根据不同的设备类型生成不同的样式，以适应不同的屏幕尺寸和分辨率。LESS 的条件选择可以很方便地实现这一功能。例如：
// javascriptcn.com 代码示例
@media only screen and (max-width: 768px) {
.mobile {
display: block;
}
}
@media only screen and (min-width: 769px) {
.desktop {
display: block;
}
}上面的代码中，当屏幕宽度小于等于 768px 时，显示 mobile 类型的样式；否则显示 desktop 类型的样式。这样就可以根据不同的设备类型生成不同的样式，提高网站的响应性和用户体验。
根据主题生成样式
在一些需要切换主题的网站中，我们常常需要根据不同的主题生成不同的样式，以实现换肤功能。LESS 的条件选择也可以很好地实现这一功能。例如：
// javascriptcn.com 代码示例
@theme: dark;
.theme(@color) when (@theme == light) {
background-color: @color;
}
.theme(@color) when (@theme == dark) {
background-color: darken(@color, 10%);
}
div {
.theme(#ccc);
}上面的代码中，当变量 @theme 的值为 light 时，设置 div 的背景色为 @color；当 @theme 的值为 dark 时，设置 div 的背景色为 @color 的 10% 变暗色。这样就可以根据不同的主题生成不同的样式，实现换肤功能。
总结
LESS 的条件选择是一种非常强大和灵活的功能，可以让 CSS 更加智能和可维护。通过使用 @if 和 when 语法，我们可以根据不同的条件生成不同的样式，实现响应式设计、换肤功能等。在实际开发中，我们需要根据具体的需求运用条件选择，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65646572d2f5e1655ddd7e2d