薄荷的博客

我为什么对原生CSS变量感到兴奋

几周前,CSS变量,更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时,遭遇到了惊人的否定敌意怀疑。至少我很吃惊,鉴于我对这个属性是如此兴奋。

CSS变量和预处理器变量的差异

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力,比如颜色,在CSS中让变量保持一致,可DRY,并且易于改变是很有用的。出于相同原因,也可以使用原生CSS变量(“CSS自定义属性”)。但有一些重要的差异应该清楚。

使用Sass制作倾斜角度

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

如何编写自定义Sass 函数

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

弄懂Sass 3.5的匿名函数

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

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

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

返回顶部