CSS处理器

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

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

如何更好的使用BEM

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

Sass: @mixin指令介绍

为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了@import@extend可以使你的代码更加具有重复利用性,@mixin指令也同样能提高你代码的重复使用率并简化你的代码。

Sass:@mixin和@extend该如何选择

Mixins允许我们在项目中复用样式片段,可以传递参数这个特性使得它们非常灵活,强大。同样,我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixinextend好像做了同样的事情,那我们应该选择哪一个呢?

OOCSS vs. OOSCSS

在这篇文章中我主要想给大家阐述在使用Sass来编写CSS和OOCSS两者之间的差异。在开始之前,我想在大家对定义语义化和演示(视觉)类名之间的差异有所了解。

为什么要开始学习Sass

本文不会像一些其它文章一样,教你如何开始使用Sass,我会告诉你为什么使用Sass,我到底喜欢它什么。我最初是在一个Laravel项目中,接触了Sass,Larvel是个PHP框架,内建有Elixir服务支持Sass。你可能觉得说这个玩意跟我们没啥关系,但是重点是Larvel支持Sass,使Sass非常容易上手,这就促使我去尝试使用Sass,慢慢了解到它的很多优点。之前,我总觉得,写脚本在CSS里会把本应简单的事情变复杂,然后不确定是否应该花时间去学习它。但是我慢慢发现,它的好处很多,还好当初没有放弃。

使用Sass来定义Keyframes

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes,让动画可以根据帧定制不同的动画效果。

Sass绘制多边形

CSS画图形在Web运用中时常看到,比如三角形、五角星,心形,Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制,并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数,实现正多边形的开发。

Sass中的数据类型

数据类型几乎在所有编程语言当中都有,在Sass中也不例外。数据类型是根据不同的用途分的类。例如2是一个数值(number),而SitePoint是一个字符串(string)。在这篇文章中,将涵盖Sass中所有的数据类型(共有七种数据类型),并且通过一些简单的例子来阐述这些数据类型在Sass中如何使用。

PostCSS深入学习: 简写和速写

到目前为止,我们已经使用 PostCSS 做了很多事情,比如,优化样式给预处理器增加功能生成某些符合规范的样式,但是它只有帮助写原始 CSS 的人吗?每个 Web 设计师在他们的职业生涯中都会写出有很多可复用的代码,如果你能用一点时间把每一个都收集起来到最后那将会变得很多。在本教程中,我们要使用 PostCSS 的一系列的简写和速写来减少每天的编代码的时间。 让我们开始吧!

页面

返回顶部