Sass變量

程序員使用變量來表示數據,例如,作爲數值,字符或存儲器地址。變量最重要性是,在整個樣式表中的變量可重新使用所存儲的值。

語法

$variable_name : some value;

變量定義的美元符號($),並使用分號(;)結束。

示例

下面的例子演示了SCSS文件中的變量的使用:

變量 - www.yiibai.com

SASS變量使用示例

Sass is an extension of CSS that adds power and elegance to the basic language.

接下來創建一個文件:style.scss.

style.scss

$txtcolor:#008000;
$fontSize: 20px;

p{
color:$txtcolor;
font-size:$fontSize;
}

你可以告訴SASS監視文件,並隨時使用下面的命令更新SASS文件來修改CSS:

sass --watch C:\Ruby22-x64\style.scss:style.css

接着執行上面的命令,它會自動創建style.css文件,下面的代碼:

style.css

p {
color: #008000;
font-size: 20px;
}

輸出

讓我們來執行以下步驟,看看上面的代碼執行結果:

  • 保存上面的html代碼在variables.htmll文件。

  • 在瀏覽器中打開該HTML文件,輸出得到顯示如下。

Sass變量