SCSS語法 - @import、@media、@extend

Posted on Edited on In Views: Disqus:

 

一、@Rules and Directives

1、@Import

Import指示詞除了可以把n個scss檔匯在一起編譯成一個css檔之外，

還可以把內容單純為css語法的scss檔(注意該檔名第一個字母為底線)，

不編譯，直接一起轉成css檔的功能，如下範例

_reset.scss

body {
    padding: 0;
}

base.scss

@import 'reset';


body {
    background-color: #fff;
}

output.css

body {
    padding: 0;
}


body {
    background-color: #fff;
}

 

還有一種是巢狀式import，比較不常用

example.scss

.example {
    color: red;
}

輸入scss檔

#main {
    @import "example";
}

輸出css檔

#main .example {
  color: red;
}

 

2、@media

@media在scss裡的用法如下

scss輸入

.sidebar {
    width: 300px;
    @media screen and (orientation: landscape) {
        width: 500px;
    }
}

css輸出

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

 

也可以做巢狀式嵌套

scss輸入

@media screen {
    .sidebar {
        @media (orientation: landscape) {
            width: 500px;
        }
    }
}

css輸出

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

 

3、Extend/Inheritance

a、在scss裡繼承基本的用法如下

scss輸入

.error {
    border: 1px #f00;
    background-color: #fdd;
}


.seriousError {
    @extend .error;
    border-width: 3px;
}

css輸出

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}


.seriousError {
  border-width: 3px;
}

 

注意，只要指定繼承名稱在各個樣式有出現的地方都要被套用

scss輸入

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

css輸出

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }


.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }


.seriousError {
  border-width: 3px; }

 

另一個比較不一樣的例子

scss輸入

.hoverlink {
    @extend a:hover;
}


.comment a.user:hover {
    font-weight: bold;
}

css輸出

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold;
}

 

b、Multiple Extends

scss輸入

.error {
    border: 1px #f00;
    background-color: #fdd;
}


.attention {
    font-size: 3em;
    background-color: #ff0;
}


.seriousError {
    @extend .error;
    @extend .attention;
    border-width: 3px;
}

css輸出

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}


.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0;
}


.seriousError {
  border-width: 3px;
}

 

c、Chaining Extends

scss輸入

.error {
    border: 1px #f00;
    background-color: #fdd;
}


.seriousError {
    @extend .error;
    border-width: 3px;
}


.criticalError {
    @extend .seriousError;
    position: fixed;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
}

css輸出

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd;
}


.seriousError, .criticalError {
  border-width: 3px;
}


.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

 

d、Selector Sequences

scss輸入

#fake-links .link {
  @extend a;
}


a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

css輸出

a, #fake-links .link {
  color: blue;
}
a:hover, #fake-links .link:hover {
  text-decoration: underline;
}

 

e、Merging Selector Sequences

如果被指定繼承的名稱其前面還有出現其他的selector，

則會產生下面組合

scss輸入

#admin .tabbar a {
    font-weight: bold;
}


#demo .overview .fakelink {
    @extend a;
}

css輸出

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold;
}

 

另一個例子你會發現有相同的selector id #admin 有發生被merge起來的情形

scss輸入

#admin .tabbar a {
    font-weight: bold;
}


#admin .overview .fakelink {
    @extend a;
}

css輸出

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold;
}

 

f、@extend-Only Selectors #placeholders

這個scss語法的樣式是可以單獨存在的，並且不會被render到css

#context a%extreme {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}

只有明確呼叫才會被render

scss輸入

#context a%extreme {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}


.notice {
    @extend %extreme;
}

css輸出

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

 

g、The !optional Flag

這是一個正常會動的範例

.notice {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}


.important {
    @extend .notice;
}

不過，如果故意extend不存在的樣式名稱，則會編譯出錯，如下

.notice {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}


.important {
    @extend .notice2;
}

可以加上「!optional」修飾詞，以表示當extend不存在樣式名稱時，則不做render

.notice {
    color: blue;
    font-weight: bold;
    font-size: 2em;
}


.important {
    @extend .notice2 !optional;
}

 

h、@extend in @media

在@media範圍裡面使用@extend呼叫指定樣式名稱時，

該樣式名稱不能放在@media範圍之外，否則會出錯，如下範例。

.error {
    border: 1px #f00;
    background-color: #fdd;
}


@media print {
    .seriousError {
        @extend .error;
        border-width: 3px;
    }
}

應該把該樣式名稱放在@media範圍裡面才行。

@media print {
    .error {
        border: 1px #f00;
        background-color: #fdd;
    }
    .seriousError {
        @extend .error;
        border-width: 3px;
    }
}