Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Breakpoint
Simple example - Sass 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small) { 
background-col...
Simple example - CSS 
body { 
color: #333; 
} 
@media (max-width: 768px) { 
body { 
background-color: #efefef; 
} 
} 
@med...
... so what?
More complex queries 
$bp-sm-screen-and-phones: 'only screen' (max-width 760px), 
max-device-width 900px; 
.rwd-table { 
@...
Resolution queries - Sass 
$hidpi: min-resolution 1.5dppx; 
.sprite-icon { 
background-image: url('images/sprite.png'); 
@...
Resolution queries - CSS 
.sprite-icon { 
background-image: url('images/sprite.png'); 
} 
@media (min-resolution: 143dpi),...
Media query fallbacks 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small) { 
background-col...
Fallback class 
body { 
color: #333; 
} 
@media (max-width: 768px) { 
body { background-color: #efefef; } 
} 
@media (min-...
Multiple-file fallbacks 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small) { 
background-c...
Multiple-file fallbacks 
Style.scss: 
// this sheet includes the queries 
$breakpoint-no-queries: false; 
@import 'mqs'; 
...
Now let's do something fun...
...with IE8 support (single file)
_variables.scss 
_mixins.scss 
_typography.scss 
... 
Mobile.scss 
$breakpoint-no-queries: true; 
$include-mobile-styles: ...
The Sass... 
$bp-small: 768px; 
body { 
color: #333; 
@include breakpoint(max-width $bp-small, 
'no-query' $include-mobile...
Thanks! 
@RoboAndie
Breakpoint
Breakpoint
Breakpoint
Breakpoint
Prochain SlideShare
Chargement dans…5
×

Breakpoint

674 vues

Publié le

A brief introduction to the Breakpoint Sass plugin.

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Breakpoint

  1. 1. Breakpoint
  2. 2. Simple example - Sass $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small) { background-color: #efefef; } @include breakpoint($bp-small) { font-size: 120%; } }
  3. 3. Simple example - CSS body { color: #333; } @media (max-width: 768px) { body { background-color: #efefef; } } @media (min-width: 768px) { body { font-size: 120%; } }
  4. 4. ... so what?
  5. 5. More complex queries $bp-sm-screen-and-phones: 'only screen' (max-width 760px), max-device-width 900px; .rwd-table { @include breakpoint($bp-sm-screen-and-phones) { /* responsive table styles */ } } Compiled: @media only screen and (max-width: 760px), (max-device-width: 900px) { .rwd-table { /* responsive table styles */ } }
  6. 6. Resolution queries - Sass $hidpi: min-resolution 1.5dppx; .sprite-icon { background-image: url('images/sprite.png'); @include breakpoint($hidpi) { background-image: url('images/sprite2x.png'); } }
  7. 7. Resolution queries - CSS .sprite-icon { background-image: url('images/sprite.png'); } @media (min-resolution: 143dpi), (-webkit-min-device-pixel-ratio: 1.48958), (min--moz-device-pixel-ratio: 1.48958) { .sprite-icon { background-image: url('images/sprite2x.png'); } }
  8. 8. Media query fallbacks $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small) { background-color: #efefef; } @include breakpoint($bp-small, 'no-query' '.no-mqs') { font-size: 120%; } }
  9. 9. Fallback class body { color: #333; } @media (max-width: 768px) { body { background-color: #efefef; } } @media (min-width: 768px) { body { font-size: 120%; } } .no-mqs body { font-size: 120%; }
  10. 10. Multiple-file fallbacks $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small) { background-color: #efefef; } @include breakpoint($bp-small, 'no-query' true) { font-size: 120%; } }
  11. 11. Multiple-file fallbacks Style.scss: // this sheet includes the queries $breakpoint-no-queries: false; @import 'mqs'; Style.css: body { color: #333; } @media (max-width: 768px) { body { background-color: #efefef;} } @media (min-width: 768px) { body { font-size: 120%; } } Oldie.scss: // this sheet excludes the queries $breakpoint-no-queries: true; @import 'mqs'; Oldie.css: body { color: #333; font-size: 120%; }
  12. 12. Now let's do something fun...
  13. 13. ...with IE8 support (single file)
  14. 14. _variables.scss _mixins.scss _typography.scss ... Mobile.scss $breakpoint-no-queries: true; $include-mobile-styles: true; $include-desktop-styles: false; @import //all the partials Desktop.scss $breakpoint-no-queries: true; $include-mobile-styles: false; $include-desktop-styles: true; @import //all the partials Responsive.scss $breakpoint-no-queries: false; $include-mobile-styles: true; $include-desktop-styles: '.no-mqs'; @import //all the partials
  15. 15. The Sass... $bp-small: 768px; body { color: #333; @include breakpoint(max-width $bp-small, 'no-query' $include-mobile-styles) { background-color: #efefef; } @include breakpoint($bp-small, 'no-query' $include-desktop-styles) { font-size: 120%; } }
  16. 16. Thanks! @RoboAndie

×