Electronic Joint Business

Solution for E-Business

scss

初识 Sinatra (四)

文章评价:

这是本系列文章的最后一部分。本教程的目标是带领从未用过 Sinatra 的用户从头开始创建一个应用,并将之最后发布。

到前三部分结束时,我们已经完成了 To Do List 应用的大部分功能。在本系列的最后一部分,我们将先看看如何用 Sass 来编写 CSS ,之后将本应用发布到 Heroku 云服务上。

Logo
每个上点档次的应用都应有一个 logo,所以我创建了一个简单的“tick” logo,你可以在 Github 上找到。我们用它来作为本应用的头条的背景图片。打开 Styles.css 并添加下列 CSS:

h1.logo{
  font-family: helvetica,arial,sans-serif;
  font-size: 24px;
  color: white;
  padding: 64px 0 0;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.3em;
  background: transparent url(/logo.png) 50% 0 no-repeat;
  }

(注意 – 也许你还发现,你需要为 layout.slim 的 h1 元素添加一个 ‘logo’ 类,这段 CSS 才会起作用。)

>>> 阅读全文

 

, , , , , , , ,

SASS 使用介绍

简单地说: Sass 就是程序化的 CSS。 Sass (即 Syntactically Awesome StyleSheets 的缩写,意思是“相当迷人的样式表”) 是一种动态样式语言,它受到 Haml 的简洁精炼的语法的启发,提供了 变量、操作、嵌套选择器(selector)和 Mixin 等等功能来增强样式表,因此和单纯使用 CSS 语法相比,Sass 更容易编写,也更容易阅读。现在 Sass 是 Ruby 上的 Haml 插件的组件之一,我们可以用 Haml 来处理 HTML 标记,而用 Sass 来处理 CSS 标记。 其作者是这样介绍 Sass 的优点的:

“ Sass 是 CSS 之上的一种元语言 (meta-language),用于简洁、结构化地描述文档的样式,和普通 CSS 相比功能更强大。Sass 提供的更简洁、更优雅的 CSS 语法,同时还实现了许多特性,可以帮助创建更易于管理的样式表。”

Sass 的发展有两种语法规则( syntaxes )。。原先 Sass 采用了 Haml 的缩排语法,没有括号,分号,它使用行缩进的方式来指定 CSS 块,这对于习惯了 CSS 语法的页面设计师来说很不习惯,同时也不能兼容既有的 CSS,因此 Sass 3 就演变成了 Scss (Sassy CSS),它是 CSS3 语法的的拓展升级,摒弃了原来的缩进语法,而采用了 CSS 设计师的惯用的花括号 {}。 Scss 100% 兼容了CSS3, 因此在一个有效的 CSS3 文件同时可以被 Scss 所识别。除此之外,它还支持我们能够找到的所有扩展,甚至包括一些非标准语法,例如微软的 expression() 函数和 filter 属性。

为了加以区别, 使用缩进语法的文件以 .sass 为扩展名,而采用 Scss 语法的文件则以 .scss 作为扩展名

参考:
http://sass-lang.com/tutorial.html

 

, , ,