include-media文檔

一、變量（VARIABLES）

1-1、斷點（breakpoints）

$breakpoints: (
  'phone': 320px,
  'tablet': 768px,
  'desktop': 1024px
) !default;

說明：
創建一個全局斷點列表

示例：
創建一個單獨的斷點用phone標記

$breakpoints: ('phone': 320px);

Used by

[function] im-intercepts-static-breakpoint
[mixin] media-context

Author
Eduardo Boucas

---

1-2、媒介表達式（media-expressions）

$media-expressions: (
  'screen': 'screen',
  'print': 'print',
  'handheld': 'handheld',
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
) !default;

說明：
創建一個靜態表達式或媒體類型列表清單。

示例：
創建一個單獨媒體類型（screen）

$media-expressions: ('screen': 'screen');

創建一個靜態表達式用邏輯分析（或操作）

$media-expressions: (
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
);

Used by

[function] im-intercepts-static-breakpoint
[mixin] media-context

Author

Eduardo Boucas

---

1-3、單位間隔（unit-intervals）

$unit-intervals: (
  'px': 1,
  'em': 0.01,
  'rem': 0.1
) !default;

說明：
定義了一個數量從每個單元添加或減去與單獨聲明斷點時的間隔。

示例：
默認間隔像素被定義爲1

@include media('>128px') {}

/* Generates: */
@media (min-width: 129px) {}

默認間隔ems定義爲0.01

@include media('>20em') {}

/* Generates: */
@media (min-width: 20.01em) {}

默認間隔rem被定義爲0.1， 使用字體大小：font-size: 62.5%

@include media('>2.0rem') {}

/* Generates: */
@media (min-width: 2.1rem) {}

Author

Eduardo Boucas

---

1-4、即使通信媒介支持（im-media-support）

$im-media-support: true !default;

說明
定義支持媒體查詢是否可用, 對於不支持媒體查詢的瀏覽器用創建的單獨的樣式表。

示例
不支持媒介查詢

$im-media-support: false;
@include media('>=tablet') {
  .foo {
    color: tomato;
  }
}

/* Generates: */
.foo {
  color: tomato;
}

Used by

[mixin] media

Author

Eduardo Boucas

---

1-5、即時通訊時沒有媒介斷點（im-no-media-breakpoint）

$im-no-media-breakpoint: 'desktop' !default;

說明

Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or intercept the breakpoint will be displayed, any others will be ignored.

示例

這個媒介查詢會被顯示，因爲它被靜態斷點截獲。

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
@include media('>=tablet') {
  .foo {
    color: tomato;
  }
}

/* Generates: */
.foo {
  color: tomato;
}

這個媒介查詢不會被顯示，因爲它不會被靜態斷點截獲。

$im-media-support: false;
$im-no-media-breakpoint: 'tablet';
@include media('>=desktop') {
  .foo {
    color: tomato;
  }
}

/* No output */

使用

[function] im-intercepts-static-breakpoint

作者

Eduardo Boucas

---

1-6、即時通訊時沒有媒介表達式（im-no-media-expressions）

$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;

說明

Selects which media expressions are allowed in an expression for it to be used when media queries are not supported.

示例

這個媒介查詢會被顯示，因爲它截獲了靜態斷點和包含唯一接受媒介表達式

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
$im-no-media-expressions: ('screen');
@include media('>=tablet', 'screen') {
  .foo {
    color: tomato;
  }
}

 /* Generates: */
.foo {
   color: tomato;
 }

這個媒介查詢不會被顯示，因爲它截獲了靜態表達式但是包含的一個媒介表達式是不接受的。

$im-media-support: false;
$im-no-media-breakpoint: 'desktop';
$im-no-media-expressions: ('screen');
@include media('>=tablet', 'retina2x') {
  .foo {
    color: tomato;
  }
}

/* No output */

使用

[function] im-intercepts-static-breakpoint

作者
Eduardo Boucas

---

二、MIXINS

2-1、（media）

@mixin media($conditions...) { ... }

說明

基於一個條件列表生成一個媒介查詢

參數

Name	Description	Type	Default
$conditions	媒介查詢條件	Arglist	none

內容（Content）

mixin允許額外的內容被傳遞（通過@content指令）

示例

用一個值設置斷點

@include media('>phone') { }

用兩個值設置斷點

@include media('>phone', '<=tablet') { } 

使用自定義值

@include media('>=358px', '<850px') { } 

使用設置斷點和自定義值

@include media('>desktop', '<=1350px') { } 

使用一個靜態表達式

@include media('retina2x') { } 

Mixing everything

@include media('>=350px', '<tablet', 'retina3x') { }

需要

[function] im-intercepts-static-breakpoint
[variable] im-media-support

作者

Eduardo Boucas

---

2-2、( media-context )

@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { ... }

說明

This mixin aims at redefining the configuration just for the scope of the call. It is helpful when having a component needing an extended configuration such as custom breakpoints (referred to as tweakpoints) for instance.

參數

Name	Description	Type	Default
$tweakpoints	Map of tweakpouints to be merged with $breakpoints	Map	()
$tweak-media-expressions	Map of tweaked media expressions to be merged with $media-expression	map	()

內容（content）

這個mixin允許額外的內容被傳遞（通過@content指令）

示例
用一個tweakpoint擴展全局斷點

@include media-context(('custom': 678px)) {
  .foo {
    @include media('>phone', '<=custom') {
     // ...
    }
  }
}

用自定義的媒介表達式擴展全局媒介表達式

@include media-context($tweak-media-expressions: ('all': 'all')) {
  .foo {
    @include media('all', '>phone') {
     // ...
    }
  }
}

擴展兩個配置映射

@include media-context(('custom': 678px), ('all': 'all')) {
  .foo {
    @include media('all', '>phone', '<=custom') {
     // ...
    }
  }
}

需要

[variable] breakpoints
[variable] media-expressions

作者

Hugo Giraudel

---

三、FUNCTIONS

3-1、( im-intercepts-static-breakpoint )

@function im-intercepts-static-breakpoint($conditions...) { ... }

說明

確定一個條件列表是否被靜態斷點截獲。

參數

Name	Description	Type	Default value
$conditions	媒介查詢條件	Arglist	none

返回

Boolean — 如果條件被靜態斷點截獲返回true。

Requires
[variable] breakpoints
[variable] im-no-media-breakpoint
[variable] media-expressions
[variable] im-no-media-expressions

使用

[mixin] media