CSS 预处理脚本 Sass/Scss 进阶

进阶语法

1 混合器

开发者在编写整个网站的时候常常遇到类似或者一样的样式块,例如 Bootstrap 中的栅格样式。当然如果重复的次数少又简单,当然没有什么影响,可当项目变得越来越复杂,产品需求越来越多,复制粘贴就很难应付了。此时便可以使用 Sass 的混合器来实现大段样式的重用。混合器使用标识符 @mixin 定义,在 @mixin 后面跟一个自定义的名字,然后用花括号内填写需要重用的样式。定义完以后便可以在样式中使用 @include 引用这个混合器。

"CSS 预处理脚本 Sass/Scss 进阶"继续阅读

CSS 预处理脚本 Sass/Scss 入门

一、背景

使用前端 UI 框架(例如:Bootstrap、Mustard UI)的时候,虽然我们可以直接修改源码里面的 CSS 样式,但是修改起来非常麻烦低效;好在大多数框架是基于当下流行的 CSS 预处理脚本 Less 和 Sass 编译开发的,通过修改官方给出的 Sass 源码,我们可以很方便的定制它们。

"CSS 预处理脚本 Sass/Scss 入门"继续阅读

IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题

需求场景是在一个使用绝对定位布局的页面中,动态渲染一个可以滑动的子模块。

开发的时候在电脑 Chrome 上面调试没问题,安卓手机和常规 IOS 版本测试了也没问题,但是由于苹果最近更新了新的系统版本(14),在新版本上出现了滚动滑动不了的问题。

"IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题"继续阅读

CSS 实现内容高度不够的时候底部(footer)自动贴底

在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。

方案 1:Flex-Box

头部使用 position: sticky; 吸顶,再使用盒子(main)来包住内容(container > content)和底部(footer),这个盒子设置最小高度为除头部外的剩余屏幕高度:min-height: calc(100vh - 50px);,盒子里面使用弹性布局(flex: 1 1 auto;)让内容区域自动撑开,而底部保持不变(flex: 0 0 auto;),这样就有了内容不够时底部自动吸底,内容足够时底部自动下移的效果。

"CSS 实现内容高度不够的时候底部(footer)自动贴底"继续阅读

浏览器与 Node.js 的事件循环(Event Loop)有何区别?[转]

前言

本文我们将会介绍 JavaScript 实现异步的原理,并且了解了在浏览器和 Node.js 中 Event Loop 其实是不相同的。

一、线程与进程

1. 概念

我们经常说 JavaScript 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程?

官方的说法是:进程是 CPU 资源分配的最小单位;线程是 CPU 调度的最小单位。这两句话并不好理解,我们先来看张图。

  • 进程好比图中的工厂,有单独的专属自己的工厂资源。
  • 线程好比图中的工人,多个工人在一个工厂中协作工作,工厂与工人是 1:n 的关系。也就是说一个进程由一个或多个线程组成,线程是一个进程中代码的不同执行路线。
  • 工厂的空间是工人们共享的,这象征一个进程的内存空间是共享的,每个线程都可用这些共享内存。
  • 多个工厂之间独立存在。

"浏览器与 Node.js 的事件循环(Event Loop)有何区别?[转]"继续阅读