DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> Sass教程 >> 3.6 Sass語法基礎
3.6 Sass語法基礎
編輯:Sass教程     

在這一章中,我們共介紹了Sass中的變量、數據類型、嵌套、插值以及注釋等。

一、Sass變量

在Sass中,我們聲明變量使用的是“$”(美元符號)開頭。Sass的變量包括3部分:聲明符、變量名、值。

語法:

說明:

在Sass中,對於變量的取值有2種方式:(1)一般值;(2)默認值。定義變量的默認值很簡單,我們只需要在“變量值”後面加上“!default”就可以了。

 
$width:10p;               //定義變量的一般值
$width:10px !default;     //定義變量的默認值

二、數據類型

在Sass中,共有7種數據類型:

  • (1)數字值,如10、10px、10%等;
  • (2)字符串,如"微軟雅黑"、sans-serif等;
  • (3)布爾值,如true、false;
  • (4)顏色值,如#FF00FF、RGB(255,0,255)、hsl(360,50%,50%);
  • (5)列表值,如“10px 20px 30px 40px”(空格隔開)或“YaHei,Arial,Helvetica,sans-serif”(逗號隔開);
  • (6)Map值,簡單了解即可;
  • (7)空值null;

三、Sass嵌套

Sass為我們提供了一種方便的操作方式:嵌套。在Sass中,共有3種嵌套方式:

  • (1)選擇器嵌套;
  • (2)屬性嵌套;
  • (3)偽類嵌套;

四、Sass插值

在Sass中,我們可以通過使用插值的方式來實現在“選擇器名”、“屬性名”以及“屬性值”中插入一個“變量的值”,從而來“構造”一個新的選擇器名、新的屬性名以及新的屬性值。

語法:

 
#{變量}

五、Sass注釋

在Sass中,共有3種注釋方式:

  • (1)/*注釋內容*/
  • (2)//注釋內容
  • (3)/*!注釋內容*/

第1種注釋方式在編譯後不會保留下來,第2種和第3種注釋方式在編譯後都會保留下來。其中,第3種注釋方式用得較少,一般用於CSS文件頂部聲明版權信息。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved