sing's blog

什么是HSL

　　很多朋友都听说过RGB颜色模型，即任何一种颜色，都是由红（Red）、绿（Green）、蓝（Blue）三原色以不同的比例相加而成的。
　　但是RGB模型对人类而言并不直观，比如我说一种颜色是由60%红，30%绿和90%蓝组成的，你应该很难想象出来，这到底是哪种颜色？
　　因此人们设计出了HSL色彩空间，来更加直观的表达颜色。HSL是色相（Hue）、饱和度（Saturation）和亮度（Lightness）这三个颜色属性的简称。

　　色相（Hue）是色彩的基本属性，就是人们平常所说的颜色名称，如紫色、青色、品红等等。我们可以在一个圆环上表示出所有的色相。

　　色环上的0度、120度、240度位置，分别对应了RGB模型的红、绿、蓝三原色。原色两两混合形成了二次色。比如黄色（60度）就是由红色和绿色混合而成；蓝色和绿色则相加形成青色（180度）；品红（300度）则由红蓝两色组成。

　　饱和度（Saturation）是指色彩的纯度，饱和度越高色彩越纯越浓，饱和度越低则色彩变灰变淡。

　　亮度（Lightness）指的是色彩的明暗程度，亮度值越高，色彩越白，亮度越低，色彩越黑。

　　我们把色相（Hue）、饱和度（Saturation）和亮度（Lightness）三个属性整合到一个圆柱中，就形成了HSL色彩空间模型。

sass中对hsl颜色的计算

adjust-hue($color, $degrees): 修改给定颜色的色相值。
使用-360deg 到 360deg之间的角度，然后返架指定颜色hue旋转这个角度后有颜色(正：顺时针方向，负：逆时针方向)。

1
2
3

adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)
adjust-hue(hsl(120, 30%, 90%), -60deg) => hsl(60, 30%, 90%)
adjust-hue(#811, 45deg) => #886a11

lighten($color, $amount): 使一个颜色更亮。

1

lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30)

darken($color, $amount): 使一个颜色变暗。

1

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)

saturate($color, $amount): 使一个颜色更加饱和。
desaturate($color, $amount): 减少一个颜色的饱和度。

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) : 对指定的颜色增加或减少相应一个或多个颜色值。

1
2
3

adjust-color(#102030, $blue: 5) => #102035
adjust-color(#102030, $red: -5, $blue: 5) => #0b2035
adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6)

scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) : 通过调整颜色的一个或者多个属性获取一个流畅颜色。

1
2
3

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150%, 170%), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)

change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) : 在该函数中传入的参数将直接替换原来的值，而不做任何的运算。

1
2
3

change-color(#102030, $blue: 5) => #102005
change-color(#102030, $red: 120, $blue: 5) => #782005
change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) => hsla(25, 100%, 40%, 0.8)

项目中的实际应用

比如智慧医院里有个功能叫“预问诊报告”，患者信息的部分有一个渐变。通过对当前主题色进行HSL计算，可以得到一个和UI几乎一致的渐变颜色效果。

1
2
3
4
5
6

.user-info {
  padding: 0 30rpx;
  background: linear-gradient(180deg, hsl(164, 94%, 34%) 0%, hsl(180, 100%, 30%) 100%);
  opacity: 0.8;
  border-radius: 20rpx;
}

UI图

HSL计算效果

github 报了安全警报，又到了升级的时候。
于是升级 hexo，升级完运行hexo server的时候，出来的不是我的博客界面，而是未生成的模板

1
2
3
4
5
6
7
8
9
10

{% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/sidebar.swig' as
sidebar_template %} {% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} -
{{config.subtitle }}{% endif %}{% endblock %} {% block page_class %} {% if is_home() %}page-home{% endif -%} {% endblock
%} {% block content %}
<section id="posts" class="posts-expand">
  {% for post in page.posts %} {{ post_template.render(post, true) }} {% endfor %}
</section>

{% include '_partials/pagination.swig' %} {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {%
endblock %}

这不就废了嘛，以为是 guthub 访问不畅文件下载不全，又重新下了两次，依然是这样。
经过搜索后得到答案，需要下载更高版本的 next 主题
下载最新版的方法可以参考https://theme-next.js.org/docs/getting-started/installation.html
直接下了个最新版的 next 主题，运行hexo server，漂亮的主题回来了。

关于 next 主题还有一些事没有完成
个性化定制的 next 文件还是应该同步到 github 上面存放，不然换个电脑就没了，得找时间完善这个事。

使用 Vue CLI 时，我们用vue create hello-world来创建一个新的 vue 项目。
但是如果在 Windows 下使用 Git Bash 来运行这个命令，是不能进行选择的。
这是文档上的警告，同时也是解决方法：

警告
如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。
你必须通过 winpty vue.cmd create hello-world 启动这个命令。
不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue=’winpty vue.cmd’ 你需要重新启动 Git Bash 终端会话以使更新后的 > bashrc 文件生效。

用 vue/cli 新建项目时需要注意一下。

使用 sass\less\Stylus 等预处理器时要定义一些全局变量、mixin，组件内使用是需要 import 进去的，每个文件都 import 一次很麻烦，所以需要使用自动化导入来帮我们处理。

如果已经安装失败了，先卸载

1

npm uninstall node-sass

升级 hexo

起因是 Github 报了一个依赖包的漏洞警告，想着顺便升级一下吧。
尝试了修改 dependencies 里版本号的方法，不出所料的坑了，install 以后 server 没启动起来。
索性新建了一个目录重新 hexo init 一个出来 ，把 source 里的数据复制回来，大功告成。再看报漏洞的那个依赖包，已经自动升级了。

VS Code 升级后有关 ESlint 自动修复的配置有变更。
在settings.json文件中发现了如下报错

这个设置项已经弃用了，请使用 editor.codeActionsOnSave 和 source.fixAll.eslint。

flex（ Flexible Box：弹性布局盒模型），用来为盒模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。可以做到简便、完整、响应式地实现各种页面布局。

使用 flex 布局的优势

1. 可在不同方向排列元素
2. 控制元素排序的方向
3. 控制元素的对齐方式
4. 控制元素之间等距

MVVM 是由 MVC 发展而来，通过在 Model 之上而在 View 之下增加一个非视觉的组件将来自 Model 的数据映射到 View 中。

总的说主要操作是在本地生成 ssh Key，然后把 ssh Key 添加到 Github/GitLab 的账户上，完成连接。