DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> Sass教程 >> 3.1 Sass變量
3.1 Sass變量
編輯:Sass教程     

我們都知道,JavaScript可以有變量、數據類型、函數等語法。而作為一門“編程式”的語言,Sass同樣也具備這些語法。在接下來Sass的學習中,大家別忘了多多將Sass的語法與JavaScript的語法對比,這樣更能加深理解和記憶。

這一節,我們先來介紹一下Sass中的變量。

一、Sass變量簡介

在JavaScript中,聲明變量都是用var。但是在Sass中,我們聲明變量使用的是“$”(美元符號)開頭。

語法:

說明:

我們可以看出,Sass的變量包括3部分:聲明符、變量名、值。Sass變量定義的方式,跟CSS語法很相似,這個我們很容易理解。此外我們需要注意一下,定義一個Sass變量必須用“$”開頭,不然編譯的時候是無法識別的。

在Sass中,對於變量的取值有2種方式:(1)一般值;(2)默認值。

1、一般值

在Sass中,變量的一般值,指的是我們常見的變量值,這個值可以是數字、字符串等。

舉例1:

 
$width:10px;
div
{
    font-size:$width;
}

編譯出來的CSS代碼如下:

 
div
{
    font-size:10px;
}

舉例2:

 
$color:white;
$bgColor:red;
body
{
    color:$color;
    background-color:$bgColor;
}

編譯出來的CSS代碼如下:

 
body
{
    color:white;
    background-color:red;
}

2、默認值

在Sass中,變量還有一種取值方式,那就是默認值。所謂的默認值,指的是給變量初始化一個默認值,這個值在後面可以根據開發的需要,使用一個“同名變量”的值覆蓋掉。定義變量的默認值很簡單,我們只需要在“變量值”後面加上“!default”就可以了。

舉例:

 
$width:10px !default;
.div1
{
    width:$width;
}
.div2
{
    $width:20px;
    width:$width;
}
.div3
{
    $width:30px;
    width:$width;
}

編譯出來的CSS代碼如下:

 
.div1
{
    width:10px;
}
.div2
{
    width:20px;
}
.div3
{
    width:30px;
}

分析:

想要覆蓋變量的默認值很簡單,我們只需要在該變量被調用之前重新定義該變量的值就可以了。變量的默認值,在實際開發特別是組件化開發中是非常有用的。當然,這裡我們只需要簡單了解一下即可。

二、變量的作用域

跟JavaScript的變量一樣,Sass的變量也有作用域。在Sass中,變量根據作用域可以分為2種:(1)全局變量;(2)局部變量。

其中,Sass中的作用域跟JavaScript中的作用域是非常相似的。

1、全局變量

在Sass中,全局變量一般指的是在“選擇器、混合宏、繼承等”外部定義的變量。全局變量從定義開始,一直到整個程序結束都起作用。對於混合宏、繼承這些,我們在後續章節會詳細介紹。

舉例:

 
$color:red;        //定義全局變量
body
{
    color:$color;  //調用全局變量
}

編譯出來的CSS代碼如下:

 
body
{
    color:red;
}

2、局部變量

在Sass中,局部變量一般指的是在“選擇器、混合宏、繼承等”內部定義的變量。局部變量只能在這些的內部起作用,在這些的外部是不起作用的。

舉例:

 
$color:red;             //定義全局變量
body
{
    $color:green;       //定義局部變量
    div
    {
        color:$color;   //調用局部變量
    }
}

編譯出來的CSS代碼如下:

 
body
{
    color:green;
}

分析:

在這個例子中,局部變量“$color:green;”會把全局變量“$color:red;”的值覆蓋,因此最終$color的值是green。對於這個,我們聯系一下JavaScript中的局部變量和全局變量就不難理解了。

疑問

1、像下面這個例子,我們直接用純CSS寫不就得了,搞毛線還用變量定義一遍那麼麻煩呢?

 
$width:10px;
div
{
    font-size:$width;
}

這個簡單例子,只是讓小伙伴們認識一下Sass變量的用法罷了。在實際開發中,就拿 學習網來說,整個網站大量地方需要用到相同的顏色值、字體大小等。如果我們只用純CSS的方式,一旦這些顏色值等以後需要改動,我們有多少處相同地方就得手動改多少次,甚至還可能出現遺漏。但是如果我們使用變量的方式,每次改動我們只需要改變變量的值就可以了,這樣極大地加快我們的開發效率和提高了網站的可維護性。

此外給小伙伴們一個實用的建議:對於需要重復使用的就定義成一個變量,對於不需要重復使用的直接用數值就行了。

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