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