Sean的博客

辨析Sass中的Map和List

如果你使用过 Sass 3.3 之前的版本,那么你一定对那段时光颇有感触,那时候没有现如今这么好的条件,那时候的 Map 还只能用多重列表(lists of list)来模拟。多重列表可以实现复杂数据的嵌套定义,但却不是以键值对的形式实现的,所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式,非常便于组织数据。

void和undefined

一直以来,undefined 都不是 JavaScript 的关键字或保留字,这意味着我们可以修改 window.undefined 的值。由于 undefined 会被频繁调用作为比较运算的操作数等原因,修改 undefined 的值是有弊端的,所以在 ES5 规范之后,window.undefined 被定义为不可写、不可配置的属性。

gulp入门+ES6

Gulp 是一个基于 nodejs stream 的流式前端构建工具,与 Grunt 功能相同,专注于前端资源的编译、检查、压缩等自动化工作。

CSS居中完整指南

垂直居中、水平居中或者说水平垂直居中的方案很多种,但在实际当中,不管是具体业务或者入职面试,很多同学都有失足之处。那么使用CSS实现居中效果困难吗?显然不是。实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法判断哪种方法最合适。@Chris Coyier整理了一篇有关于居中的实现方法的文章,可以说这篇文章涵盖了各式各样的居中方法,希望这篇文章能帮你解决选择困难症~

vertical-align

vertical-align 是 CSS 中的一个常见属性,但是当你第一次学习和使用它的时候,往往会很困惑,所以我觉得有必要深入了解它的用法。最常见的使用方式就像下面这样:img { vertical-align: middle;}。从这里可以看到,vertical-align 属性被应用到了 img 标签上。img 标签是naturally inline elements,,它们可以嵌入到文本之中,而 vertical-align 属性就是用来控制它们相对于所在行的对齐方式。在我的印象中,开发者使用 vertical-align 最大困惑就是在块级元素上设置该属性不会有任何效果。

使用Sass制作居中效果

虽然使用 CSS 创建居中效果需要耍一些花招,特别是垂直居中效果,但我认为由此生出的诋毁,对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了,而且作为一名前端开发者,你真的有必要对其中的原理了解一二。写这篇文章的目的不是为了向各位解释这些方法的工作原理,而是介绍将这些方法编写为 Sass mixin 的方式,继而将它们复用到各类项目中。如果你还不熟悉使用 CSS 创建居中效果的方法,我建议你仔细阅读以下这篇文章:Centering In CSS: A Complete Guide

使用CSS伪元素模拟float:center效果

网页上实现float:left或者float:right效果并不是件困难的事情,但一直无法有一个类似于float:center的效果。就是浮动居中。就算是顶尖的CSSer要实现这样的效果也是一件非常困难的事情。那么这篇文章,将向大家展示了如何使用伪元素来模拟一个浮动居中的效果。

性能工具

嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。

CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性。最近几年在 CSS 领域,我们看到了许多重大进展。其中,web 字体、渐变、阴影和媒体查询已经成为了我们日常工作流的必备工具。CSS 布局的未来看起来一片大好。在这篇文章中,我将会介绍 CSS 规范中一些激动人心的布局模块。在未来,我们可以更有效地实现网格布局,更轻松地创建等高列或者均匀分配内容到整个页面。类似 Adobe 的公司往往熟悉布局设计的细节,借助它们的帮助来制定相关规范,我们就能更准确地控制页面在浏览器上的显示方式,同时避免对页面内容的影响。

Jade的使用

如果你熟悉 Sublime Text 和 Emmet 的组合,那么 Jade 也会是你的菜。模板引擎这个术语听起来太过于高大上了,私下里我更喜欢称它们是 HTML 预处理语言,非常类似 Sass 之于 CSS —— 不过相比起 Sass 操纵 CSS 的强大力量,Jade 对 HTML 的影响只能说本本分分,没有什么激进之处,当然,这并不是坏事。

页面

返回顶部