如何使用 lesshat

什么是 lesshat？

lesshat 是一个简单易用的 LESS mixin 库，通过 lesshat，开发者可以快速编写出高效且易于维护的 CSS 代码。

如何使用 lesshat？

步骤一

首先，你需要引入 lesshat 压缩文件

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/lesshat@3.0.2/lesshat.min.css">

或者你也可以使用 LESS 预处理器，在你的项目中引入 lesshat 源代码。

@import "path/to/lesshat.less";

步骤二

将想使用的 mixin 导入到你的 LESS 文件中。

例如，要使用 lesshat 中的旋转 mixin：

.spin {
    .rotate-90deg();
}

步骤三

编译你的 LESS 文件，并在项目中使用生成后的 CSS 文件。

lesshat 的优点

使用 lesshat，你可以：

• 编写更高效的 CSS 代码
• 节省开发时间
• 在开发过程中避免写重复的代码
• 更方便地维护代码

lesshat 的常用 mixin

1. @vh

设置元素的高度为屏幕高度的百分比。

.container {
    height: @vh(100%);
}

2. @vw

设置元素的宽度为屏幕宽度的百分比。

.container {
    width: @vw(80%);
}

3. @center

水平和垂直居中一个元素。

.container {
    position: absolute;
    top: @center;
    left: @center;
}

4. @border-radius

设置元素的边框圆角。

.box {
    @border-radius(5px);
}

5. @box-shadow

添加元素的阴影效果。

.box {
    @box-shadow(0 1px 5px rgba(0, 0, 0, .2));
}

总结

通过使用 lesshat，你可以更加高效快捷地编写出易于维护的 CSS 代码，并且在项目中大量减少重复劳动。