65.9K
CodeProject 正在变化。 阅读更多。
Home

我为什么要使用 SASS？

Dane Balia
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (4投票s)

2012年9月17日

CPOL

6分钟阅读

viewsIcon

26332

一篇快速阅读，帮助您理解 SASS 背后的强大功能。

引言

作为一名网页开发者，我们常常会遇到一个关键的障碍：虽然能够出色地将代码编织在一起，但“代码的面子”——即实际的用户界面——却不像其内部结构那样“美观”。也许原因并非缺乏创造力，而是因为一种令人“口感不佳”、“留下苦涩味道”的语法，那就是CSS。有时并非开发者缺乏“设计技巧”，而是他们难以接受一种“粗糙且难以阅读”的语言。

这就像一个“艺术家”只有一个“两种颜色”的调色板，每次绘画的结果都是枯燥乏味的、重复不变的。然而，如果这位“艺术家”被告知，他/她拥有一系列颜色，可以根据需要进行选择和使用；那么他/她所创造出来的东西将是真正令人惊叹的！

我的观点是——对于新手开发者来说，CSS需要一段时间才能理解、掌握甚至接受，而SASS（Syntactically Awesome Style Sheets，语法上超赞的样式表）就此应运而生。这便是对能够让你的“网页开发”体验更加愉悦、减少痛苦（易于维护，减少重复）的甜美之物的介绍。

背景

什么是SASS？

SASS仅仅是一个框架，或者更准确地说，是一套工具，它允许开发者以一种更具逻辑性的方式利用CSS，并且正如“Rails开发者所说”，更加DRY（Don't Repeat Yourself，不要重复自己）。

为什么要使用SASS？

为什么要使用SASS？现在进行谷歌搜索会返回大量结果，我的意思是，市面上有太多这样的框架，除非有同事推荐等，你几乎会忽略它，认为它只是众多“网络”技术中的又一个。所以，为了解决这个问题，我想重点介绍SASS的3个主要“优点”，它们可以立即改善你的“开发时间和体验”，并可能说服你使用它。

SASS安装

遗憾的是，SASS的官方网站没有为.NET用户提供默认安装。它假设你是一个Ruby用户，如果是的话，安装就像打开一罐豆子一样简单。

即：

gem install sass

如果你正在使用Ruby on Rails，那么这是集成SASS的最佳方式，

gem install bootstrap-sass

对于.NET用户，则需要采取不同的方法，因为你将不得不使用Visual Studio的插件。

Mindscape Web Workbench (约18MB)。

对于Sass SCSS文件，Web Workbench提供：

  • 语法高亮
  • 智能感知。
  • 语法错误警告
  • 未知变量和混合器的警告
  • 跳转到变量或混合器定义
  • CSS文件生成
  • CSS文件最小化 - 仅限专业版

你的CSS文件将生成在SCSS源文件相同的文件夹中，因此你的HTML页面可以像手动编写CSS一样引用该位置的CSS文件。

Using the Code

变量

在开发任何网站时，我倾向于最多使用3种颜色来主要决定外观和感觉或用户界面。我经常发现自己追溯一种主色调的各种深浅，例如蓝色、浅蓝色等（或者更准确地说，是它们的HEX值）。

SASS的优点在于，我们有变量，是的，真正的“变量”，所以你可以这样做：

$gray-Dark: #474546;

所以现在，当我需要引用它时，比如说对于a；

header {
  background-color: $gray-Dark;
}

footer {
  margin-top: 30px;
  padding-top: 5px;
  border-top: 1px solid $gray-Dark;
   background-color: $gray-Light; 
}

这背后的强大之处在于，你现在有了一个更改颜色的参考点，而不是需要翻阅多个CSS或一个大的CSS文件来更改所有相关标签的颜色。对于快速“模型制作”来说，这也是一个巨大的优势。

但是，假设我想让我的页脚稍微亮一些，作为灰色的一种变体。我可以定义一个新的变量，如下所示。

$gray-Light: lighten($gray-Dark, 20%);

footer {
  margin-top: 30px;
  padding-top: 5px;
  border-top: 1px solid $gray-Dark;
  background-color: $gray-Light;
}

注意格式：lighten(color, %change)。所以基本上，我已经采用了我正在使用的“深灰色”并使其变亮20%。这真的很方便！还有无数其他函数，你应该去了解一下（如“darken”、“lightness”等）。点击这里。

嵌套

现在，传统上使用CSS，你会这样做来进行“嵌套”；请注意#header 与其h1 的分离，这使得CSS文件臃肿且难以阅读。

#header {
  background-color: $gray-Dark;
}

#header h1 {
  float: left;
}

使用SASS，“嵌套”更加方便；我们可以直接在目标（类）内部进行“嵌套”。也就是说，“h1”的父元素是#header，现在可以将其直接嵌套在内部，从而更容易阅读、跟踪和修改。

#header {
  background-color: $gray-Dark;

  h1 {
   float: left;
  }
}

函数

你相信吗，是的，你自己的函数。我无法充分表达这背后的强大之处，但让我们用一个例子来让你有所了解。

#header {
    background-color: $gray-Dark;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;

  h1 {
   float: left;
  }
}

#nav-left {
   padding: 5px 12px;
   margin: 10px 0;
    border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}


#footer {
    border: solid 1px $gray-Dark
    border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

现在，正如你所见，border-radius重复了3次。更改其中一个需要我一丝不苟地更改所有三个。但这有点麻烦，更不用说额外的代码、增加了文件大小，并降低了可读性。使用SASS，我可以 Instead 移除这个‘CSS’并为此创建一个单独的函数，我可以在所有3个地方引用它。

在我文件顶部，也就是声明变量的地方；我们添加我们的函数，或者SASS称之为MIXIN。

@mixin <name> {

    // CODE TO REPEAT
}

@mixin rounded-corners {
  border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

它的实现是这样的：

#header {
    background-color: $gray-Dark;
    @include rounded-corners

  h1 {
   float: left;
  }
}

#nav-left {
   padding: 5px 12px;
   margin: 10px 0;
   @include rounded-corners
}


#footer {
    border: solid 1px $gray-Dark
   @include rounded-corners
}

但是，假设#nav-left 的圆角不同——border-radius不是10px而是8px。SASS如何帮助我们？

一个“函数”（mixin）只有在我们能够提供“参数”或“参数”时才是一个真正的函数。所以让我们稍微修改一下我们的MIXIN以支持自定义半径。

即：

@mixin rounded-corners($radius) {
  border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}

但在我们实现之前，在MIXIN被使用但没有指定半径的地方，如何设置一个默认值呢？

@mixin rounded-corners($radius: 8px) {
  border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}

漂亮，不是吗？但让我们看看我们的实现，如果你是一个开发者，脑子里应该已经有了想法。

#header {
    background-color: $gray-Dark;
    @include rounded-corners(10px);

  h1 {
   float: left;
  }
}

#nav-left {
   padding: 5px 12px;
   margin: 10px 0;
   @include rounded-corners(8px);
}


#footer {
    border: solid 1px $gray-Dark
   @include rounded-corners(10px);
}

但是可编程性不止于此，再次强调，为了不让你信息过载，而是让你了解它的强大之处；SASS还支持条件状态（if, else if, else）；以及“For”循环和“For Each”。

关注点

你可能还想考虑的另一个可能性，它使网页创作过程更加轻松，并且它自己使用了SASS，是一个叫做COMPASS的 neat 小项目。基本上，这是一套高级的、经过实战检验的函数（mixins），可以进一步改进你的开发周期。另一种思考方式是，它是一个利用SASS使其更强大的Add-On。

因为这被称为“预处理”，你不想一直更新你的CSS来反映你的更改，而COMPASS的优点就在于此，它有一个“监视”功能，可以检测你SASS文件的更改并自动处理它们。

酷，不是吗！

结论

这只是SASS的冰山一角，如果你想了解更多，可以访问以下链接：

  1. SASS 网站
  2. SASS 函数
  3. SASS 入门教程
  4. SASS 高级教程
© . All rights reserved.