fix(Search): change the way of using sass method(color calculation)

Author: youluna

site/en-us/contributing.md

@@ -39,7 +39,19 @@ Chore|ci|docs|feat|fix|perf|refactor|revert|style|test|temp; `scope` is required
 7. If a pull request has multiple commits, rebase the multiple commit record to one commit record.
 
 ## Development Workflow
-After you clone the `@alifd/next` and install the dependencies with `npm install`, you can also run the following commands:
+
+1. Fork this repo to your own github account (step in the page https://github.com/alibaba-fusion/next , click on the fork button in the upper right cornor)
+2. Download the code you just forked on https://github.com/[your account]/next
+```
+git clone git@github.com:[your account]/next.git
+```
+3. Step in the files, create a new branch and start your work
+```
+cd next
+git checkout -b fix-issue-100
+```
+
+After doing all the stuff above and install the dependencies with `npm install`, you can also run the following commands:
 
 * `npm run dev component` start the debug page of the specified component
 
@@ -53,6 +65,19 @@ After you clone the `@alifd/next` and install the dependencies with `npm install
 
 * `npm run pack` package the file and generate the dist directory
 
+## Notes
+
+1. To support SSR (Server-Side-Render):
+    - Avoid using client variables such as windows as far as possible ( There is no window object on the server side. If you need to use it, you need to judge whether it exists step by step from the window. )
+    - Use `typeof` to check whether a client object exits or not
+        ```
+        if(window && window.autoScroll)
+        =>
+        if(typeof window != undefined && window.autoScroll) )
+        ```
+    - Avoid mounting timers (possible memory leaks) to global objects such as windows
+    - Avoid uncertain outputs such as random () (the output is predictable, independent of environment, etc.)
+2. The variable of SASS color calculation needs to start with `$color-calcualte-`, and should be written to `variable.scss` (not to `main.scss`), refer to `Search`, see #1029.
 
 ## Release Schedule
 

site/zh-cn/contributing.md

@@ -39,7 +39,19 @@ chore|ci|docs|feat|fix|perf|refactor|revert|style|test|temp；`scope` 必填，
 7. 如果一次 pull request 涉及到多次提交，请对提交记录进行 rebase 操作，缩减为一条提交记录
 
 ## 开发流程
-在你 clone 了 `@alifd/next` 的代码仓库并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令：
+
+1. 将代码 fork 到自己的 github 仓库 (在 https://github.com/alibaba-fusion/next 上，点击右上角 fork 按钮)
+2. 下载这份被 fork 的代码，你可以在 https://github.com/[your account]/next 找到刚 fork 的代码
+```
+git clone git@github.com:[your account]/next.git
+```
+3. 进入刚克隆的目录，创建分支进行开发
+```
+cd next
+git checkout -b fix-issue-100
+```
+
+在完成上述操作并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令：
 
 * `npm run dev component` 启动指定组件的调试页面
 
@@ -53,6 +65,24 @@ chore|ci|docs|feat|fix|perf|refactor|revert|style|test|temp；`scope` 必填，
 
 * `npm run pack` 打包文件，生成 dist 目录
 
+4. 开发完成后按照要求补充单元测试、运行单元测试、编写语义化的commit信息后，进入 https://github.com/[your account]/next 找到 `New pull request` 按钮提交PR
+
+5. 维护者可能会有一些修改建议，开发者可能需要根据修改建议反复修改代码。最终由组件库维护者合并PR，在下次发布时本次修改的功能生效。
+
+## 开发注意事项
+
+1. Fusion Next 作为前端组件库支持 SSR 因此需要做到：
+    - 尽量避免使用 window 等客户端变量 ( server端没有window对象，如果使用需要从window开始逐级判断是否存在 )
+    - 客户端端对象的判断用typeof
+        ```
+        if(window && window.autoScroll)
+        =>
+        if(typeof window != undefined && window.autoScroll) )
+        ```
+    - 避免往window等全局对象挂载定时器 (可能内存泄漏)
+    - 避免random()等不确定性输出(输出结果可预期，不依赖于环境等)
+2. sass 颜色变量计算的结果，需要以 `$color-calcualte-` 开头，写到组件的 variable.scss 中(不能写到main.scss中)，参考`Search`组件，#1029
+
 
 ## 发布周期
 

src/search/main.scss

@@ -201,10 +201,10 @@
             }
 
             .#{$css-prefix}input {
-                background: transparentize($search-normal-dark-bg-color, 1 - $search-normal-dark-bg-opacity);
+                background: $color-calculate-search-normal-dark-bg;
             }
             .#{$css-prefix}select {
-                background: transparentize($search-normal-dark-bg-color, 1 - $search-normal-dark-bg-opacity);
+                background: $color-calculate-search-normal-dark-bg;
             }
 
             &.#{$css-prefix}large {
@@ -287,10 +287,10 @@
                 color: $search-simple-dark-text-color;
             }
             .#{$css-prefix}input {
-                background: transparentize($search-simple-dark-bg-color, 1 - $search-simple-dark-bg-opacity);
+                background: $color-calculate-search-simple-dark-bg;
             }
             .#{$css-prefix}select {
-                background: transparentize($search-simple-dark-bg-color, 1 - $search-simple-dark-bg-opacity);
+                background: $color-calculate-search-simple-dark-bg;
             }
 
             #{$search-prefix}-left {

src/search/scss/variable.scss

@@ -328,3 +328,6 @@ $search-simple-dark-l-icon-size: $icon-m !default;
 /// icon
 /// @namespace size/simple
 $search-simple-dark-m-icon-size: $icon-xs !default;
+
+$color-calculate-search-normal-dark-bg: transparentize($search-normal-dark-bg-color, 1 - $search-normal-dark-bg-opacity) !default;
+$color-calculate-search-simple-dark-bg: transparentize($search-simple-dark-bg-color, 1 - $search-simple-dark-bg-opacity) !default;