iT邦幫忙

DAY 6
1

Sass3.3 & CSS設計模式系列 第 7

Sass教學 (6) - Sass 3.3 - 參考父選擇符:&


影片教學請點選下圖連結↓

以下文章同步於Github

先來介紹以前Sass3.2的語法,

//scss
.box{
    color:black;
    &:hover{
        color:blue;
    }
}
//編譯出的css
.box{color:black;}
.box:hover{color:black;}

&的作用是提取父元素選擇器,
&:hover的上一層因為是.box,
所以編譯出來自然會是.box:hover`。

再來你甚至可以這個樣子

//scss
.box{
    color:black;
    .ie8 &{
        color: blue;
    }
}
//編譯出的CSS
.box{color:black}
.ie8 .box{color:blue}

&也可以穿插在選擇器裡面,
所以你可以看得出來,
這個設定再來配合像modernizr的framework,
如果使用者用的瀏覽器是ie8,他就會在html tag加上一個class為ie8,
這樣你就可以透過&把邏輯寫在.box裡面,而不用再拉出來額外寫。

而Sass3.3新增的功能則是能讓&能夠連接字串,
因為Sass3.2的&後面只能連接:而已(:hover、:nth-childe(3n)), 範例如下:

//[..]代表程式碼
//scss
.box{
    &__block{..}
    &-module{..}
    &None{..}
}
.box2{
    ..
    &-menu{
    ..
        &-link{..}
    }
}
//編譯出的CSS
.box{..}
.box__block{..}
.box-module{..}
.boxNone{..}

.box2{..}
.box2-menu{..}
.box2-menu-link{..}

在Sass3.3還沒出來前,
有許多的CSS設計模式像是Bem,
如果有一個模組底下有子功能或子狀態,
都會利用一兩個下底線_或中線-來代表他的狀態,
你可以發現如果是以前在撰寫的時候,
我們每次要寫子模組就都一樣要寫前面的.box才能繼續寫下去,
但是透過Sass 3.3讓&能夠連接字串的功能後,
Sass開發者就又能節省不少調整code的時間,
今天如果這個.box的名稱要改掉,
只要把.box名稱改掉,
底下的子模組Class便能一起修改其名稱,
在使用便變得更加方便了!


上一篇
Sass教學 (5) - susy2 - 960Grid 流體版型(Fulid layout),susy1>susy2
下一篇
Sass教學 (7) - SMACSS - Base、Laout
系列文
Sass3.3 & CSS設計模式46

尚未有邦友留言

立即登入留言