第二章:React:从0到1组件库构建——css篇

一、css样式初始化定义

其实我一直就纠结到底要不要写这一章，对于css而言我感觉好多人都不屑于顾，但是我感觉并不是每个人都会"真正"的写css,本人也是特别讨厌写css，但是迫于压力，只能重新写起css。废话不多说先看下目录设计

react-ally-component
|-- src
    |-- components

    |-- styles
        |-- index.scss // 所有组件的css 以及 初始化的css都引入到当前文件中
        |-- _animation.scss // 关于动画的css
        |-- _mixin.scss  // scss混合宏的封装
                |-- _reset.scss  // 初始化的css
                |-- _variables.scss // scss的所有变量

二、_variables

我们先从_variables文件说起，我感觉所有不知如何设计组件库的同学有一部分原因都卡在初始样式这一关，因为你需要设计整个UI框架的色彩规范、布局规范、以及一些细节。至今我也不知如何下手，只能摸着石头过河

2-1、色彩设计

色彩设计你可以参考一些色彩网站，但是本章节咱们参考Ant Design的色彩设计(我们目前只考虑功能色)
所谓的功能色 : 比如成功、出错、失败、提醒、链接等

// 灰色
$white:    #fff    !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000    !default;

// 功能色
$blue:     #1890ff;
$green:    #52c41a;
$red:      #ff4d4f;
$cyan:     #faad14;


$primary:   $blue  !default;
$success:   $green !default;
$warning:   $cyan  !default;
$danger:    $red   !default;

// 功能色集合
$theme-colors: 
(
  "primary":    $primary,
  "success":    $success,
  "warning":    $warning,
  "danger":     $danger,
);

// 字体
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
$font-family-base: $font-family !default;

// 字体大小
$font-size-base: 1rem;
$font-size-lg:   $font-size-base * 1.25 !default;
$font-size-sm:   $font-size-base * .875 !default;

// 行高
$line-height-base:            1.5 !default;
$line-height-lg:              2 !default;
$line-height-sm:              1.25 !default;

// 链接
$link-color:                              $primary !default;
$link-decoration:                         none !default;
$link-hover-color:                        darken($link-color, 15%) !default;
$link-hover-decoration:                   underline !default;

// body
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
$body-text-align:           null !default;

// 边框
$border-width:                1px !default;
$border-color:                $gray-300 !default;

$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;

三、_reset.scss

reset为重置样式文件

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
    margin: 0;
    padding: 0;
}
img {
    display: block;
}

address,
caption,
cite,
code,
dfn,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ul,
ol,
li {
    list-style: none;
}

body {
    margin: 0; 
    font-family: $font-family-base;
    font-size: $font-size-base;
    font-weight: $font-weight-base;
    line-height: $line-height-base;
    color: $body-color;
    text-align: $body-text-align;
    background-color: $body-bg; 
}

.border-1px::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  pointer-events: none;
}

a {
  color: $link-color;
  text-decoration: $link-decoration;

  &:hover {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

四、index.scss

index.scss为css入口文件,组件的样式以及通用样式在此引入

  // config
@import "variables";

//layout
@import "reset";

// button
@import "../components/Button/mixin";
@import "../components/Button/style";

五、Button组件为例

目录结构

react-ally-component
|-- src
    |-- components
                |-- Button
                      |-- conf.ts // ts类型文件
                        |-- Button.tsx // 组件编写文件
                        |-- Button.stories.tsx // story 文件
                        |-- _style.scss // 组件样式文件
                        |-- _mixin.scss // 组件混合宏文件
                        |-- index.ts // 组件导出文件
    |-- styles
        |-- index.scss // 所有组件的css 以及 初始化的css都引入到当前文件中
        |-- _animation.scss // 关于动画的css
        |-- _mixin.scss  // scss混合宏的封装
                |-- _reset.scss  // 初始化的css
                |-- _variables.scss // scss的所有变量

5-1、_style.scss

.btn{
    position: relative;
    display: inline-block;
    font-weight: $btn-font-weight;
    line-height: $btn-line-height;
    color:$body-color;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    border: $border-width solid transparent;
    box-shadow: $btn-box-shadow;
    cursor: pointer;
    transition: $btn-transition;
    @include button-size( $btn-padding-y,  $btn-padding-x,  $btn-font-size,  $border-radius);
    box-shadow: $btn-box-shadow;
    &.disabled,
    &[disabled] {
      cursor: not-allowed;
      opacity: $btn-disabled-opacity;
      box-shadow: none;
      > * {
        pointer-events: none;
      }
    }
}

.btn-lg {
    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
  }
  .btn-sm {
    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
  }
  
  .btn-primary {
    @include button-style($primary, $primary, $white)
  }
  .btn-danger {
    @include button-style($danger, $danger, $white)
  }
  
  .btn-default {
    @include button-style($white, $gray-400, $body-color, $white, $primary, $primary)
  }
  
  .btn-link {
    font-weight: $font-weight-normal;
    color: $btn-link-color;
    text-decoration: $link-decoration;
    box-shadow: none;
    &:hover {
      color: $btn-link-hover-color;
      text-decoration: $link-hover-decoration; 
    }
    &:focus,
    &.focus {
      text-decoration: $link-hover-decoration;
      box-shadow: none;
    }
    &:disabled,
    &.disabled {
      color: $btn-link-disabled-color;
      pointer-events: none;
    }
  }

5-2、_mixin.scss

@mixin button-size($padding-y, $padding-x, $font-size, $border-raduis) {
    padding: $padding-y $padding-x;
    font-size: $font-size;
    border-radius: $border-raduis;
}


@mixin button-style(
  $background,
  $border,
  $color,
  $hover-background: lighten($background, 7.5%),
  $hover-border: lighten($border, 10%),
  $hover-color: $color,
) {
  color: $color;
  background: $background;
  border-color: $border;
  &:hover {
    color: $hover-color;
    background: $hover-background;
    border-color: $hover-border;    
  }
  &:focus,
  &.focus {
    color: $hover-color;
    background: $hover-background;
    border-color: $hover-border;    
  }
  &:disabled,
  &.disabled {
    color: $color;
    background: $background;
    border-color: $border;    
  }
}