sass (英文全稱：syntactically awesome stylesheets) 是乙個最初由 hampton catlin 設計並由 natalie weizenbaum 開發的層疊樣式表語言。
變數用於儲存一些資訊，它可以重複使用。
sass 變數可以儲存以下資訊：
字串數字
顏色值布林值
列表null 值
sass 變數使用 $ 符號：
$variablename: value;
以下例項設定了四個變數：myfont, mycolor, myfontsize, 和 mywidth。
變數宣告後我們就可以在**中使用它：
sass **：
$myfont: helvetica, sans-serif;
$mycolor: red;
$myfontsize: 18px;
$mywidth: 680px;
body {
font-family: $myfont;
font-size: $myfontsize;
color: $mycolor;
#container {
width: $mywidth;
將以上**轉換為 css **，如下所示：
css **：
body {
font-family: helvetica, sans-serif;
font-size: 18px;
color: red;
#container {
width: 680px;
sass 作用域
sass 變數的作用域只能在當前的層級上有效果，如下所示 h1 的樣式為它內部定義的 green，p 標籤則是為 red。
sass **：
$mycolor: red;
h1 {
$mycolor: green; // 只在 h1 裡頭有用，區域性作用域
color: $mycolor;
p {color: $mycolor;
將以上**轉換為 css **，如下所示：
css **：
h1 {
color: green;
p {color: red;
!global
sass **
$mycolor: red;
h1 {
$mycolor: green !global; // 全域性作用域
color: $mycolor;
p {color: $mycolor;
現在 p 標籤的樣式就會變成 green。
將以上**轉換為 css **，如下所示：
css **
h1 {
color: green;
p {color: green;
sass用法總結
一 sass安裝 1 移除原有的ruby源位址 gem sources remove 2 新增可用的ruby源位址 gem sources a 3 安裝sass gem install sass 4 sublime支援scss檔案高亮顯示 借助package control安裝sass外掛程式，之後...
sass高階篇總結一
if 指令是乙個 sassscript，它可以根據條件來處理樣式塊，如果條件為 true 返回乙個樣式塊，反之 false 返回另乙個樣式塊。在 sass 中除了 if 之，還可以配合 else if 和 else 一起使用。mixin blockorhidden boolean true disp...
sass用法總結（持續更新中）
官網 1，巢狀規則 1.1普通巢狀 sass 允許將一套 css 樣式巢狀進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器 1.2父選擇器 hover 在巢狀 css 規則時，有時也需要直接使用巢狀外層的父選擇器，例如，當給某個元素設定hover樣式時，或者當body元素有某個 classna...