使用sass+compass编写前端页面（入门篇）

当然，SASS只是css预编译工具中的一种，类似的工具还有Less、stylus等，SASS起初语法采用缩进排列形式，但对于设计师来说既不直观还容易出现错误。在吸取了Less的一些特性基础上，SASS3.0有了大幅改进，也就是现在的SCSS。

为什么使用SASS/SCSS

• 易维护，更方便的定制
  对于一个大型或者稍微有规模的UI来说，如果需要替换下整体风格，或者是某个字体的像素值，比如我们经常会遇到panel，window以及portal共用一个背景色，这个时候按照常规的方式，我们需要一个个定位到元素使用的class，然后逐个替换，SASS提供了变量的方式，你可以把某个样式作为一个变量，然后各个class引用这个变量即可，修改时，我们只需修改对应的变量。
  对于编程人员的友好
• 对于一个没有前端基础的编程人员，写css样式是一件非常痛苦的事情，他们会感觉到各种约束，为什么我不能定一个变量来避免那些类似“变量”的重复书写？为什么我不能继承上个class的样式定义？。。。SASS/SCSS正是帮编程人员解开了这些疑惑，让css看起来更像是一门编程语言。
• 效率的提升
  对于一个前端开发人员来说，我不熟悉编程，也不关注css是否具有的一些编程语言特性，但这不是你放弃他的理由，css3的发展，加之主流浏览器的兼容性不一，很多浏览器都有自己的兼容hack，很多时候我们需要针对不同的浏览器写一堆的hack，这种浪费时间的重复劳动就交给SASS处理去吧！

安装与使用

SASS最早来源于Haml项目，但这个工程饱受诟病，很多人认为它使html失去语义化的特性，因此，并没有广泛的得到推广，而源自于它的SASS受到一致的认可，SASS基于Ruby编写，也是Ruby On Rails的主力插件。尽管如此，你无需担心自己没有Ruby基础，你需要的只是一个Ruby环境（现在已经有人把SASS移植到python编译环境下了）。

1. Ruby的下载地址： https://www.ruby-lang.org/zhX 31Xcn/ window下可以直接下载安装包
2. 安装SASS，安装完ruby之后，你就可以直接在命令行执行下面的命令（注册为环境变量）：
   >gem install sass

1
sass demo.scss

或者指定css文件名

1
sass demo.scss product.css

基本语法

1. 变量

SASS支持变量的定义，你可以使用$来定义一个变量，这样我们就可以把一些公用的样式定义为一个变量，在使用时直接引用即可：

1
2
3
4
5
6
$<span class="tag">white</span>:<span class="id">#fff</span>;
$<span class="tag">font12</span><span class="pseudo">:12px</span>;
<span class="class">.menu</span><span class="rules">{
    <span class="rule"><span class="attribute">color</span>:<span class="value"> $white;</span></span>
    <span class="rule"><span class="attribute">font-size</span>:<span class="value"> $font12;</span></span>
<span class="rule">}</span></span>

编译后：

1
2
3
4
<span class="class">.menu</span> <span class="rules">{
  <span class="rule"><span class="attribute">color</span>:<span class="value"> white;</span></span>
  <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">12</span>px;</span></span>
<span class="rule">}</span></span>

2 .嵌套

SASS支持两种嵌套方式：选择器嵌套和属性嵌套。嵌套极大程度上降低了选择器名称和属性的重复书写。

• 选择器嵌套
  选择器嵌套是指从一个选择器中嵌套子选择器，来实现选择器的继承关系。

1
2
3
4
5
6
7
8
9
  .header{
     .logo{
       display: b<span class="operator"><span class="keyword">lock</span>;</span>
       border: none;
     }
     ul li{
       line-break: normal;
     }
  }

编译后：

1
2
3
4
5
6
7
<span class="class">.header</span> <span class="class">.logo</span> <span class="rules">{
  <span class="rule"><span class="attribute">display</span>:<span class="value"> block;</span></span>
  <span class="rule"><span class="attribute">border</span>:<span class="value"> none;</span></span>
<span class="rule">}</span></span>
<span class="class">.header</span> <span class="tag">ul</span> <span class="tag">li</span> <span class="rules">{
  <span class="rule"><span class="attribute">line-break</span>:<span class="value"> normal;</span></span>
<span class="rule">}</span></span>

1
2
3
4
5
6
    a{
        text-<span class="symbol">decoration:</span> none;
        &<span class="symbol">:hover</span>{
            <span class="symbol">color:</span> <span class="comment">#007998;</span>
        }
    }

编译后：

1
2
3
4
5
6
<span class="tag">a</span> <span class="rules">{
  <span class="rule"><span class="attribute">text-decoration</span>:<span class="value"> none;</span></span>
<span class="rule">}</span></span>
<span class="tag">a</span><span class="pseudo">:hover</span> <span class="rules">{
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#007998</span>;</span></span>
<span class="rule">}</span></span>

• 属性嵌套
  属性嵌套，是指将带有相同前缀单词的属性提出来，作为一个公有的属性，嵌套进其他属性，就像很多姓氏一样的人，把这些人姓氏只记一次，后面跟上不同的名字。

1
2
3
4
5
6
7
    <span class="tag">h3</span><span class="rules">{
        <span class="rule"><span class="attribute">font</span>:<span class="value">{
            size:<span class="number">26</span>px;</span></span>
            <span class="rule"><span class="attribute">weight</span>:<span class="value">normal;</span></span>
            <span class="rule"><span class="attribute">family</span>:<span class="value">arial
        }</span></span></span>
    }

编译后：

1
2
3
4
5
<span class="tag">h3</span> <span class="rules">{
  <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">26</span>px;</span></span>
  <span class="rule"><span class="attribute">font-weight</span>:<span class="value"> normal;</span></span>
  <span class="rule"><span class="attribute">font-family</span>:<span class="value"> arial;</span></span>
<span class="rule">}</span></span>

当然实际情况font定义可能更简洁些，这里只是做一个示例。

3. 函数

SASS中，你可以对属性值进行简单的运算， 比如：

1
2
3
4
5
6
$<span class="tag">white</span>:<span class="id">#fff</span>;
$<span class="tag">font12</span><span class="pseudo">:12px</span>;    
<span class="class">.newsize</span><span class="rules">{
        <span class="rule"><span class="attribute">font-size</span>:<span class="value"> $font12 + <span class="number">2</span>;</span></span>
        <span class="rule"><span class="attribute">color</span>:<span class="value">$white - <span class="hexcolor">#007998</span>;</span></span>
    <span class="rule">}</span></span>

编译后生成：

1
2
3
4
<span class="class">.newsize</span> <span class="rules">{
  <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">14</span>px;</span></span>
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#ff8667</span>;</span></span>
<span class="rule">}</span></span>

当然除了最基本的加减乘除运算函数，SASS还提供了很多其他有趣的函数，像我们最常用的颜色函数lighten（减淡）和darken（加深）。

1
2
3
4
<span class="class">.lgt</span><span class="rules">{
    <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="function">lighten($black,<span class="number">10</span>%)</span>;</span></span>
    <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="function">darken($white,<span class="number">50</span>%)</span>;</span></span>
<span class="rule">}</span></span>

编译后可以得到一个运算好的颜色值：

1
2
3
4
<span class="class">.lgt</span> <span class="rules">{
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#1a1a1a</span>;</span></span>
  <span class="rule"><span class="attribute">background-color</span>:<span class="value"> gray;</span></span>
<span class="rule">}</span></span>

更多的函数信息，请查看 SASS官方函数大全

4. 混合

SASS的混合是一个非常值得你去尝试的特性，如果你对这个概念不太清楚，那么你可以认为他就是一个模板的宏定义，而且这个宏还能接收参数。

1
2
3
4
5
6
7
8
9
@mixin box-shadow{
  -webkit-box-shadow: in<span class="operator"><span class="keyword">set</span> <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>), <span class="number">0</span>px <span class="number">1</span>px <span class="number">2</span>px rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span>
  -moz-box-shadow:in<span class="operator"><span class="keyword">set</span> <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>), <span class="number">0</span>px <span class="number">1</span>px <span class="number">2</span>px rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span>
  box-shadow: in<span class="operator"><span class="keyword">set</span> <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>), <span class="number">0</span>px <span class="number">1</span>px <span class="number">2</span>px rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span>
}

.funny-box{
  @include box-shadow;
}

编译后：

1
2
3
4
5
<span class="class">.funny-box</span> <span class="rules">{
  <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value"> inset <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px <span class="function">rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>)</span>, <span class="number">0</span>px <span class="number">1</span>px <span class="number">2</span>px <span class="function">rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>)</span>;</span></span>
  <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value"> inset <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px <span class="function">rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>)</span>, <span class="number">0</span>px <span class="number">1</span>px <span class="number">2</span>px <span class="function">rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>)</span>;</span></span>
  <span class="rule"><span class="attribute">box-shadow</span>:<span class="value"> inset <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px <span class="function">rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>)</span>, <span class="number">0</span>px <span class="number">1</span>px <span class="number">2</span>px <span class="function">rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>)</span>;</span></span>
<span class="rule">}</span></span>

带参数的mixin：

1
2
3
4
5
6
7
8
<span class="variable">@mixin</span> border-radius(<span class="variable">$circle</span><span class="symbol">:</span><span class="number">50</span>px){
  -webkit-border-<span class="symbol">radius:</span> <span class="variable">$circle</span>;
  -moz-border-<span class="symbol">radius:</span> <span class="variable">$circle</span>;
  border-<span class="symbol">radius:</span> <span class="variable">$circle</span>;
}
.circle{
  <span class="variable">@include</span> border-radius(<span class="number">10</span>px);
}

为默认参数，可以通过传递参数来覆盖默认参数，编译后效果如下：

1
2
3
4
5
<span class="class">.circle</span> <span class="rules">{
  <span class="rule"><span class="attribute">-webkit-border-radius</span>:<span class="value"> <span class="number">10</span>px;</span></span>
  <span class="rule"><span class="attribute">-moz-border-radius</span>:<span class="value"> <span class="number">10</span>px;</span></span>
  <span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">10</span>px;</span></span>
<span class="rule">}</span></span>

除此之外，minxin还支持多个参数，也支持类似于java中的String…类型的多个值的传递。

5. 继承

既然SASS看起来像一门语言了，那么其他语言的一些基本特性，也应该是其所具备的，SASS不孚众望，具备了一个简单的继承特性，使用这个特性需要关键字

。

1
2
3
4
5
6
7
.pclass{
  <span class="symbol">border:</span> <span class="number">4</span>px solid <span class="comment">#ff9aa9;</span>
}
.subclass{
  <span class="variable">@extend</span> .pclass;
  border-<span class="symbol">width:</span> <span class="number">2</span>px;
}

编译后：

1
2
3
4
5
6
7
<span class="class">.pclass</span>, <span class="class">.subclass</span> <span class="rules">{
  <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">4</span>px solid <span class="hexcolor">#ff9aa9</span>;</span></span>
<span class="rule">}</span></span>

<span class="class">.subclass</span> <span class="rules">{
  <span class="rule"><span class="attribute">border-width</span>:<span class="value"> <span class="number">2</span>px;</span></span>
<span class="rule">}</span></span>

使用compass

介绍完SASS的一些基本入门知识点后，你是否有想尝试下的冲动呢？工欲善其事，必先利其器；这里简单介绍下一个开发中经常使用的SASS工具compass，compass是SASS团队成员开发的，compass是对SASS的一个封装，目的是为开发者提供一些丰富的mixin组件以及一些实用的工具模块。compass也已经成为ruby on rails的一个标配组件。

安装

安装依然使用ruby gem安装方式，参照前面安装sass过程，gem命令如下：

1
gem install compass

现在安装compass时，一般都附带安装上了sass组件，也就是说你可以跳过前面安装sass的流程了。

getting start

工程的创建

1
compass <span class="operator"><span class="keyword">create</span> yourpj;</span>

[1] [2]  下一页