现代 CSS

Preprocessor

PostCSS-modules: 让CSS变得更强大

多年来,我们一直与全局CSS作斗争。现在是时候结束它了。不管你使用哪种语言或框架,CSS命名的冲突不再是问题。我将向你展示如何使用PostCSSPostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来,许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏,几乎没有任何浏览器不能做到的。现在,我们比在HTML中标记文本和使用CSS开发内容的网站要多得多。我们使用CSS来充分发挥它的潜力,创造出它很难处理的东西。

深入PostCSS Web设计

PostCSS是一种工具,一款已成长为像Sass和LESS一样主流的处理器,这一切都归功于它的强大、速度和易用性。《深入PostCSS Web设计》是使用PostCSS的完全指南,《深入PostCSS Web设计》将指导你如何编写优秀的样式,并将其运用到Web页面,同时让你的样式保持可维护性。这本《深入PostCSS Web设计》将向你展示如何利用PostCSS简化样式表的整个过程。它涵盖了给Web页面添加动态的、现代的样式特性的各种技术。随着内容的深入,你将学习如何使用PostCSS来让CSS更具模块化的特性、更易于维护。读完《深入PostCSS Web设计》,你将掌握如何给Web添加CSS样式表,以及如何创建高执行,可维护的样式表。

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需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

页面

返回顶部