Docker 使用原理流程-CFANZ编程社区

Docker 使用原理流程

1.把less转为css

在线转换网页：

LESSTESTER - Less Sandbox

2.定义列表，循环生成颜色变量

// 定义列表
@colors: blue, red, green;

// 使用 each 函数循环遍历 @colors 列表
.eachColor(@index) when (@index > 0) {
  // 获取当前颜色
  @color: extract(@colors, @index);

  // 应用样式
  .element-@{color} {
    color: @color;
  }

  // 递归调用 eachColor 函数，实现循环
  .eachColor(@index - 1);
}

// 根据 @colors 列表的长度确定循环次数
.eachColor(length(@colors));

解析如下：

.element-green {
  color: green;
}
.element-red {
  color: red;
}
.element-blue {
  color: blue;
}

3.Less 支持两种类型的条件语句：`if` 和 `when`

4.定义主题颜色

默认黑色：<html lang="en" data-theme="dark">

主题切换

  const [theme, setTheme] = useState<string>("dark");
  //切换主题
  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    // 设置 HTML 根元素的 data-theme 属性
    document.documentElement.setAttribute("data-theme", newTheme);
  };

全局theme.less文件

// 定义前缀变量
@prefix: themeOnly;
#dark() {
  primary: blue;
  secondary: green;
}
#light() {
  primary: red;
  secondary: green;
}

// 定义主题映射对象
@themes: {
  dark: #dark;
  light: #light;
};

// 根据当前主题设置颜色
[data-theme="dark"] {
  .@{prefix}-primary {
    color: #dark[primary];
  }
  .@{prefix}-secondary {
    color: #dark[secondary];
  }
}

[data-theme="light"] {
  .@{prefix}-primary {
    color: #light[primary];
  }

  .@{prefix}-secondary {
    color: #light[secondary];
  }
}