diff --git a/docs/index.html b/docs/index.html index 44b53ea..37fe5bd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,30 +1,112 @@ -Sass MQ+

General

variables

breakpoints

$breakpoints: (
+Sass MQ+
General
variables
breakpoints
$breakpoints: (
   mobile: 320px,
   tablet: 740px,
   desktop: 980px,
   wide: 1300px,
-) !default;
Description
Breakpoint list
Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.
Type
Map
Used by
Links
show-breakpoints
$show-breakpoints: () !default;
Description
Show breakpoints in the top right corner
If you want to display the currently active breakpoint in the top right corner of your site during development, add the breakpoints to this list, ordered by width. For example: (mobile, tablet, desktop).
Type
Map
Example
$show-breakpoints: (mobile, tablet, desktop);
-@import 'path/to/mq';
Used by
media-type
$media-type: all !default;
Description
Customize the media type (for example: @media screen or @media print) By default sass-mq uses an "all" media type (@media all and …)
Type
String
Used by
  • [mixin] mq
Links
functions
px2em
Description
Breakpoint list
Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.
Type
Map
Used by
Links
show-breakpoints
$show-breakpoints: () !default;
Description
Show breakpoints in the top right corner
If you want to display the currently active breakpoint in the top right corner of your site during development, add the breakpoints to this list, ordered by length. For example: (mobile, tablet, desktop).
Type
Map
Example
@use 'path/to/mq' with ($show-breakpoints: ('mobile', 'tablet', 'desktop'));
+
Used by
range-feature
$range-feature: width !default;
Description
Customize the media range feature (for example: @media (min-width…) or @media (min-height:…)) By default sass-mq uses an width range feature.
If you want to overried the range feature, you can use this option.
Type
String
Example
@use 'path/to/mq' with ($range-feature: height);
Used by
  • [function] mq
  • [mixin] mq
Links
media-type
$media-type: all !default;
Description
Customize the media type (for example: @media screen or @media print) By default sass-mq uses an "all" media type (@media all and …)
If you want to overried the media type, you can use this option.
Type
String
Example
@use 'path/to/mq' with ($media-type: 'screen');
Used by
  • [function] mq
  • [mixin] mq
Links
functions
px2em
@function px2em($px) { ... }
Description
Convert pixels to ems
Parameters
NameDescriptionTypeDefault value
$px
value to convert
Number—
Returns
Number
Example
$font-size-in-ems: px2em(16px);
-p { font-size: px2em(16px); }
Used by
  • [mixin] mq
get-breakpoint-width
get-breakpoint-length
@function get-breakpoint-width($name) { ... }
Description
Get a breakpoint's width
Parameters
NameDescriptionTypeDefault value
$name
Name of the breakpoint. One of $breakpoints
String—
Returns
Number —
Value in pixels
Example
$tablet-width: get-breakpoint-width(tablet);
-@media (min-width: get-breakpoint-width(desktop)) {}
Requires
Used by
  • [mixin] mq
[private] _quick-sort
@function get-breakpoint-length($name) { ... }
Description
Get a breakpoint's length
Parameters
NameDescriptionTypeDefault value
$name
Name of the breakpoint. One of $breakpoints
String—
Returns
Number —
Value in pixels
Example
$tablet-width: get-breakpoint-length(tablet);
+@media (min-width: get-breakpoint-length(tablet)) {}
Requires
stringify
@function stringify($list, $glue: ' and ') { ... }
Description
Joins all elements of $list with $glue.
Parameters
NameDescriptionTypeDefault value
$list
list to cast
List—
$glue
value to use as a join string
String' and '
Returns
String
Example
stringify(a b c)
+// a and b and c
stringify(a b c, ', ')
+// a, b, c
Used by
  • [function] mq
mq
@function mq($from: false, $until: false, $and: false, $or: false, $range-feature: $range-feature, $media-type: $media-type) { ... }
Description
Media Query function
Computes a media query based on a list of conditions.
Parameters
NameDescriptionTypeDefault value
$from
One of $breakpoints
String or Booleanfalse
$until
One of $breakpoints
String or Booleanfalse
$and
Additional media query parameters
String or Booleanfalse
$or
Alternative media query parameters
String or Booleanfalse
$range-feature
Media range feature: width, height…
String$range-feature
$media-type
Media type: screen, print…
String$media-type
Example
$mq-lap-and-up: mq($from: mobile);
+
+$mq-palm: mq($until: tablet);
+
+$mq-lap: mq(mobile, tablet);
+
+$mq-portable: mq($from: tablet, $and: '(orientation: landscape)');
+
+$mq-desk-small: mq(950px) {
+
+$mq-portable-screen: mq(tablet, $media-type: screen) {
+
+// Advanced use:
+$my-breakpoints: (L: 900px, XL: 1200px);
+$mq-custom: mq(L, $breakpoints: $my-breakpoints);
Requires
Used by
  • [mixin] mq
[private] _quick-sort
@function _map-sort-by-value($map) { ... }
Description
Sort a map by values (works with numbers only)
Parameters
NameDescriptionTypeDefault value
$map
Map to sort
Map—
Returns
Map —
Map sorted by value
mixins
mq
@function _map-sort-by-value($map) { ... }
Description
Sort a map by values (works with numbers only)
Parameters
NameDescriptionTypeDefault value
$map
Map to sort
Map—
Returns
Map —
Map sorted by value
mixins
mq
@mixin mq($from: false, $until: false, $and: false, $media-type: $media-type) { ... }
Description
Media Query mixin
Parameters
NameDescriptionTypeDefault value
$from
One of $breakpoints
String or Booleanfalse
$until
One of $breakpoints
String or Booleanfalse
$and
Additional media query parameters
String or Booleanfalse
$media-type
Media type: screen, print…
String$media-type
Example
.element {
+ }" data-collapsed="@mixin mq($from: false, $until: false, $and: false, $or: false, $range-feature: $range-feature, $media-type: $media-type) { ... }">@mixin mq($from: false, $until: false, $and: false, $or: false, $range-feature: $range-feature, $media-type: $media-type) { ... }
Description
Media Query mixin
Generates a media query block, based on a list of conditions, around a set of nested CSS statements.
Parameters
NameDescriptionTypeDefault value
$from
One of $breakpoints
String or Booleanfalse
$until
One of $breakpoints
String or Booleanfalse
$and
Additional media query parameters
String or Booleanfalse
$or
Alternative media query parameters
String or Booleanfalse
$range-feature
Media range feature: width, height…
String$range-feature
$media-type
Media type: screen, print…
String$media-type
Example
@use 'path/to/mq' as *;
+.element {
   @include mq($from: mobile) {
     color: red;
   }
@@ -135,13 +190,13 @@
   @include mq(L, $breakpoints: $my-breakpoints) {
     color: hotpink;
   }
-}
Requires
Links
add-breakpoint
Requires
Links
add-breakpoint
@mixin add-breakpoint($name, $width) { ... }
Description
Add a breakpoint
Parameters
NameDescriptionTypeDefault value
$name
Name of the breakpoint
String—
$width
Width of the breakpoint
Number—
Example
@include add-breakpoint(tvscreen, 1920px);
+ }" data-collapsed="@mixin add-breakpoint($name, $length) { ... }">@mixin add-breakpoint($name, $length) { ... }
Description
Add a breakpoint
Parameters
NameDescriptionTypeDefault value
$name
Name of the breakpoint
String—
$length
Length of the breakpoint
Number—
Example
@include add-breakpoint(tvscreen, 1920px);
 @include mq(tvscreen) {}
Requires
show-breakpoints
Requires
Links

+@include show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));

Requires

Links

\ No newline at end of file