现代 CSS

《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这些语言都是通过浏览器来渲染的。现在,我们再次升级这个概念的时刻来临了。

在HTML中使用meta标签的基础知识和最佳实践

元数据通常被理解为‘描述数据的数据’,在web页面中的用途之一就是使用<meta>标签。meta标签的内容一般都是表示关于HTML页面的信息,其作用是不可以被其它标签取代的。另外,meta标签还可以模拟一个HTTP响应头部(例如重定向到不同页面),同时,它还拥有像http-equivcharset这样的属性 ,在Mozilla开发者社区中有对元数据详细的文档说明。

viewports剖析

在这个迷你系列的文章里,我将解释viewports和多种重要的HTML标签元素的宽度是如何工作的,例如<html>标签。同样也会解释window和screen的宽度问题。第一部分主要关于桌面(pc)浏览器,基本目的在于为移动端(mobile)浏览器上,本话题的讨论创建舞台。绝大多数web开发人员已经对pc的概念有了直观的认识。mobile拥有相同的概念,但是更加复杂。如你所知,一个友好的预热将极大的帮助你理解mobile浏览器。

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

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

响应式设计:跨浏览器兼容性

上一篇文章中,我阐述了在响应式设计中处理图像3种方案的观点,讨论了最好的解决方案,采用合适图像尺寸服务于各种尺寸的屏幕。那么,本文接下来将从另外一个角度来聊管理图像,那就是跨浏览器的兼容性。在整个网页开发过程中,尤其你想创造一个响应式的结构——一个web开发人员必须去面对一个最重要及最频繁的问题就是兼容各种浏览器。

响应式设计:响应图像

这是《Understanding Responsive Web Design》系列教程中的第五篇。本文中,我将展示当一个web开发人员在创建响应式网站时都会遇到的典型问题:对图像的处理。或许你已知道,移动终端开发者面临的挑战是多不胜数的,使得图像适应多种屏幕尺寸无疑是最大的困难之一。现在有三种方案可供开发人员去选择开发响应式图像:与浏览器‘对抗’、放弃它、或者依赖服务器。接下来,我们去了解每种方案的优点与缺点。

响应式设计:自定义网格布局

在前面的文章中,我已介绍了“流布局”的特性和描述了如何使用响应式字体。在本文中,我将介绍一种应用广泛及非常著名的网格布局。网格系统其实早已应用在印刷媒体上,只是在web和mobile上的应用才发展一段时间。

探索Sass3.3中的Maps(一)

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

页面

返回顶部