初学Foundation之Foundation的Sass样式解释

作者：Spy 日期：2014-02-04 点击：721
Foundation
Sass
SCSS
Preprocessor

本文由Spy根据的《Foundation’s Sassy Styles Explained》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundations-sassy-styles-explained/，以及作者相关信息

——作者：

——译者：Spy

在本教程我们将学习包含在Foundation前端框架中的灵活的Sass样式以及能够用来做些什么。Sass比CSS版本提供更多自定义特性集合，再加上有快捷方式可以简单又快速地运用在样式项目上，例如顶部工具栏。

如果你需要搭建起Sass的Foundation开发环境，可以参考文章“使用Sass和Compass配置Foundation”（参见上篇译文：初学者学习foundation：使用sass和compass来搭建foundation开发环境）或者是Zurb官方文档。你可以通过在控制台输入命令行方式来搭建环境，然后使用Compass和Bourbon（一个简单却轻量级混合Sass库），或者只是从Github上下载单独Sass文件，然后放置这些文件在你的工程上，然后通过“import”来引用需要的文件。

初学Foundation之Foundation的Sass样式解释

栅格系统

我们先从Foundation的基础 ——栅格开始，这是一个很好的组件将会向你展示SCSS/Sass究竟有多灵活。

初学Foundation之Foundation的Sass样式解释

举个例子，当在栅格中使用混合（混合，就是使用一些已经写好代码）时，你可以创建自己的类，甚至通过一些简单变量来创建你自己的栅格。我们来看看Foundation提供给你的第一个例子：

/* 混合创建行的选项 */
@include grid-row($behavior);
/* 默认值是false,采用默认行样式 */
$behavior: false
/* 如果你在创建例如一个包含其他元素的嵌套式行 */
/* 你需要添加适当的嵌套样式 */
$behavior: nest
/* 你还可以使用collapse效果 */
/* 当在栅格中使用Form表单时，是很方便的 */
$behavior: collapse
/* 如果你创建一个嵌套式的行，又想实现倒塌的效果，可以添加如下代码 */
$behavior: nest-collapse

从上面代码可以看到，我们从使用混合@include grid-row开始，用指定变量包含着括号里。

当你使用混合时，可以编写好类似函数那样，通过传递不同参数，就可以重复使用该混合。如font，是一个描述字体大小，字体粗细，字体颜色等性质。当每次使用它的时候，只是颜色变化而已，而其它的都不变，因此只需要用一个变量代替颜色值，通过参数传递进来即可。

如下代码示例，这里需要注意的是，在Sass中，参数是以“$”开头的：

/* 这里创建一个混合（函数） */
@mixin font($color) {
font-family: 'Arial';
font-size: 14px;
font-weight: 500;
color: $color;
}
/* 定义变量 */
$blue = #0099cc;
/* 使用混合（参数传递） */
@include font($blue);

回到上个代码示例，会发现变量$behaviour使用多次，看起来有点奇怪，就好像被每一次都重新赋值了。实际上，你给每种类型都赋上对应的值，就正如数组那样，每一次使用变量$behaviour，将会根据不同的赋值产生对应的输出。

你还可以传递多个参数：

@include grid-column($columns, $last-column);
/* 最常用的是使用参数列 */
 /* 设置列的宽度属性，使用一个数字来表示 */
 $columns: #
 /* 如果你列不加起来12，然后使用这个选项 */
 /* 最后一列默认设置float:right，使得布局美观 */
 /* 如果不想要默认，则设置为flase*/
 $last-column: false

为了更好的理解，我们将使用基本的HTML来创建一个栅格工程，由于Sass源码里设置了很多类，因此可以直接使用。如下代码示例：

<header>
    <aside></aside>
    <section>
        <article>
            <header></header>
            <div></div>
        </article>
    </section>
</header>

$row-width: em-calc(600);
$column-gutter: em-calc(30);
$total-columns: 12 !default;
header { @include grid-row; @include panel;
    aside { @include grid-column(3); }
    section { @include grid-column(9);
       article { @include grid-row;
          header { @include grid-column(2); }
          div { @include grid-column(10); }
       }
    }
}

初学Foundation之Foundation的Sass样式解释

可以看出html是很简洁的，Sass完美地计算与嵌套，我设置了最大的宽度，列与列之间的宽度和列的条数。从一个HTML的角度来看，这节省了大量的时间,但背后的布局可能会让人有些迷惑。我们看看在Sass中如何使用按钮。

按钮

使用Sass的好处之一就是你能很快地编写你的样式，并且不用编写重复的代码，从而能节省不少的时间。

初学Foundation之Foundation的Sass样式解释

你可以很快捷地使用按钮样式，就如：

.your-class-name { @include button; }

只需添加几个选项,你复制的样式只用一行代码,大概编写六、七行CSS代码就可以实现大工作量,很节省时间吧!

你应该还会注意到,有大量的选项在CSS版本不存在,这是适用于所有Sass元素。这会在CSS版本增加一个额外的自由层。下面例子将演示,一个按钮使用变量,和使用直接值一样,所以理解一下这些是如何工作的。

.your-class-name {
    @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
    @include inset-shadow($active);
}
.your-class-name {
    @include button(1em, #ca2727, 2px, false, false, false);
    @include inset-shadow(true);
}

初学Foundation之Foundation的Sass样式解释

这只是一个简单的例子,你可能会频繁地使用。最终编译成CSS，可以想象，编写一样的CSS代码比Sass需要更多的时间：

.link {
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    line-height: normal;
    margin: 0 0 1.25em;
    position: relative;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 1.0625em;
    padding-left: 2em;
    font-size: 1.25em;
    background-color: #ca2727;
    border-color: #9f1f1f;
    color: white;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

虽然你会看到Sass很多似乎是种超前语言,它实际上是能够正确地编译尽管只是写了几行的代码。结构比CSS有稍微增强。如果你被感到迷惑，你在需要时，可以使用SCSS。

单位计算器

最后,Sass少写的功能之一就是能够添加函数到样式表中。这些不是动态页面函数(运行时编译Sass代码)却节省更多的时间。

例如，在Foundation中有个整洁的函数是用来将px转换为em。这对响应式网站来说是很有趣的，通过如下简单的设置em默认值：

$em-base: 16px!default;

然后，每当你想使用em值,你通常需要计算px（像素）转化为em值。示例如下：

height:em-calc(46);

“46”是像素，“em-cal”是函数，在你的Sass代码都可以使用这个函数。

有用的工具

在上一篇文章中，我推荐了Sass编译器，对手动编译有巨大的好处。这次我将推荐一个几乎对所有的项目都是很有用的工具。

当谈到Foundation，你可能关注Sass，CSS，HTML和JavaScript。但是我们不能忘记一个重要的Web设计解决方案就是图片，特别是png和jpg格式文件。优化图片在web开发中是非常重要的，因此可以使用 imageOptim(OS X系统)或者是File Optimizer(Windows系统)。

这个工具可以无损地压缩图片，是非常高效且压缩率是很高的，可高达70%，就好比，原来需要加载100k的图片，现在只需要加载30k即可，这对合并在一起的图片压缩更加高效。

初学Foundation之Foundation的Sass样式解释

下一篇预告

我们已经初步接触与学习Sass基础知识，包括如何搭建，能用它干些什么和如何加快开发进度。接下来，我们将学习一些更加有趣的东西：基于Rails的Foundation，这将允许你直接使用HTML,CSS和JavaScript就可以创建出很酷动态的功能出来。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微薄。

如需转载，烦请注明出处：

英文原文：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundations-sassy-styles-explained/

中文译文：http://www.w3cplus.com/css/foundations-sassy-styles-explained.html

返回顶部