sass 成熟、穩定、強大的專業級CSS擴充語言

標籤：container   str   tag   width   back   role   繼承   12px   number   

sass十分鐘入門變數

sass中可以定義變數，方便統一修改和維護。

//sass style//-----------------------------------$fontStack:    Helvetica, sans-serif;$primaryColor: #333;body {  font-family: $fontStack;  color: $primaryColor;}

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

嵌套

sass可以進資料列選取器的嵌套，展示層級關係，看起來很優雅整齊。

//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;}

匯入

sass中如匯入其他sass檔案，最後編譯為一個css檔案，優於純css的@import

//sass style//-----------------------------------// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

//sass style//-----------------------------------// base.scss @import ‘reset‘;body {  font-size: 100% Helvetica, sans-serif;  background-color: #efefef;}

//css style//-----------------------------------html, body, ul, ol {  margin: 0;  padding: 0;}body {  background-color: #efefef;  font-size: 100% Helvetica, sans-serif;}

mixin

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;}

擴充/繼承

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//-----------------------------------.container { width: 100%; }article[role="main"] {  float: left;  width: 600px / 960px * 100%;}aside[role="complimentary"] {  float: right;  width: 300px / 960px * 100%;}

//css style//-----------------------------------.container {  width: 100%;}article[role="main"] {  float: left;  width: 62.5%;}aside[role="complimentary"] {  float: right;  width: 31.25%;}

顏色

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;}


參考：
http://www.w3cplus.com/sassguide/
https://www.sass.hk/
http://www.haorooms.com/post/sass_css

sass 成熟、穩定、強大的專業級CSS擴充語言