现代 CSS

Sass

管理Sass项目文件结构

多次被问及Sass在项目中运用的时候要如何管理自己的文件?或许每个人都有各自的想法,也略有不同,也有各自的经验。今天根据Hugo Giraudel的《Architecture for a Sass Project》一文所译,向大家介绍了如何在Sass项目中管理自己的文件。主要目的是告诉大家怎么去想,并不是告诉大怎么做。我想这一点更切合实际。

理解Sass的选择占位符%placeholder

Sass中提供多种方法来共用相同的CSS代码。你可以使用@include定义好的@mixin在你的CSS样式中插入新的CSS样式,你也可以使用@extend定义好的CSS类选择器,向你的CSS样式中插入新的CSS样式。在Sass3.2中引入了一个新的特性——选择器占位符“%placeholder”,能过@extend可以得到更有效的输出。

Sass:Mixin还是Placeholder

在大约一年半年前使用Sass的时候,有一件事让我花了很长的时间,那就是如何区别Sass的@mixin%placeholder。实际上,%placeholder。在当时的情况这之下,就算是概念对我来说都是黑色地带。如果你也碰到类似的情况,不用担心,因为我会尽量的引导你。今天我们就来探究,什么时候是定义好的,什么时候是定义好的。你就会明白它们服务的目的是不一样的,不能混为一谈。

Sass编写组件

很多开发者都认识到,在网站或应用程序的开发中使一些组件非常强大,但是这些组件开发起来并不是一件易事。今天我们就一起来探讨一下如何使用Sass来开发组件。因为讲述任何东西都没有直接拿用例来介绍更好,我建议我们要采用的示例是大家在网站或应用程序开发中几乎都有用过的,一个响应用户交互的——警告信息(也有很多人称之为“通知”)。使用Sass来创建一个处理不同类型的警告信息的组件是一个很完美的示例,同时还能提高你使用Sass的技术。所以,伙计们,还在犹豫什么,赶紧动手一试吧。

使用calc()创建CSS网格

网格系统对于Web前端人员来说不是一个陌生的话题了,在w3cplus上介绍网格系统的教程并不少,不过这些网格系统都有其类似之处。在HTML中为了能应用好网格,都需要添加一些类名,而在样式中,不管你用了几列网格,都有一大串的样式代码。这让一个有代码洁癖的人员来说,总觉得不爽。幸好,CSS预处理器的出现,如Sass。可以让你的代码变得更简单一些,但和以前的网格也极其类似。有时试想,有没有更好的呢?今天看到Create a CSS grid using calc()觉得很有意思,通过calc()和Sass的结合,生成需要的网格。希望此篇文章对大家有所启发。

Sass3.3新特性之连体符&

Hugo Giraudel在《Looking Into the Future of Sass》(译文Sass新特性)一文中向大家介绍了Sass的十大新特性。这些特性都将让你的工作变得更简单与方便。那么今天我主要想向大家介绍我自己对Sass3.3中几个新特性的理解与使用心得,希望对大家的学习有所帮助。

Sass中连体符(&)的运用

在CSS中,要想给一个元素赋予一定的样式,我们必须得先取到这个元素。那么就得需要选择器,通过选择器来选择指定元素,然后赋予所需的样式。而CSS选择器有很多种,比如层次选择器中的后代选择器兄弟选择器通用兄弟选择器等。而这些选择器都通过元素与元素之间的关系来确定的,当然在CSS中仅仅不只这几种选择器方式,还有其他优秀的选择器帮助你做更多的事情。而在这篇文章中我们主要探讨的是连体符&在Sass中,是如何让你的选择器变得更加的灵活,更加的简单。

组织Sass文件

Sass是CSS的一个预处理器,他和CSS一样,需要组织好你的.scss或者.sass文件。在一个项目中如何组织Sass文件将是一个很重要的部分,因为文件组织的好与坏直接关系到您开发所需的时间,特别对于一个大型项目来说得显得重要。今天简单的向大家展示一下如何组织Sass文件。

使用Sass创建弹性网格

在Web设计中,时常可以碰到一个网站中实现网格布局。这个过程可能非常痛苦,但保持视觉上和一个精心设计的网格一致性是非常值得的。但当你为一个响应式设计写样式的时候,你并不想在布局为为每个元素计算宽度。相反,您需要一个伸缩的解决方案,在你的网格中可以指定匹配的宽度。我们可以使用一个像960网格系统来解决这个问题,但是在我看来,框架有很多问题,不过我们可以使用Sass来解决这些问题。

为什么要使用Sass

为什么要用Sass?或许很多同学都会有此一句,同时也有很多同学在试问LESS(或者其他CSS预处理器语言)和Sass哪个更好,或许有很多同学在抵触使用Sass。认为能写CSS,为什么还要花时间,花成本去学习Sass。为什么要给自己增加额外的复杂性,自己给自己找麻烦。这是很多CSSer的常有的想法,但是Sass(以及其他css预处理程序)确实是一个强大的工具,它可以让任何形式的样式都能够方便的引入开发工作中去。虽然他会花费我一些时间去熟悉、适应,但是我依然很乐于这样做。究竟为何?大家要是感兴趣可以的《Why Sass?》进一步了解,为什么要使用Sass。

页面

返回顶部