DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> Sass教程 >> 3.3 Sass嵌套
3.3 Sass嵌套
編輯:Sass教程     

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

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

一、選擇器嵌套

選擇器嵌套,是Sass中最常見的嵌套方式,這個類似於HTML元素的嵌套。這種嵌套方式我們在之前的章節接觸過好幾次了,現在再來看一個復雜點的例子。

舉例:

 
$color1:red;
$color2:green;
$color3:blue;
body
{
    color:$color1;
    .column
    {
        color:$color2;
        .content-title
        {
            color:$color3;
        }
    }
}

編譯出來的CSS代碼如下:

 
body 
{
  color: red;
}
body .column 
{
  color: green;
}
body .column .content-title
{
  color: blue;
}

分析:

選擇器嵌套這種方式雖然操作起來很方便,但是卻有一個很大的弊端:嵌套的層級越深,編譯出來的CSS代碼的選擇器層級也越深。這種嵌套方式會導致CSS樣式冗余,並且難以維護。

在CSS中,選擇器的層級越多,浏覽器解析時匹配的次數就越多,因而速度就越慢。因此在定義選擇器的時候,我們要盡量讓選擇器的層級少一些,最好不要超過3層。所以在實際開發中,我們應該盡量注意一下Sass選擇器嵌套中的層級問題,盡量少用選擇器嵌套的方式來書寫Sass。

CSS選擇器的性能比較復雜,具體參考“HTML和CSS進階教程”中“12.6高性能的選擇器”這一節,看完會對選擇器的原理有非常深入的理解。

二、屬性嵌套

在Sass中,還為我們提供了一種屬性嵌套的方式。我們都知道,CSS有些屬性的前綴是相同的,例如:

  • (1)border-top、border-right、border-bottom、border-left這4個屬性擁有相同的前綴“border”;
  • (2)margin-top、margin-right、margin-bottom、margin-left這4個屬性擁有相同的前綴“margin”;
  • (3)font-family、font-size、font-weight、font-variant等屬性擁有相同的前綴“font”;
  • ……

對於這些擁有相同前綴的屬性,我們可以使用屬性嵌套的方式來簡化操作。

舉例:

 
div
{
    width:100px;
    height:100px;
    font:
    {
        family:Arial;
        size:14px;
        weight:bold;
    }
}

編譯出來的CSS代碼如下:

 
div 
{
    width: 100px;
    height: 100px;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
}

分析:

對於屬性嵌套,我們要特別注意一點:在需要嵌套的屬性前綴後面一定要加英文冒號“:”,不然編譯出來的就不是我們想要的效果。

在上面例子中,如果我們把font後面的冒號去掉,編譯出來的CSS代碼如下:

 
div 
{
    width: 100px;
    height: 100px;
}
div font 
{
    family: Arial;
    size: 14px;
    weight: bold;
}

這就完全不是我們預期的效果了。剛剛接觸Sass的小伙伴們一定要特別留意這一點。

舉例:

 
div
{
    border:
    {
        top:1px solid red;
        bottom:1px solid green;
    }
}

編譯出來的CSS代碼如下:

 
div 
{
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

三、偽類嵌套或偽元素嵌套

在Sass中,還有一種嵌套方式:偽類嵌套或偽元素嵌套。偽類嵌套(或偽元素嵌套)跟屬性嵌套很像,只不過它是需要借助“&”符號一起配合使用。

對於偽類,我們在“CSS入門教程”中的 “CSS超鏈接偽類”接觸過了。CSS3也增加很多偽類,如:first-child、nth-child()等。

偽元素跟偽類是不一樣的,常見的偽元素只有4個,即::before、::after、::first-letter、::first-line。對於偽元素和偽類的區別,具體請參考“CSS3教程”進階部分(即將上線)。

舉例:偽類嵌套

 
$color1:red;  
$color2:green;
a{  
    color:$color1; 
    &:hover
    {  
        color:$color2;
    }
}

編譯出來的CSS代碼如下:

 
a
{
    color: red;
}
a:hover 
{
    color: green;
}

分析:

偽類嵌套都是結合“&”符號來實現的,編譯的時候“&”會替換成相應的選擇器。

舉例:偽元素嵌套

 
.clearfix
{
    *zoom:1;
    &:after
    {
        clear:both;
        content:"";
        display:block;
        height:0;
        visibility:hidden;
    }
}

編譯出來的CSS代碼如下:

 
.clearfix{*zoom:1;}
.clearfix::after
{
    clear:both;
    content:"";
    display:block;
    height:0;
    visibility:hidden;
}

分析:

偽元素嵌套同樣也是結合“&”符號來實現的,編譯的時候“&”會替換成相應的選擇器。上面這個是清除浮動最常用的方法,具體原理可以參考“HTML和CSS進階教程”中“9.5清除浮動”這一節。

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