include-media文档

Posted 2022-12-01 Dragon_GL

一、变量（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