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

CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n)
、:nth-of-type(n)
这样的选择器,其好处在这里就不多说了。如果你对这方面感兴趣的话,你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。
大家可能还记得前段时间淘宝造物节的宣传动画效果,让自己对CSS 360全景更充满好奇之心。最近有关于这方面的文章也是层出不穷,比如@凹凸实验室团队的@J.c就整理了一篇有关于这方面的文章。尽从效果上,就吸引了大家不少的眼球,当然大家更期待的是如何自己能实现这样的效果。那么我们来开始一起探讨这方面的事情。
早在2011年整理了一篇有关于图片替换文本的方法,而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素?
CSS Animation是实现Web Animation方法之一,其主要通过@keyframes
和animation-*
或者transition
来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animation性能相关的话题。
background-repeat
是background
属性之一,对于前端而言,这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat
属性呢?在CSS2.1中,众所周知,background-repeat
属性具有四个常见的值repeat
、repeat-x
、repeat-y
和no-repeat
。而今天要说不是这四个属性值,在CSS Backgrounds and Borders Module Level 3中,给background-repeat
新增加了两个属性值round
和space
。在接下的中,要讨论的就是新增的这两个属性值怎么使用,他们具有什么特性。
如果需要彻底的对CSS Grid布局有所了解,或者想更好的掌握它,那么必须先了解清楚其相关术语。因为CSS Grid布局中的术语较多,只有掌握了这些术语真正含义,后面才能更好的学习CSS Grid布局相关的特性。那么今天就来看看CSS Grid布局中的相关术语。
在上一节中,主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语,在这篇文章中将继续介绍网络布局中的相关术语:网格区域,网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。
经过网格术语一和术语二两篇文章,我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外,还有其他相关的术语。这篇文章主要和大家一起来探讨网格。CSS Grid布局说的就是网格,那么网格就是其中最重要的术语之一。接下来,我们要说的就是网格相关的内容。
CSS中的@supports
属性已经不是新东西了,只不过一直以来,大家碍于浏览器对其支持度不强,而无人问冿。这两天看到两篇新文单都是介绍@supports
。其中一篇是介绍怎么使用@supports
来查询CSS的新特性,另外一篇是如何使用@supports
来改变你的生活。
如果您构建过不少网站,可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中,我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。