One thing you can do with CSS custom properties that you can’t do with variables in preprocessors is redefine them and assign new values inside @media queries. It’s a useful ability to have and one more reason why you’d want to work with what are effectively native CSS variables.
Tag: media queries
Sass: The @media Directive
One of the cornerstones of responsive design is the media query. The @media directive provides a mechanism for serving different styles to different devices with different characteristics. Sass both supports and extends the @media rule.
3 Types of Breakpoints In Responsive Designs
One of the more important questions you’ll have to answer in a responsive design is where to set breakpoints. Originally designers chose the dimensions of popular devices as a good place to add them. If the iPad is 768px × 1024px then 768px and 1024px might make for good breakpoints or so the thought went.
Continue reading
Where And How To Set Breakpoints In Media Queries
Flexible layouts work well to a point, but there comes a time when we need a more drastic change than simply allowing design elements to expand and contract. There comes a point where we need the ability to make larger changes in how elements flow within a design. Enter media queries. Now with official W3C goodness.
Continue reading