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