CSS 在LESS CSS中从百分比计算宽度，转化为像素再减去像素值

在本文中，我们将介绍如何在LESS CSS中从百分比计算元素的宽度，并将其转化为像素后再减去指定的像素值。LESS是一种CSS预处理语言，它提供了更多的功能和扩展，使得编写和维护CSS样式更加简洁和高效。

阅读更多：CSS 教程

百分比和像素之间的转化

在CSS中，我们可以使用百分比来指定元素的宽度。例如，我们可以将一个元素的宽度设置为50%，表示该元素的宽度是其父元素宽度的一半。然而，有时我们需要将百分比单位转化为像素，以便于更精确地控制元素的宽度。在LESS CSS中，我们可以使用简单的数学计算来实现这个转化。

假设我们有一个父元素的宽度是300像素，我们想要将子元素的宽度设置为父元素宽度的60%再减去20像素。我们可以使用下面的代码来实现：

@parentWidth: 300px;
@percentage: 60%;
@pixels: 20px;

.child-element {
    width: calc((@parentWidth * (@percentage / 100)) - @pixels);
}

在上面的代码中，我们首先定义了父元素的宽度为300像素（@parentWidth），然后将所需百分比（60%）转化为小数（@percentage / 100）。然后，我们将父元素的宽度乘以转化后的百分比值，并减去指定的像素值（@pixels），将结果作为子元素的宽度。

嵌套计算

除了简单的宽度计算外，我们还可以在LESS CSS中进行嵌套计算，以实现更复杂的功能。嵌套计算允许我们在计算中使用其他变量和表达式。

假设我们有一个父元素的宽度是400像素，我们想要将子元素的宽度设置为父元素宽度的70%再减去子元素内容的宽度。我们可以使用以下代码来实现：

@parentWidth: 400px;
@percentage: 70%;

.child-element {
    width: calc((@parentWidth * (@percentage / 100)) - (100px + 20px));
}

在上面的代码中，我们首先定义了父元素的宽度为400像素（@parentWidth），然后将所需百分比（70%）转化为小数（@percentage / 100）。然后，我们将父元素的宽度乘以转化后的百分比值，并减去子元素内容的宽度（100像素）再减去额外的20像素，将结果作为子元素的宽度。

非标准浏览器支持

需要注意的是，像素计算和嵌套计算是CSS3的一部分，因此在一些旧的浏览器中可能不被支持。为了确保在各种浏览器中获得一致的效果，我们可以使用LESS的mixin和条件语句来检测浏览器支持，并提供备用的CSS代码。

以下是一个示例，使用mixin和条件语句实现浏览器支持检测和备用代码：

@parentWidth: 300px;
@percentage: 60%;
@pixels: 20px;

.child-element {
    .calculate-width(@parentWidth, @percentage, @pixels);
}

.calculate-width(@parentWidth, @percentage, @pixels) {
    @width: calc((@parentWidth * (@percentage / 100)) - @pixels);

    .-webkit-details & {
        width: -webkit-calc((@parentWidth * (@percentage / 100)) - @pixels);
    }

    .-moz-details & {
        width: -moz-calc((@parentWidth * (@percentage / 100)) - @pixels);
    }

    .-ms-details & {
        width: -ms-calc((@parentWidth * (@percentage / 100)) - @pixels);
    }

    .-o-details & {
        width: -o-calc((@parentWidth * (@percentage / 100)) - @pixels);
    }

    width: @width;
}

在上面的示例中，我们首先定义了一个mixin（.calculate-width），它接受父元素宽度、百分比和像素作为参数。然后，在mixin中，我们使用默认的calc函数为子元素计算宽度，并使用条件语句检测浏览器的支持并提供备用的CSS代码。最后，我们将计算出的宽度应用到子元素。

这种方式可以确保在支持calc函数的浏览器中正常工作，并提供备用的代码以适应不支持calc函数的浏览器。