[Sass][Visual Studio] SASS 進階使用 (Media, color function, If condition, loop(@for, @each), key-value mapping )

熱門文章 (Popular Post)

Posted by : Duran Hsieh 2月 15, 2016

目錄

1. SASS 基本介紹與安裝 (An introduction to SASS and Using SASS with Visual Studio) 
2. SASS 語法介紹1 (Variable, Mixin, and Nest structure)
3. SASS 語法介紹2 (Import, Extend, Comment, error , and @debug and @warn)
4. SASS 進階使用 (Mathematical calculations, Selector(%), Parent selectors, List)
5. SASS 進階使用 (Media, color function, If condition, loop(@for, @each), key-value mapping )
6. SASS 問題 : Web essentials 2015 does not compile automatically


前言

本篇介紹的內容中 Media queries 比較特別,為CSS3的模組。個人在執行
專案的時候發現網站樣式中使用Media queries,進行了研究並在此篇做一個紀錄,讓自己印
象深刻,也提供大家參考。以下是這次介紹的內容:
  1. Media queries 
  2. Color function
  3. If condition
  4. Loop(@for, @each)
  5. Key-value mapping
此篇文章將同步發佈於點部落與個人部落格,如果有錯誤希望前輩們不吝指教,謝謝!


內容

  • Media Queries

CSS3模組,為響應式網站(Responsive web design)設計技術,目的為了提高網頁可用性,
讓網頁顯示能符合行動裝置銀幕與一般電腦銀幕,依據目前裝置或銀幕大小,調整網頁
顯式樣式。目前不支援IE8。
在CSS2稱為Media type,在CSS3稱為Media Queries。


Media Queries 使用方法如下(Usage):
Html embed:

CSS usage:
@media screen and (min-width: 670px)  {
      // css content
}



Media Queries 語法如下(Syntax):
@media [media type] and [media feature]

[media type] : braille | embossed | handheld | print | projection | screen | speech | tty | tv
[media feature] :  詳細請參考 -> Media queries
    - Can use Max/Min prefix:
        color | color-index | device-aspect-ratio | device-height  | device-width  | height |
        monochrome | resolution | width

    - Cannot use Max/Min prefix:
        grid | scan

@media screen and (min-width: 1000px)
{
    //....
}

 

Media Queries Example

@media screen and (min-width: 1000px) {
    //當寬度 >= 1000px,這段程式碼會重新載入
    //when width >= 1000px, this section will be reload
}
@media screen and (min-width: 670px) and (max-width: 1000px){
    //當 寬度 在670px ~ 1000px 之間,這段程式碼會重新載入
    //when width between 670px and 1000px, this section will be reload
}
@media screen and (max-width: 670px){
    //當寬度 <= 670px,這段程式碼會重新載入
    //when width <= 670px, this section will be reload
}








  • Color function

你可以使用color function,像是lighten, adjust-hue, mix, saturate...等等。
You can use color function, such as: lighten, adjust-hue, mix, saturate...etc.

$color-value-red : #ee1818;
$color-value-blue : #111cef;

body {
    background-color : lighten($color-value-red, 30%);
}

h2{
    color : adjust-hue($color-value-red, 30deg);
}

h3{
    color : mix($color-value-red, $color-value-blue);
}

h4{
    color : saturate($color-value-red, 50%);
}





  • If condition

使用方法如下:
Usage as below:
@mixin set-font-color($value){
    @if $value < 5px {
        background-color: white;
    }
    @else{
        background-color: yellow;
    }
}


h2{
    @include set-font-color(20pt);
}

h3{
    @include set-font-color(0pt);
}




  • Loop(@for, @each)

    @for:

$color-value-red : red;

@for $i from 1 through 6 {
    .div#{$i}{
        background-color: lighten($color-value-red,$i*5);
        width:50px;
        height:50px;
    }
}
 



    @each:
$color-list: white,gray,red,blue,yellow,green;
@each $color in $color-list{
    $i: index($color-list, $color);

    .divv#{$i}{
        background-color:$color;
        width:50px;
        height:50px;
    }
}



  • Key-value mapping

$color-key-value-list: (
    keya: #eb1f57,
    keyb: #ef16d0,
    keyc: #2826e2,
    keyd: #19f3a3,
    keye: #358f0b,
    keyf: #8ea10f
);
@each $key, $color in $color-key-value-list{

    .#{$key}{
        background-color:$color;
        width:50px;
        height:50px;
    }
}








範例程式


  1. https://dl.dropboxusercontent.com/u/13585157/SassDemo5.zip
  2. https://dl.dropboxusercontent.com/u/13585157/SassDemo6.zip



參考資料

  1. CSS3 MEDIA QUERIES 詳細介紹與使用方法,RESPONSIVE WEB DESIGN 必備技術 - FunDesigner
  2. CSS3 @media Rule - w3school
  3. Adding Style with CSS - Microsoft Virtual Academy 
  4. Media queries - Wiki 
  5. Mobile Web 前端技術筆記(二): Media Queries 與 CSS - 烏托比亞
  6. simplifying css in visual studio with sass - pluralsight






Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Duran Hsieh @ Matsurigoto - Date A Live - Powered by Blogger - Designed by Johanes Djogan -