Mixin hallita murtumispisteitä CSS-temppuja

Reagoivia web-suunnittelun luomuksia esiintyy usein useilla eri rajapisteillä. Näiden katkaisupisteiden hallinta ei ole aina helppoa. Niiden käyttö ja päivittäminen voi joskus olla tylsää. Siksi tarvitaan sekoitus, joka käsittelee katkaisupisteiden määrityksen ja käytön.

Yksinkertainen versio

Ensin tarvitset kartan taukopisteistä, jotka liittyvät nimiin.

$breakpoints: ( 'small': 767px, 'medium': 992px, 'large': 1200px ) !default;

Sitten mixin käyttää tätä karttaa.

/// Mixin to manage responsive breakpoints /// @author Hugo Giraudel /// @param (String) $breakpoint - Breakpoint name /// @require $breakpoints @mixin respond-to($breakpoint) ( // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) ( // Prints a media query based on the value @media (min-width: map-get($breakpoints, $breakpoint)) ( @content; ) ) // If the key doesn't exist in the map @else ( @warn "Unfortunately, no value could be retrieved from `#($breakpoint)`. " + "Available breakpoints are: #(map-keys($breakpoints))."; ) )

Käyttö:

.selector ( color: red; @include respond-to('small') ( color: blue; ) )

Tulos:

.selector ( color: red; ) @media (min-width: 767px) ( .selector ( color: blue; ) )

Edistynyt versio

Yksinkertainen versio mahdollistaa vain mediakyselyjen käytön min-width. Jos haluat käyttää edistyneempiä kyselyjä, voimme säätää alkuperäistä karttaa ja sekoittaa hieman.

$breakpoints: ( 'small': ( min-width: 767px ), 'medium': ( min-width: 992px ), 'large': ( min-width: 1200px ) ) !default;

/// Mixin to manage responsive breakpoints /// @author Hugo Giraudel /// @param (String) $breakpoint - Breakpoint name /// @require $breakpoints @mixin respond-to($breakpoint) ( // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) ( // Prints a media query based on the value @media #(inspect(map-get($breakpoints, $breakpoint))) ( @content; ) ) // If the key doesn't exist in the map @else ( @warn "Unfortunately, no value could be retrieved from `#($breakpoint)`. " + "Available breakpoints are: #(map-keys($breakpoints))."; ) )

Käyttö:

.selector ( color: red; @include respond-to('small') ( color: blue; ) )

Tulos:

.selector ( color: red; ) @media (min-width: 767px) ( .selector ( color: blue; ) )