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)自动贴底"继续阅读

如何用 Sass/Less 实现单位转换(px to rem/em/vw)

移动端开发中,常常需要根据 UI 的设计稿做出适配移动端的网页,然而设计稿常常是以像素(px)为单位的,于是需要利用 CSS 预编译器 Sass / Less 来进行转化。

一、Sass

Sass 拥有类似于传统编程语言的函数 @function,可以接收参数并返回值。

"如何用 Sass/Less 实现单位转换(px to rem/em/vw)"继续阅读

使用 max-height 实现动画效果的“展开收起”

当页面中有大量非重要信息时通常使用“展开收起”来处理,常见的作法是在 display: none; 和其它属性之间切换。如果想加上些动画效果通常使用 JavaScript 来实现,若想用 CSS 来实现只需设置 max-height 的值在 0 和一个比目标元素高度大的值之间切换即可。

"使用 max-height 实现动画效果的“展开收起”"继续阅读

设置 box-sizing 为 border-box 后外边距(margin)会合并吗

border-box 告诉浏览器去理解你设置的边框内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

设置 box-sizing: border-box; 后,简言之:

  • 盒子的宽度 = border + padding + width
  • 盒子的高度 = border + padding + height

"设置 box-sizing 为 border-box 后外边距(margin)会合并吗"继续阅读