業餘IT人的部落格

這篇是來講解如何用@mixin來打造RWD (Responsive Web Design) 網站

@mixin RWD有2種寫法一種是CSS都是固定，另一種是自訂CSS

先來說說固定的版本如何寫Code吧!

demo/
├── css/
│   ├── all.css
└── sass/
    ├── _mixin.scss
    ├── _main.scss
    └── all.scss

SASS下的_mixin.scss

先在_mixin.scss下寫每個行動版本的寬度及樣式
目前我先以背景顏色來當範例當寬度在768、568、414、320的時候背景顏色會跟著裝置的寬度做改變
程式碼如下：

@mixin w768-1 {
  @media (max-width:768px){
    background: white;
  }
}

@mixin w568-1 {
  @media (max-width:568px){
    background: pink;
  }
}

@mixin w414-1 {
  @media (max-width:414px){
    background: yellow;
  }
}

@mixin w320-1 {
  @media (max-width:320px){
    background: black;
  }
}

 

SASS下的_main.scss

請自行在HTML創建一個nav-bar的class
當他的裝置>768的時候呈現紅色(red)
當他的裝置在568~768之間背景顏色為白色(white)
當他的裝置在414~568背景顏色為粉紅色(pink)
當他的裝置在320~414背景顏色為黃色(yellow)
當他的裝置在320以下背景顏色為黑色(black)
程式碼如下：

.nav-bar{
    background: red;
    @include w768-1;
    @include w568-1;
    @include w414-1;
    @include w320-1;
}

 

SASS下的all.scss

//主要樣式
@import "mixin";
@import "main";

 

all.css

SASS經過編譯後,CSS會顯示每個裝置的背景顏色,程式碼如下：

.nav-bar { 
    background: red; 
}
@media (max-width: 768px) {
    .nav-bar { 
        background: white; 
    }
}
@media (max-width: 568px) {
    .nav-bar {
        background: pink; 
    } 
}
@media (max-width: 414px) {
    .nav-bar { 
        background: yellow; 
    } 
}
@media (max-width: 320px) {
    .nav-bar {
        background: black; 
    }
}

 

 

在來說說自訂的版本如何寫code吧!

demo/
├── css/
│   ├── all.css
└── sass/
    ├── _mixin.scss
    ├── _main.scss
    └── all.scss

SASS下的_mixin.scss

先在_mixin.scss下寫每個行動版本的寬度及@content
程式碼如下：

@mixin w768-2 {
  @media (max-width:768px){
    @content
  }
}

@mixin w568-2 {
  @media (max-width:568px){
    @content
  }
}

@mixin w414-2 {
  @media (max-width:414px){
    @content
  }
}

@mixin w320-2 {
  @media (max-width:320px){
    @content
  }
}

一樣以背景顏色來當範例當寬度在768、568、414、320的時候背景顏色會跟著裝置的寬度做改變

 

SASS下的_main.scss

請自行在HTML創建一個nav-bar1的class
當他的裝置>768的時候呈現紅色(red)
當他的裝置在568~768之間背景顏色為白色(white)
當他的裝置在414~568背景顏色為粉紅色(pink)
當他的裝置在320~414背景顏色為黃色(yellow)
當他的裝置在320以下背景顏色為黑色(black)
程式碼如下：

.nav-bar1{
    background: red;
    @include w768-2{
        background: #ffffff;
    }
    @include w568-2{
        background: pink;
    }
    @include w414-2{
        background: yellow;
    }
    @include w568-2{
        background: black;
    }
}

 

SASS下的all.scss

//主要樣式
@import "mixin";
@import "main";

 

all.css

SASS經過編譯後,CSS會顯示每個裝置的背景顏色,程式碼如下：

.nav-bar { 
    background: red; 
}
@media (max-width: 768px) {
    .nav-bar { 
        background: white; 
    }
}
@media (max-width: 568px) {
    .nav-bar {
        background: pink; 
    } 
}
@media (max-width: 414px) {
    .nav-bar { 
        background: yellow; 
    } 
}
@media (max-width: 320px) {
    .nav-bar {
        background: black; 
    }
}