现代 CSS

SCSS

《Sass for Web Designers》之Sass的工作流程

现在我们知道了什么是Sass,那我们就开始使用它来创建样式吧。我们的第一个任务就是在你的电脑上安装Sass。我在第一章提到过Sass是用Ruby编写的程序,并且使用Ruby来编译成CSS。所以,在我们使用Sass之前,我们需要安装Ruby。

《Sass for Web Designers》之为什么要使用Sass

我不信任Sass。我从来都是手写样式表的!我不需要额外的工具来帮助我简化工作。我不想要把复杂的事物添加到我的工作流程中,不要来烦我。无论是以上哪种想法,现实是Sass(和其他的CSS预处理器)可以成为一个强有力的助手,一个任何样式书写者都可以轻松把它插入到每日的工作中去的工具。在使用了Sass一段时间后回过头来看,我很庆幸自己这么做了。我想要分享我是怎么来使用Sass来提高效率的,比我前10年维护CSS的过程要轻松许多,这就是我想要写这本书的理由。最初,由于我对Sass有一些误解导致了我放弃了它。我担心我要完全改变我书写和管理CSS的方法。有时,CSS也是很脆弱的,作者想要保护他们的作品不被轻易复制是可以理解。我能得到保佑吗?阿门。

《Sass for Web Designers》之前言

回顾计算机语言的进化史,似乎每隔几年都会诞生一个新的概念以推进计算机语言的发展。从二进制升级到指令集,指令集再升级为编译语言。基于这些不断进化的编译语言,我们又创造出了web浏览器。像HTML,CSS和JavaScript这些语言都是通过浏览器来渲染的。现在,我们再次升级这个概念的时刻来临了。

再谈等高列布局、水平垂直居中与置顶页脚

CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果,而不喜欢说其是问题)并不是常陌生,而且很多同学都似乎有碰到过,也经常体验过。甚至在很多前端面试中也常被考官问到,有的时候还直接被考官给秒杀了。早前在水平垂直居中系列八种创建等高列布局如何将页脚固定在页面底部几篇文章中也或多或少介绍过。今天老调重谈,用几种新方法和大家探讨这几个效果,希望能帮助大家开拓思维。

探索Sass3.3中的Maps(一)

Sass的数据类型可以说是一个大家庭了,其数据类型中的数字、字符串、列表、颜色和布尔型,涵盖了大多数我们的需求。但是,正如一个框架开始的演变,在这个数据类型中还缺少一个关键性的工具:关联数组

Sass控制命令:@if,@for,@each和@while

Sass的控制命令是创建库和重复使用代码库的一个基础,使用好Sass,需要掌握好Sass的控制命令,只有掌握了这些,你才能进入Sass的下一个层次的学习。

实战Sass3.3的Source Maps

新发布的Sass 3.3版本,将Source Maps正式纳入了Sass中。这也成为Sass新版本的一大亮点,一大新功能。让广大Sass爱好者可以直接在浏览器中更容易调试自己的代码和Debug相关操作。其实早在2013年七月份Umar Hansa在《Developing With Sass and Chrome DevTools》就详细介绍了如何使用Sass的Source Maps功能帮助大家在浏览器中更好的调试SCSS(或Sass)代码。今天将老调重谈,通过图解的方式向大家介绍如何在Chrome和Firefox浏览器中实现Sass3.3的Source Maps特性。

了解Sass的控制命令

在CSS中没有逻辑的概念,所以很多程序员不太喜欢。而在CSS的预处理器语言中植入了类似程序语言的功能。比如说一些指令“@if”、“@for”、“@each”、"@while"等。而在Sass中也同样具有这些指令。借助这些指令可以让你编译出比"@extend"和"@mixin"更精简的CSS。那么在这篇文章中主要用来帮助一些从未接过这些指令的同学有所帮助和了解。

管理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可以得到更有效的输出。

页面

返回顶部