管理样式风格

一个页面的颜色,布局等样式会因为不同开发者展现出不同的样式。然而开发过程中需要我们保持统一的风格。例如:我常使用的vux。接下来我们来看看如何统一配置UI组件样式。

vux 定义的样式

我们打开 vux 源码 根据 vux/src/styles/variable.less 路径找到定义样式的文件。也可以直接打开github 地址查看。

vux 中使用的是 less 文件直接在文件中定义变量及对应的颜色。我们选中@theme-color 发现有 17 处引用,说明定义的主题色只是改变了这 17 处组件的样式。其他的样式都在 variable.less 中有自己默认定义的颜色。

修改主题

主题色修改暂时只支持配合 vux-loader 使用,需要注意的是 vux 中使用的是 less 我们还需要安装 less-loader

1. vux yarn add vux 安装

2. yarn add vux-loader -D

3. yarn add less-loader -D

4. 也可以通过 yarn add vux-loader less-loader -D 同时安装多个

   安装好依赖后我们开始定义主题颜色,以 x-button 为例

   来的 vux 官网下的样式变量这里提供了可以修改按钮样式的变量。也可以到 vux/src/styles/variable.less 源码中去查看。在修改之前查看下 vux 自定义的主题颜色
   新建一个 vux.less 文件定义样式如下

// vux种定义的类名,更改原本vux的颜色
@button-primary-bg-color: #2f7dcd;
@button-primary-active-bg-color: #1e5da6;
@button-primary-disabled-bg-color: #80ade4;
@button-default-bg-color: #666;
@button-default-active-bg-color: #777;
@button-default-disabled-bg-color: #999;
@button-warn-bg-color: #fcd;
@button-warn-active-bg-color: #dad;
@button-warn-disabled-bg-color: #dcd;
复制代码

在 build/webpack.base.conf.js 文件中

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
   // 加载vux组件
   'vux-ui',
   // 加载自定义的less组件用来覆盖vux中相同类名的样式
    {
      // 固定名字
      name: 'less-theme',
      // 文件引入路径
      path: 'src/styles/vux.less'
    }
  ]
})
复制代码

sass定义常用样式

项目中我们常常会用到相同的样式如:(颜色,箭头,对勾,超出省略等),每个人实现的方式可能不同。为了统一样式和方便维护,这个时候我们可以使用sass。

安装

yarn add node-sass sass-loader -D
复制代码

定义颜色

我们新建一个样式列表来统一我们组件的颜色,其中包括主题色、文字颜色顿号、背景颜色等。创建一个var.scss用于存放颜色值

|--var.scss
复制代码

• 如果分配给变量的值后面添加了!default标志 ，这意味着该变量如果已经赋值，那么它不会被重新赋值

// 主体背景色
$--color-primary: #2f7dcd !default;
// 次级颜色
$--color-secondary: #46c37b;
// 文字颜色
$--color-text-primary: #333333 !default;
$--color-text-regular: #666666 !default;
$--color-text-secondary: #999999 !default;
$--color-text-placeholder: #bebebe !default;
// 警告
$--color-warning: #f5a623 !default;
$--color-danger: #f5222d !default;
// 分割线、边框颜色
$--background-color-base: #ececec !default;
// 页面底色
$--border-color-base: #f5f5f5 !default;
$--border-color-regular: #c9c9c9 !default;
复制代码

制作箭头

我们可以生成一个utils.scss用于存放我们常用的样式放在mixins文件夹下

|--var.scss
|--mixins
    |--arrow.scss
复制代码

// 定义为绝对定位,父级需要定义为relative 
@mixin arrow($width, $height, $borderWidth, $angle) {
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    // '+' 字符串运算可用于连接字符串
    width: $width + px;
    height: $height + px;
    border-width: $borderWidth + px $borderWidth + px 0 0;
    border-style: solid;
    // 中心对齐 rotate为箭头旋转的角度
    transform: translateY(-75%) rotate($angle + deg);
  }
}

复制代码

来看这段scss做了什么,首先通过混合器使用@mixin标识符定义,应用于大段重用的样式。这个标识符给一大段样式赋予一个名字例如arrow。使用sass中的变量,变量以美元符号开始。()内接收到的变量都可以在{}中使用。我们来看看如何使用这个scss样式。

    // html
    <span class="arrow">这是一段文字</span>
      
    <style lang='scss' scoped>
        // 引入scss文件
        @import '../../theme/mixins/arrow.scss'
        .arrow {
          position: relative;
          // 使用 @include 指令可以将混入（mixin）需要一个混入的名称如果有参数则通过()传入参数
          @include arrow(6, 6, 1, 135);
          &:after {
            right: -15px;
          }
        }
    <style>
复制代码

这样我们就可以有一个箭头了。来看看效果

类似js中函数的写法,这样我们可以通过传入参数的方式动态生成我们想要的箭头。甚至我们可以设定scss默认样式,这样方便统一样式。改写后如下:

@mixin arrow($width: 6, $height: 6, $borderWidth: 1, $angle: 135) {
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    width: $width + px;
    height: $height + px;
    border-width: $borderWidth + px $borderWidth + px 0 0;
    border-style: solid;
    transform: translateY(-75%) rotate($angle + deg);
  }
}
复制代码

在include使用时只需要引入即可,默认可以不传入参数

.arrow {
  position: relative;
  @include arrow;
  &:after {
    transition: 1s;
    right: -15px;
  }
  &__rotate {
    &:after {
      transform: translateY(-25%) rotate(-45deg);
    }
  }
}
复制代码

加上动画和模拟实际应用场景实现箭头旋转的效果。

max-height 过渡

@mixin maxHeight($height,$time) {
  .translation-enter-active,
  .translation-leave-active {
    overflow: hidden;
    max-height: $height + px;
    transition: max-height $time;
  }
  .translation-enter,
  .translation-leave-to {
    max-height: 0;
  }
}
复制代码

超出...省略效果

// 单行
@mixin ellipsis($w: auto) {
  width: $w;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
复制代码

// 设置行数
@mixin ellipsisLn($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}
复制代码

打勾

@mixin setcheckedabs($width: 4, $height: 8, $borderWidth: 2, $c: #f00) {
  &:after {
    position: absolute;
    top: 50%;
    content: '';
    width: $width + px;
    height: $height + px;
    border-bottom: $borderWidth + px solid $c;
    border-right: $borderWidth + px solid $c;
    transform: translateY(-75%) rotate(45deg);
  }
}
复制代码

本文列举了四种样式,当然只要你觉得常用的样式都可以写在scss文件中,这减少了每次写代码的时间,统一风格，提高效率。

小结

通过组件样式的统一化 、 提取常用样式 , 来加快开发统一样式风格。