[CSS] 第1359天 在less中如何将px转换为vw？

LESS简介

LESS 是一种 CSS 预处理器，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使得 CSS 更易于维护和扩展。下面是 LESS 的一些基础知识：

1. 变量：可以通过 @ 变量名 来定义变量，可以用来存储颜色值、字体大小、距离等常用的数值和字符串。

@primary-color: #0088cc;
@font-size: 14px;

body {
  color: @primary-color;
  font-size: @font-size;
}

2. 嵌套：可以将样式规则嵌套在另一个样式规则内部，提高了样式的可读性。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
    margin-right: 10px;
  }
}

3. Mixin：可以通过 Mixin 来封装一些常用的样式，使用时直接引用即可，避免了重复编写样式的问题。

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  .border-radius(4px);
  background-color: #0088cc;
  color: #fff;
  padding: 10px 20px;
  border: none;
}

4. 函数：可以通过函数来处理样式的计算和转换，增强了样式的灵活性。

@base-color: #111111;

.darken(@color, @amount: 10%) {
  @new-color: darken(@color, @amount);
  background-color: @new-color;
}

.container {
  background-color: @base-color;
  .darken(@base-color, 20%);
}

5. 导入：可以通过 @import 关键字来导入外部 LESS 文件，可以将样式按功能或模块划分，提高了代码的组织性。

@import "variables.less";
@import "mixins.less";
@import "buttons.less";

使用LESS将 px 转换为 vw

@baseFontSize: 16px; // 设计稿字体大小
@vwSize: 750; // 设计稿宽度

.px2vw(@property) {
  @{property}: (@property / @baseFontSize) * 100vw;
}

// 使用示例
.selector {
  .px2vw(width);
  .px2vw(height);
  .px2vw(font-size);
}

在这个例子中，我们将设计稿的字体大小设为 16px，设计稿的宽度设为 750px，然后定义了一个 .px2vw() 的混合宏来进行转换。在混合宏中，我们使用了 LESS 的变量、数学计算和 vw 单位来进行转换。最后，我们可以在选择器中调用 .px2vw() 混合宏，将需要转换的属性名作为参数传入，LESS 编译器会自动将其转换为 vw 单位

更多题目

juejin.cn/column/7201…