LESS全局样式变量的设计和使用

image.png

统一的样式变量有助于全局风格和样式调整

第一步合理命名变量，务必通俗易懂。

style/variables.less

/**
 * 全局样式变量文件
 */

/**
 * 全局字体-颜色变量定义
 */
@font-color: #666;// 默认颜色
@font-color-title: #333;// 主要标题色
@font-color-subtitle: #444;// 副标题色
@font-color-success: #67C23A;// 成功字体色
@font-color-warning: #E6A23C;// 警告字体色
@font-color-danger: #F56C6C;// 危险字体色
@font-color-highlight: #409EFF;// 高亮字体色
@font-color-disabled: #909399;// 禁用字体色

/**
 * 全局字体-大小粗细变量定义
 */

@font-size: 14px;// 默认大小
@font-size-title: 18px;// 主要标题
@font-size-subtitle: 16px;// 副标题
@font-size-max: 30px;// 大标题
@font-size-mini: 12px;// 小文本
@font-weight-title: 700;// 标题加粗
@font-weight-subtitle: 500;// 副标题加粗

/**
 * 全局背景-颜色变量定义
 */
@bg-color: #f9fafc;// 主要背景色
@bg-color-white: #ffffff;// 白色
@bg-color-dark: #99a9bf;// 深背景色
@bg-color-light: #e5e9f2;// 浅背景色
@bg-color-success: #67C23A;// 成功背景色
@bg-color-warning: #E6A23C;// 警告背景色
@bg-color-danger: #F56C6C;// 危险背景色
@bg-color-highlight: #409EFF;// 高亮背景色
@bg-color-disabled: #909399;// 禁用背景色
/**
 * 全局padding\margin-空间尺寸变量定义
 */

@spacing-default: 5px;// 默认间距
@spacing-medium: 15px;// 普通间距
@spacing-small: 10px;// 小间距
@spacing-mini: 3px;// 微间距
@spacing-plus: 20px;// 大间距
@spacing-max: 30px;// 超大间距

/**
 * 全局border变量定义
 */
@border-color: #DCDFE6;// 默认的
@border-color-success: #67C23A;// 成功边框
@border-color-warning: #E6A23C;// 警告边框
@border-color-danger: #F56C6C;// 危险边框
@border-color-highlight: #409EFF;// 高亮边框
@border-color-disabled: #909399;// 禁用边框
@border-width: 1px;// 默认
@border-width-max: 2px;// 粗边框

/**
 * 全局border-radius变量定义
 */
@border-radius-mini: 2px;// 小圆角
@border-radius-small: 3px;// 默认圆角
@border-radius-medium: 4px;// 小圆角
@border-radius-plus: 5px;// 大圆角
@border-radius-max: 10px;// 超大圆角
@border-radius-circle: 30px;// 圆形圆角


/**
 * 全局box-shadow投影定义
 */
@box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); // 基础投影
@box-shadow-light: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); // 浅色投影

/**
 * 全局高宽变量定义
 */
@height: 40px;// 默认的
@height-medium: 30px;// 中间的
@height-small: 20px;// 小的
@height-mini: 10px;// 迷你的
@height-plus: 50px;// 加高的
@height-max: 60px;// 最高的


@width: 120px;// 默认的
@width-medium: 100px;// 中间的
@width-small: 80px;// 小的
@width-mini: 60px;// 迷你的
@width-plus: 200px;// 加高的
@width-max: 400px;// 最高的

HTML中如何使用

<template>
    <div class="container">
        <div class="header">
            <p class="title">我是标题</p>
            <p class="subtitle">我是副标题</p>
        </div>
        <div class="my-card">
            <div class="card-header">
                <p class="title">我是卡片头部标题</p>
            </div>
            <div class="card-body">
                <p>我是卡片主体部分</p>
            </div>
            <div class="card-footer">
                <button class="my-btn btn-success">成功按钮</button>
                <button class="my-btn btn-danger">危险按钮</button>
            </div>
        </div>
    </div>
</template>

style/common.less

/**
 * 全局通用组件样式
 */
.title {
    font-size: @font-size-title;
    color: @font-color-title;
    font-weight: @font-weight-title;
}
.subtitle {
    font-size: @font-size-subtitle;
    color: @font-color-subtitle;
    font-weight: @font-weight-subtitle;
}
.container{
    padding: @spacing-medium;
    background-color: @bg-color;
    text-align: left;
}

.header{
    padding: @spacing-small 0;
    border-bottom: @border-width solid @border-color;
    margin-bottom: @spacing-small;
}
.my-btn {
    font-size: @font-size;
    color: @font-color;
    text-align: center;
    padding: 0 @spacing-small;
    border: @border-width solid @border-color;
    height: @height-medium;
    line-height: 1;
    white-space: nowrap;
    border-radius: @border-radius-medium;
}
.btn-success {
    color: #fff;
    background-color: @bg-color-success;
    border-color: @bg-color-success;
}
.btn-danger {
    color: #fff;
    background-color: @bg-color-danger;
    border-color: @bg-color-danger;
}
.my-card {
    background-color: @bg-color-white;
    border-radius: @border-radius-small;
    box-shadow: @box-shadow;
    .card-header {
        border-bottom: @border-width solid @border-color;
        padding: @spacing-small;
    }
    .card-body {
        padding: @spacing-small;
    }
    .card-footer{
        border-top: @border-width solid @border-color;
        padding: @spacing-small;
        text-align: right;
        .my-btn+ .my-btn {
            margin-left: @spacing-small;
        }
    }
}

项目中使用

引入即可

@import url("../src/style/variables.less");
@import url("../src/style/common.less");