Preprocessor

grid-kiss让网格制作变得更容易

去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下,就是没动手,今天体验了一下,还是很有意思的。今天花点时间整理一下,跟大家一起分享。

【转载】让CSS更完美:PostCSS-modules

我们和全局作用域的CSS斗争了多年,现在终于是时候结束它了。不管你用的是什么语言还是框架,CSS命名冲突将不再是个问题。我将给你展示一下PostCSSPostCSS-modules如何使用,并且可以在服务端使用它们。 CSS起初只是一个美化文档的工具,但是事情到1996年发生了变化。浏览器中不再单单只有文档了,即时通讯,各种软件,游戏,没什么是浏览器不能承载的。

使用Sass制作倾斜角度

最近,我不得不在一个网站大量使用倾斜角度作为其设计指南的一部分。倾斜角,是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。实现这种效果有很多种方法。例如可以将base64编码的图片应用为背景,但这会使得它很难自定义(颜色,角度等)。另一种方法是倾斜或旋转绝对定位的伪元素,然而倾斜变换是我最不愿意处理的一件事。

组织你的Sass文件

组织文件是每个项目的重要一步,特别是如果你半年重新打开这个项目的时候,你会发现,文件组织得好,对于你理解项目会有很大的帮助。如果你从未接触过Sass,你可以先阅读一下Sass指南或者点击这里阅读Sass相关的教程

如何编写自定义Sass 函数

如果您构建过不少网站,可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中,我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。

弄懂Sass 3.5的匿名函数

对博客上最新发布的Sass版本感到困惑?我也是。Sass 3.5.0-RC.1标记了一种新的数据类型:匿名函数。在候选发布公告中,用了四个段落篇幅描述了匿名函数大量的细节,而不显示任何代码。由于并未真正理解它的含义,所以决定深入了解它。

关于更好地组织Sass变量的想法

去年的大部分时间我写的CSS都放在一个预处理的Sass文件中,尤其是在一个.scss文件中。对我来说不错,但没有好好利用Sass提供的特性。我的SCSS文件通常比嵌套输出的CSS要小。我大量使用变量和引入不常用的混合宏,但它使用起来是最简单不过的。我想改变现状,并希望你们不要介意,如果我大胆想出如何开始创建更加模块化和可维护的Sass项目。

PostCSS入门:Sass用户入门指南

你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍);或者听说过它支持cssnextCSS Modules而且可扩展功能,但你是否已经找机会尝试一下了?PostCSS最强大之处在于它是模块化并且基于插件的架构,不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者),你从不需要配置任何东西——Sass内置了全部实用功能,开箱即用。然而,PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

使用Sass混合宏来声明CSS伪类选择器

CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n):nth-of-type(n)这样的选择器,其好处在这里就不多说了。如果你对这方面感兴趣的话,你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。

如果你会了Sass,你就会了ES2015

如果你会了Sass,你就会了ES2015!...虽然不是全部,但也有很多惊人的相似之处!当学习最新的ECMAScript 规范,ES2015(以前被称为ES6)时,碰到了一些让我立刻想到Sass的特性。

页面

返回顶部