Sass入门

Variables

想想变量作为一种存储信息的方式，您希望在整个样式表中重用这些信息。你可以存储颜色，字体堆栈或任何你认为你想要重用的CSS值。 Sass使用$符号使某个变量。

$font-stack: Helvetica,san-serif;
$primary-color:#333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting嵌套

当编写HTML时，你可能注意到它有一个清晰的嵌套和可视的层次结构。另一方面，CSS不。

Sass将允许你嵌套你的CSS选择器的方式遵循你的HTML的相同的视觉层次结构。请注意，过度嵌套的规则将导致过度合格的CSS，可能证明很难维护，通常被认为是不良做法。

考虑到这一点，以下是网站导航的一些典型样式的示例：

nav {
  ul {
    margin:0;
    padding:0;
    list-style:none;
  }

  li {
    display:inline-block;
  }

  a {
    display:block;
    padding:6px 12px;
    text-decoration: none;
  }
}

这是一个很好的方式来组织你的CSS，使其更加可读。

Partials部分

您可以创建部分Sass文件，其中包含少量的CSS代码片段，您可以将其包含在其他Sass文件中。这是一个很好的方式来模块化你的CSS，并帮助保持事情更容易维护。一个部分只是一个以前导下划线命名的Sass文件。你可以命名它像_partial.scss。下划线让Sass知道该文件只是一个部分文件，并且它不应该生成到一个CSS文件中。 Sass分支与@import指令一起使用。

Import导入

CSS有一个导入选项，允许您将CSS拆分为更小，更易于维护的部分。唯一的缺点是每次在CSS中使用@import时，它会创建另一个HTTP请求。 Sass构建在当前CSS @import的顶部，但是不需要一个HTTP请求，Sass将接收您要导入的文件，并将其与您要导入的文件合并，以便可以将一个CSS文件提供给Web浏览器。

假设你有几个Sass文件，_reset.scss和base.scss。我们要将_reset.scss导入base.scss。

//_reset.scss
html,
body,
ul,
ol {
  margin:0;
  padding:0;
}

//base.scss
@import 'reset';

body {
  font:100% Helvetica,sans-serif;
  background-color: #efefef;
}

注意我们使用@import'reset';在base.scss文件中。导入文件时，不需要包括文件扩展名.scss。 Sass很聪明，会为你找到。

Mixins混合

CSS中的一些东西有点乏味，写，特别是与CSS3和许多供应商前缀存在。 mixin允许您创建一组CSS声明，以便在整个网站中重复使用。你甚至可以传递值来使你的mixin更灵活。对mixin的一个好的使用是供应商前缀。这里有一个border-radius的例子。

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

.box {
  height: 100px;
  width:100px;
  background-color: lightcoral;
  @include border-radius(10px);
}

要创建一个混合，你使用@mixin指令并给它一个名字。我们命名了我们的mixin border-radius。我们还在括号中使用变量$ radius，所以我们可以传递任何我们想要的半径。创建mixin后，您可以将其用作CSS声明，以@include开头，然后是mixin的名称。

Extend/Inheritance扩展/继承

这是Sass最有用的功能之一。使用@extend可以将一组CSS属性从一个选择器共享到另一个。它有助于保持你的Sass非常干燥。在我们的示例中，我们将为错误，警告和成功创建一个简单的消息传递系列。

.message {
  border:1px solid #ccc;
  padding:10px;
  color:#333;
}

.success {
  @extend .message;
  border-color:green;
}

.error {
  @extend .message;
  border-color:red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

上面的代码做的是允许你使用.message中的CSS属性，并将它们应用到.success，.error和＆warning。神奇的事情发生在生成的CSS，这有助于避免不得不在HTML元素上写多个类名。

Operators操作符

在你的CSS中做数学是非常有帮助的。 Sass有一些标准的数学运算符，如+， - ，*，/和％。在我们的例子中，我们将做一些简单的数学计算宽度的aside和article。

article[role='main'] {
  background-color: lightgoldenrodyellow;
  float:left;
  width:600px/960px * 100%;
}

aside[role='complementary'] {
  background-color: lightpink;
  float:left;
  width:300px/960px * 100%;
}

我们创建了一个非常简单的流体网格，基于960px。 Sass中的操作让我们做像像素值的操作，并将其转换为百分比，而不会有太多麻烦。

复制于http://sass-lang.com/guide