前端菜鳥之SASS入門筆記

Sass 是成熟、穩定、強大的 CSS 擴展語言。sass是須要編譯的，sass不能直接用於頁面。它能夠提升編程效率（對於使用熟練的人來講）。

sass想要應用在項目中須要編譯成css文件。用考拉！

sass有兩種後綴名文件：一種後綴名爲sass，不使用大括號和分號；另外一種就是咱們這裏使用的scss文件，這種和咱們平時寫的css文件格式差很少，使用大括號和分號。而本教程中所說的全部sass文件都指後綴名爲scss的文件。在此也建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。

參考連接：

Sass中文網：www.sass.hk/ 中文文檔：sass.bootcss.com/

1、變量

sass中能夠定義變量，能夠統一維護。sass定義變量用**$**開頭

$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}

//編譯成css style//-----------------------------------body {
  font-family: Helvetica, sans-serif;
  color: #333;

複製代碼

複雜變量的使用

//sass style//-------------------------------
$linkColor:         #08c #333 !default;//第一個值爲默認值，第二個鼠標滑過值a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style//-------------------------------a{
  color:#08c;
}
a:hover{
  color:#333;
}

複製代碼

2、嵌套

sass能夠進行選擇器的嵌套，表示層級關係，看起來頗有bigger整齊。

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

  li { display: inline-block; }

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

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

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
複製代碼

3、mixin（混合）

sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include來調用。

sass中可用mixin定義一些代碼片斷，且可傳參數，方便往後根據需求調用。今後處理css3的前綴兼容輕鬆便捷。

//sass style//-----------------------------------@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

//css style//-----------------------------------.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


複製代碼

4、擴展/繼承

sass可經過@extend來實現代碼組合聲明，使代碼更加優越簡潔。

//sass style//-----------------------------------.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;
}

//css style//-----------------------------------.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}
複製代碼

顏色

sass中集成了大量的顏色函數，讓變換顏色更加簡單。

//sass style//-----------------------------------
$linkColor: #08c;a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

//css style//-----------------------------------a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}
複製代碼

原文做者：祈澈姑娘；技術博客：www.jianshu.com/u/05f416aef… 90後前端妹子，愛編程，愛運營，愛折騰。 堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。