less-best-practices by mindrally/skills
npx skills add https://github.com/mindrally/skills --skill less-best-practices您是一位精通 Less(精简样式表)、CSS 架构和可维护样式表开发的专家。
less/
├── abstracts/
│ ├── variables.less # 全局变量
│ ├── mixins.less # 可重用混合
│ └── functions.less # Less 函数
├── base/
│ ├── reset.less # CSS 重置/规范化
│ ├── typography.less # 排版规则
│ └── base.less # 基础元素样式
├── components/
│ ├── buttons.less # 按钮组件
│ ├── cards.less # 卡片组件
│ └── forms.less # 表单组件
├── layout/
│ ├── header.less # 页眉布局
│ ├── footer.less # 页脚布局
│ ├── grid.less # 网格系统
│ └── navigation.less # 导航布局
├── pages/
│ ├── home.less # 首页特定样式
│ └── contact.less # 联系页特定样式
├── themes/
│ └── default.less # 默认主题
├── vendors/
│ └── normalize.less # 第三方样式
└── main.less # 主清单文件
// main.less
// 抽象层
@import "abstracts/variables";
@import "abstracts/mixins";
@import "abstracts/functions";
// 供应商
@import "vendors/normalize";
// 基础层
@import "base/reset";
@import "base/typography";
@import "base/base";
// 布局层
@import "layout/grid";
@import "layout/header";
@import "layout/navigation";
@import "layout/footer";
// 组件层
@import "components/buttons";
@import "components/cards";
@import "components/forms";
// 页面层
@import "pages/home";
// 主题层
@import "themes/default";
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// variables.less
// 颜色 - 使用语义化名称
@color-primary: #3498db;
@color-primary-light: lighten(@color-primary, 15%);
@color-primary-dark: darken(@color-primary, 15%);
@color-secondary: #2ecc71;
@color-text: #333333;
@color-text-muted: #666666;
@color-background: #ffffff;
@color-border: #e0e0e0;
@color-error: #e74c3c;
@color-success: #27ae60;
@color-warning: #f39c12;
@color-info: #17a2b8;
// 排版
@font-family-base: 'Helvetica Neue', Arial, sans-serif;
@font-family-heading: 'Georgia', serif;
@font-family-mono: 'Consolas', monospace;
@font-size-base: 1rem;
@font-size-small: 0.875rem;
@font-size-large: 1.25rem;
@font-size-h1: 2.5rem;
@font-size-h2: 2rem;
@font-size-h3: 1.75rem;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;
@line-height-base: 1.5;
@line-height-heading: 1.2;
// 间距比例
@spacing-unit: 8px;
@spacing-xs: (@spacing-unit * 0.5); // 4px
@spacing-sm: @spacing-unit; // 8px
@spacing-md: (@spacing-unit * 2); // 16px
@spacing-lg: (@spacing-unit * 3); // 24px
@spacing-xl: (@spacing-unit * 4); // 32px
@spacing-xxl: (@spacing-unit * 6); // 48px
// 断点
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
@breakpoint-xxl: 1400px;
// Z 轴层级比例
@z-index-dropdown: 1000;
@z-index-sticky: 1020;
@z-index-fixed: 1030;
@z-index-modal-backdrop: 1040;
@z-index-modal: 1050;
@z-index-popover: 1060;
@z-index-tooltip: 1070;
// 过渡效果
@transition-base: 0.3s ease;
@transition-fast: 0.15s ease;
@transition-slow: 0.5s ease;
// 边框半径
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-pill: 50px;
@border-radius-circle: 50%;
// 阴影
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
// 容器宽度
@container-sm: 540px;
@container-md: 720px;
@container-lg: 960px;
@container-xl: 1140px;
// 对动态属性名使用插值
@property: margin;
@position: top;
.element {
@{property}-@{position}: @spacing-md;
}
// 输出: margin-top: 16px;
// mixins.less
// 清除浮动
.clearfix() {
&::after {
content: '';
display: table;
clear: both;
}
}
// Flexbox 工具
.flex-center() {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between() {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-column() {
display: flex;
flex-direction: column;
}
// 用法
.container {
.flex-center();
min-height: 100vh;
}
// 带参数的混合
.button-variant(@bg-color, @text-color: white) {
background-color: @bg-color;
color: @text-color;
border: none;
&:hover {
background-color: darken(@bg-color, 10%);
}
&:active {
background-color: darken(@bg-color, 15%);
}
&:disabled {
background-color: lighten(@bg-color, 20%);
cursor: not-allowed;
}
}
// 用法
.btn-primary {
.button-variant(@color-primary);
}
.btn-secondary {
.button-variant(@color-secondary);
}
.btn-danger {
.button-variant(@color-error);
}
// 媒体查询混合
.respond-to(@breakpoint, @rules) {
@media (min-width: @breakpoint) {
@rules();
}
}
.respond-below(@breakpoint, @rules) {
@media (max-width: (@breakpoint - 1px)) {
@rules();
}
}
.respond-between(@min, @max, @rules) {
@media (min-width: @min) and (max-width: (@max - 1px)) {
@rules();
}
}
// 用法
.element {
width: 100%;
.respond-to(@breakpoint-md, {
width: 50%;
});
.respond-to(@breakpoint-lg, {
width: 33.333%;
});
}
.font-size(@size, @line-height: @line-height-base) {
font-size: @size;
line-height: @line-height;
}
.truncate(@lines: 1) when (@lines = 1) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate(@lines) when (@lines > 1) {
display: -webkit-box;
-webkit-line-clamp: @lines;
-webkit-box-orient: vertical;
overflow: hidden;
}
// 标题样式
.heading(@size) {
font-family: @font-family-heading;
font-size: @size;
font-weight: @font-weight-bold;
line-height: @line-height-heading;
margin-bottom: @spacing-md;
}
// 用法
h1 {
.heading(@font-size-h1);
}
.card-title {
.truncate(2);
}
.visually-hidden() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible() {
&:focus-visible {
outline: 2px solid @color-primary;
outline-offset: 2px;
}
}
// 用法
.sr-only {
.visually-hidden();
}
.interactive-element {
.focus-visible();
}
// 块元素修饰符模式
.card {
// 块样式
background: @color-background;
border-radius: @border-radius-md;
box-shadow: @shadow-md;
overflow: hidden;
// 元素:块的子元素
&__header {
padding: @spacing-md;
border-bottom: 1px solid @color-border;
}
&__title {
margin: 0;
font-size: @font-size-large;
font-weight: @font-weight-bold;
}
&__image {
width: 100%;
height: auto;
display: block;
}
&__body {
padding: @spacing-md;
}
&__footer {
padding: @spacing-md;
border-top: 1px solid @color-border;
background: lighten(@color-border, 5%);
}
// 修饰符:块的变体
&--featured {
border: 2px solid @color-primary;
}
&--horizontal {
display: flex;
.card__image {
width: 200px;
flex-shrink: 0;
}
}
&--compact {
.card__header,
.card__body,
.card__footer {
padding: @spacing-sm;
}
}
}
// 错误:嵌套过深
.nav {
.nav-list {
.nav-item {
.nav-link {
.nav-icon {
// 5 层 - 产生高特异性
}
}
}
}
}
// 正确:扁平化 BEM 结构,浅层嵌套
.nav {
display: flex;
align-items: center;
}
.nav__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav__item {
margin: 0 @spacing-sm;
}
.nav__link {
color: @color-text;
text-decoration: none;
transition: color @transition-base;
// 可接受:状态嵌套
&:hover,
&:focus {
color: @color-primary;
}
// 可接受:修饰符嵌套
&--active {
color: @color-primary;
font-weight: @font-weight-bold;
}
}
.component {
// 伪元素
&::before,
&::after {
content: '';
position: absolute;
}
// 状态伪类
&:hover,
&:focus,
&:active {
// 状态样式
}
// BEM 修饰符
&--variant {
// 修饰符样式
}
// 媒体查询
.respond-to(@breakpoint-md, {
// 响应式样式
});
}
// 颜色函数
.element {
// 变亮/变暗
background: lighten(@color-primary, 20%);
border-color: darken(@color-primary, 10%);
// 饱和度
color: saturate(@color-primary, 20%);
// 混合颜色
background: mix(@color-primary, @color-secondary, 50%);
// 淡出(不透明度)
background: fade(@color-primary, 50%);
// 颜色提取
@hue: hue(@color-primary);
@saturation: saturation(@color-primary);
@lightness: lightness(@color-primary);
}
// 数学函数
.element {
width: percentage(1/3); // 33.33333%
height: round(10.5px); // 11px
margin: ceil(4.2px); // 5px
padding: floor(4.8px); // 4px
font-size: abs(-10px); // 10px
z-index: min(5, 10, 3); // 3
z-index: max(5, 10, 3); // 10
}
// 字符串函数
@selector: e(".my-class"); // 转义
@path: %("url(%s)", "image.png"); // 格式化
// Less 没有真正的函数,使用带输出的混合
.spacing(@multiplier) {
@result: (@spacing-unit * @multiplier);
}
// 带变量作用域的用法
.element {
.spacing(3);
padding: @result; // 24px
}
// 替代方案:直接使用变量
.padding(@multiplier) {
padding: (@spacing-unit * @multiplier);
}
.margin(@multiplier) {
margin: (@spacing-unit * @multiplier);
}
.element {
.padding(2);
.margin(1);
}
// 生成列类
.generate-columns(@n, @i: 1) when (@i =< @n) {
.col-@{i} {
width: percentage(@i / @n);
}
.generate-columns(@n, (@i + 1));
}
// 用法:生成 .col-1 到 .col-12
.generate-columns(12);
// 生成间距工具类
.generate-spacing(@i: 0) when (@i =< 8) {
.m-@{i} {
margin: (@spacing-unit * @i);
}
.mt-@{i} {
margin-top: (@spacing-unit * @i);
}
.mb-@{i} {
margin-bottom: (@spacing-unit * @i);
}
.p-@{i} {
padding: (@spacing-unit * @i);
}
.pt-@{i} {
padding-top: (@spacing-unit * @i);
}
.pb-@{i} {
padding-bottom: (@spacing-unit * @i);
}
.generate-spacing((@i + 1));
}
.generate-spacing();
// 定义颜色列表
@color-names: primary, secondary, success, danger, warning, info;
@color-values: @color-primary, @color-secondary, @color-success, @color-error, @color-warning, @color-info;
// 生成颜色工具类
.generate-colors(@names, @values, @i: 1) when (@i =< length(@names)) {
@name: extract(@names, @i);
@value: extract(@values, @i);
.text-@{name} {
color: @value;
}
.bg-@{name} {
background-color: @value;
}
.border-@{name} {
border-color: @value;
}
.generate-colors(@names, @values, (@i + 1));
}
.generate-colors(@color-names, @color-values);
// 带守卫的混合
.button-size(@size) when (@size = small) {
padding: @spacing-xs @spacing-sm;
font-size: @font-size-small;
}
.button-size(@size) when (@size = medium) {
padding: @spacing-sm @spacing-md;
font-size: @font-size-base;
}
.button-size(@size) when (@size = large) {
padding: @spacing-md @spacing-lg;
font-size: @font-size-large;
}
// 用法
.btn-sm {
.button-size(small);
}
.btn-md {
.button-size(medium);
}
.btn-lg {
.button-size(large);
}
// 带比较运算符的守卫
.set-color(@lightness) when (@lightness > 50%) {
color: black;
}
.set-color(@lightness) when (@lightness =< 50%) {
color: white;
}
// 分组相关混合
#utils {
.clearfix() {
&::after {
content: '';
display: table;
clear: both;
}
}
.visually-hidden() {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
}
#buttons {
.base() {
display: inline-flex;
align-items: center;
border: none;
cursor: pointer;
transition: all @transition-base;
}
.primary() {
#buttons.base();
background: @color-primary;
color: white;
}
}
// 用法
.container {
#utils.clearfix();
}
.btn-primary {
#buttons.primary();
}
!importantextend 的使用,因为它会增加文件大小.element {
// 定位
position: relative;
top: 0;
right: 0;
z-index: @z-index-dropdown;
// 显示与盒模型
display: flex;
flex-direction: column;
width: 100%;
max-width: @container-md;
padding: @spacing-md;
margin: @spacing-sm auto;
// 排版
font-family: @font-family-base;
font-size: @font-size-base;
font-weight: @font-weight-normal;
line-height: @line-height-base;
color: @color-text;
text-align: left;
// 视觉
background-color: @color-background;
border: 1px solid @color-border;
border-radius: @border-radius-md;
box-shadow: @shadow-sm;
// 动画
transition: all @transition-base;
// 杂项
cursor: pointer;
overflow: hidden;
}
每周安装量
100
代码仓库
GitHub 星标数
42
首次出现
2026年1月25日
安全审计
安装于
opencode81
codex77
cursor77
claude-code75
gemini-cli68
github-copilot60
You are an expert in Less (Leaner Style Sheets), CSS architecture, and maintainable stylesheet development.
less/
├── abstracts/
│ ├── variables.less # Global variables
│ ├── mixins.less # Reusable mixins
│ └── functions.less # Less functions
├── base/
│ ├── reset.less # CSS reset/normalize
│ ├── typography.less # Typography rules
│ └── base.less # Base element styles
├── components/
│ ├── buttons.less # Button components
│ ├── cards.less # Card components
│ └── forms.less # Form components
├── layout/
│ ├── header.less # Header layout
│ ├── footer.less # Footer layout
│ ├── grid.less # Grid system
│ └── navigation.less # Navigation layout
├── pages/
│ ├── home.less # Home page specific
│ └── contact.less # Contact page specific
├── themes/
│ └── default.less # Default theme
├── vendors/
│ └── normalize.less # Third-party styles
└── main.less # Main manifest file
// main.less
// Abstracts
@import "abstracts/variables";
@import "abstracts/mixins";
@import "abstracts/functions";
// Vendors
@import "vendors/normalize";
// Base
@import "base/reset";
@import "base/typography";
@import "base/base";
// Layout
@import "layout/grid";
@import "layout/header";
@import "layout/navigation";
@import "layout/footer";
// Components
@import "components/buttons";
@import "components/cards";
@import "components/forms";
// Pages
@import "pages/home";
// Themes
@import "themes/default";
// variables.less
// Colors - use semantic names
@color-primary: #3498db;
@color-primary-light: lighten(@color-primary, 15%);
@color-primary-dark: darken(@color-primary, 15%);
@color-secondary: #2ecc71;
@color-text: #333333;
@color-text-muted: #666666;
@color-background: #ffffff;
@color-border: #e0e0e0;
@color-error: #e74c3c;
@color-success: #27ae60;
@color-warning: #f39c12;
@color-info: #17a2b8;
// Typography
@font-family-base: 'Helvetica Neue', Arial, sans-serif;
@font-family-heading: 'Georgia', serif;
@font-family-mono: 'Consolas', monospace;
@font-size-base: 1rem;
@font-size-small: 0.875rem;
@font-size-large: 1.25rem;
@font-size-h1: 2.5rem;
@font-size-h2: 2rem;
@font-size-h3: 1.75rem;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;
@line-height-base: 1.5;
@line-height-heading: 1.2;
// Spacing Scale
@spacing-unit: 8px;
@spacing-xs: (@spacing-unit * 0.5); // 4px
@spacing-sm: @spacing-unit; // 8px
@spacing-md: (@spacing-unit * 2); // 16px
@spacing-lg: (@spacing-unit * 3); // 24px
@spacing-xl: (@spacing-unit * 4); // 32px
@spacing-xxl: (@spacing-unit * 6); // 48px
// Breakpoints
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
@breakpoint-xxl: 1400px;
// Z-index Scale
@z-index-dropdown: 1000;
@z-index-sticky: 1020;
@z-index-fixed: 1030;
@z-index-modal-backdrop: 1040;
@z-index-modal: 1050;
@z-index-popover: 1060;
@z-index-tooltip: 1070;
// Transitions
@transition-base: 0.3s ease;
@transition-fast: 0.15s ease;
@transition-slow: 0.5s ease;
// Border Radius
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-pill: 50px;
@border-radius-circle: 50%;
// Shadows
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
// Container widths
@container-sm: 540px;
@container-md: 720px;
@container-lg: 960px;
@container-xl: 1140px;
// Use interpolation for dynamic property names
@property: margin;
@position: top;
.element {
@{property}-@{position}: @spacing-md;
}
// Output: margin-top: 16px;
// mixins.less
// Clearfix
.clearfix() {
&::after {
content: '';
display: table;
clear: both;
}
}
// Flexbox utilities
.flex-center() {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between() {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-column() {
display: flex;
flex-direction: column;
}
// Usage
.container {
.flex-center();
min-height: 100vh;
}
// Mixins with parameters
.button-variant(@bg-color, @text-color: white) {
background-color: @bg-color;
color: @text-color;
border: none;
&:hover {
background-color: darken(@bg-color, 10%);
}
&:active {
background-color: darken(@bg-color, 15%);
}
&:disabled {
background-color: lighten(@bg-color, 20%);
cursor: not-allowed;
}
}
// Usage
.btn-primary {
.button-variant(@color-primary);
}
.btn-secondary {
.button-variant(@color-secondary);
}
.btn-danger {
.button-variant(@color-error);
}
// Media query mixins
.respond-to(@breakpoint, @rules) {
@media (min-width: @breakpoint) {
@rules();
}
}
.respond-below(@breakpoint, @rules) {
@media (max-width: (@breakpoint - 1px)) {
@rules();
}
}
.respond-between(@min, @max, @rules) {
@media (min-width: @min) and (max-width: (@max - 1px)) {
@rules();
}
}
// Usage
.element {
width: 100%;
.respond-to(@breakpoint-md, {
width: 50%;
});
.respond-to(@breakpoint-lg, {
width: 33.333%;
});
}
.font-size(@size, @line-height: @line-height-base) {
font-size: @size;
line-height: @line-height;
}
.truncate(@lines: 1) when (@lines = 1) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate(@lines) when (@lines > 1) {
display: -webkit-box;
-webkit-line-clamp: @lines;
-webkit-box-orient: vertical;
overflow: hidden;
}
// Heading styles
.heading(@size) {
font-family: @font-family-heading;
font-size: @size;
font-weight: @font-weight-bold;
line-height: @line-height-heading;
margin-bottom: @spacing-md;
}
// Usage
h1 {
.heading(@font-size-h1);
}
.card-title {
.truncate(2);
}
.visually-hidden() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible() {
&:focus-visible {
outline: 2px solid @color-primary;
outline-offset: 2px;
}
}
// Usage
.sr-only {
.visually-hidden();
}
.interactive-element {
.focus-visible();
}
// Block Element Modifier pattern
.card {
// Block styles
background: @color-background;
border-radius: @border-radius-md;
box-shadow: @shadow-md;
overflow: hidden;
// Element: child of block
&__header {
padding: @spacing-md;
border-bottom: 1px solid @color-border;
}
&__title {
margin: 0;
font-size: @font-size-large;
font-weight: @font-weight-bold;
}
&__image {
width: 100%;
height: auto;
display: block;
}
&__body {
padding: @spacing-md;
}
&__footer {
padding: @spacing-md;
border-top: 1px solid @color-border;
background: lighten(@color-border, 5%);
}
// Modifier: variant of block
&--featured {
border: 2px solid @color-primary;
}
&--horizontal {
display: flex;
.card__image {
width: 200px;
flex-shrink: 0;
}
}
&--compact {
.card__header,
.card__body,
.card__footer {
padding: @spacing-sm;
}
}
}
// BAD: Too deep nesting
.nav {
.nav-list {
.nav-item {
.nav-link {
.nav-icon {
// 5 levels - creates high specificity
}
}
}
}
}
// GOOD: Flat BEM structure with shallow nesting
.nav {
display: flex;
align-items: center;
}
.nav__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav__item {
margin: 0 @spacing-sm;
}
.nav__link {
color: @color-text;
text-decoration: none;
transition: color @transition-base;
// Acceptable: state nesting
&:hover,
&:focus {
color: @color-primary;
}
// Acceptable: modifier nesting
&--active {
color: @color-primary;
font-weight: @font-weight-bold;
}
}
.component {
// Pseudo-elements
&::before,
&::after {
content: '';
position: absolute;
}
// State pseudo-classes
&:hover,
&:focus,
&:active {
// State styles
}
// BEM modifiers
&--variant {
// Modifier styles
}
// Media queries
.respond-to(@breakpoint-md, {
// Responsive styles
});
}
// Color functions
.element {
// Lighten/darken
background: lighten(@color-primary, 20%);
border-color: darken(@color-primary, 10%);
// Saturation
color: saturate(@color-primary, 20%);
// Mix colors
background: mix(@color-primary, @color-secondary, 50%);
// Fade (opacity)
background: fade(@color-primary, 50%);
// Color extraction
@hue: hue(@color-primary);
@saturation: saturation(@color-primary);
@lightness: lightness(@color-primary);
}
// Math functions
.element {
width: percentage(1/3); // 33.33333%
height: round(10.5px); // 11px
margin: ceil(4.2px); // 5px
padding: floor(4.8px); // 4px
font-size: abs(-10px); // 10px
z-index: min(5, 10, 3); // 3
z-index: max(5, 10, 3); // 10
}
// String functions
@selector: e(".my-class"); // Escape
@path: %("url(%s)", "image.png"); // Format
// Less doesn't have true functions, use mixins with output
.spacing(@multiplier) {
@result: (@spacing-unit * @multiplier);
}
// Usage with variable scope
.element {
.spacing(3);
padding: @result; // 24px
}
// Alternative: use variables directly
.padding(@multiplier) {
padding: (@spacing-unit * @multiplier);
}
.margin(@multiplier) {
margin: (@spacing-unit * @multiplier);
}
.element {
.padding(2);
.margin(1);
}
// Generate column classes
.generate-columns(@n, @i: 1) when (@i =< @n) {
.col-@{i} {
width: percentage(@i / @n);
}
.generate-columns(@n, (@i + 1));
}
// Usage: generates .col-1 through .col-12
.generate-columns(12);
// Generate spacing utilities
.generate-spacing(@i: 0) when (@i =< 8) {
.m-@{i} {
margin: (@spacing-unit * @i);
}
.mt-@{i} {
margin-top: (@spacing-unit * @i);
}
.mb-@{i} {
margin-bottom: (@spacing-unit * @i);
}
.p-@{i} {
padding: (@spacing-unit * @i);
}
.pt-@{i} {
padding-top: (@spacing-unit * @i);
}
.pb-@{i} {
padding-bottom: (@spacing-unit * @i);
}
.generate-spacing((@i + 1));
}
.generate-spacing();
// Define color list
@color-names: primary, secondary, success, danger, warning, info;
@color-values: @color-primary, @color-secondary, @color-success, @color-error, @color-warning, @color-info;
// Generate color utilities
.generate-colors(@names, @values, @i: 1) when (@i =< length(@names)) {
@name: extract(@names, @i);
@value: extract(@values, @i);
.text-@{name} {
color: @value;
}
.bg-@{name} {
background-color: @value;
}
.border-@{name} {
border-color: @value;
}
.generate-colors(@names, @values, (@i + 1));
}
.generate-colors(@color-names, @color-values);
// Mixin with guards
.button-size(@size) when (@size = small) {
padding: @spacing-xs @spacing-sm;
font-size: @font-size-small;
}
.button-size(@size) when (@size = medium) {
padding: @spacing-sm @spacing-md;
font-size: @font-size-base;
}
.button-size(@size) when (@size = large) {
padding: @spacing-md @spacing-lg;
font-size: @font-size-large;
}
// Usage
.btn-sm {
.button-size(small);
}
.btn-md {
.button-size(medium);
}
.btn-lg {
.button-size(large);
}
// Guards with comparison operators
.set-color(@lightness) when (@lightness > 50%) {
color: black;
}
.set-color(@lightness) when (@lightness =< 50%) {
color: white;
}
// Group related mixins
#utils {
.clearfix() {
&::after {
content: '';
display: table;
clear: both;
}
}
.visually-hidden() {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
}
#buttons {
.base() {
display: inline-flex;
align-items: center;
border: none;
cursor: pointer;
transition: all @transition-base;
}
.primary() {
#buttons.base();
background: @color-primary;
color: white;
}
}
// Usage
.container {
#utils.clearfix();
}
.btn-primary {
#buttons.primary();
}
!important except for utility overridesextend as it can increase file size.element {
// Positioning
position: relative;
top: 0;
right: 0;
z-index: @z-index-dropdown;
// Display & Box Model
display: flex;
flex-direction: column;
width: 100%;
max-width: @container-md;
padding: @spacing-md;
margin: @spacing-sm auto;
// Typography
font-family: @font-family-base;
font-size: @font-size-base;
font-weight: @font-weight-normal;
line-height: @line-height-base;
color: @color-text;
text-align: left;
// Visual
background-color: @color-background;
border: 1px solid @color-border;
border-radius: @border-radius-md;
box-shadow: @shadow-sm;
// Animation
transition: all @transition-base;
// Misc
cursor: pointer;
overflow: hidden;
}
Weekly Installs
100
Repository
GitHub Stars
42
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode81
codex77
cursor77
claude-code75
gemini-cli68
github-copilot60
Android 整洁架构指南:模块化设计、依赖注入与数据层实现
1,400 周安装
ActiveCampaign自动化集成指南:通过Rube MCP实现CRM与营销自动化
72 周安装
通过Rube MCP实现Make自动化:集成Composio工具包管理场景与操作
72 周安装
Microsoft Teams自动化指南:通过Rube MCP实现频道消息、聊天与会议管理
72 周安装
Electrobun 最佳实践:TypeScript + Bun 跨平台桌面应用开发指南
72 周安装
ATXP Memory:AI代理记忆管理工具 - 云端备份与本地向量搜索
72 周安装
Brave Search Spellcheck API:智能拼写检查与查询纠正,提升搜索准确性
72 周安装