Sass

使用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的特性。

解决Sass媒体查询的重复问题,优化工作流程

在Sass中有很多方法可以解决媒体查询这个问题,但是其中一些方法存在相同的问题。一开始我会还原这个问题,然后提供我的解决方案,最后列出这个方案对工作流程的好处。

如何更好的使用BEM

BEM是由Yandex团队提出的一种CSS Class 命名方法,旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定,有些人认为这些规定很冗余,但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章,是我在假设你对BEM和Sass已经有所了解甚至熟悉的基础上完成的。

页面

返回顶部