-
React 知识点总结
 file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) url-loader:与 file-loader... -
Webpack 知识体系
webpack 中 loader 和 plugin 的区别是什么?、继承、颜色处理,函数==等),更容易阅读。 Sass与Scss是什么关系? ... -
理解 Git 工作流
Git 的工作区域和流程 缺点: 白屏时间过长:在 JS bundl... -
Fiber 原理
什么是Firber 一种数据结构:它可以用一个纯JS 对象来表示: 一个执行单元:每次执行完一个执行单元,React 就会检查现在还剩多少时间,如果没有时间就将控制权让出去。 Fiber关键特性: 增量渲染 不同更新的优先级 暂停,终止,复用渲... -
Fiber入门
你是如何理解fiber的?React Fiber 是一种基于浏览器的单线程调度算法。 React 16之前 ,reconcilation 算法实际上是递归,想要中断递归是很困难的,React 16 开始使用了循环来代替之前的递归。 Fiber:一... -
React VS Vue
一、组件化共同点:react和vue都推崇组件化,通过将页面拆分成一个一个小的可复用单元来提高代码的复用率和开发效率。 都有父子组件传参,都有数据状态管理,都有前端路由等。 不同点: React推荐的做法是JSX Vue 推荐的做法是 temp...
黄色的森林分出两条路,我选择人迹更少的那一条,从此决定我一生的道路。
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.side-tools-container {
position relative
.tools-item {
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--text-color-3)
font-size $tools-item-font-size
background var(--background-color-1)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--text-color-3)
}
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color-1)
}
}
+keep-tablet() {
width $tools-item-width * 0.9
height $tools-item-width * 0.9
margin-bottom 0.2rem
font-size $tools-item-font-size * 0.9
}
&.rss {
a {
width 100%
height 100%
border-radius $tools-item-border-radius
&:hover {
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
}
.side-tools-list {
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
&.show {
transform translateX(0)
opacity 1
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent') == true) {
.tool-scroll-to-top {
display none
&.show {
display flex
}
&:hover {
.percent {
display none
}
.arrow-up {
display flex
}
}
.arrow-up {
display none
}
.percent {
display flex
font-size 1rem
}
}
}
}
}