SASS Tutorial (build your own CSS library) #15 - Media Queries

Key Takeaways

all right then gang so hopefully by now you're starting to see the power of sas and how it can help us generate these different classes really easily and it makes our code more reusable now i want to take it one step further and talk about responsive design a little bit and break points or media queries because when you're making a website you often want it to be responsive right now later on we're going to create a grid system and that is going to include responsive breakpoints so that on smaller screens you can display content differently than you would on larger screens where there's more space so to begin with what i'm gonna do is create inside the shinobi folder a new file called underscore breakpoints.scss so all of our kind of media query stuff and breakpoints are going to go in here now our media queries are basically going to be mixins which we can just drop in to our other selectors to say look an extra small screen style it like this or medium size screens style it like this and it's going to also adopt a mobile first approach so the breakpoints are going to work upwards with mint width now then the first thing i'm going to do is create a map of different break points for our site so we'll call this breakpoints and then put all of our different breakpoints inside this map now i'm just going to paste them in like so so we have an extra small break point which is just basically zero so we're saying look at extra small screens which start at position zero or width zero go all the way up to 480 at which point the small break point kicks in then all the way up to 720 at which point it's medium that kicks in then up to 960 where it becomes large then up to xl 1200 pixels all right so they're our different breakpoints now what i'd like to do is create a mixing for each one of these different break points so that if we have say i don't know something in one of these buttons for example i could say at extra small screens apply a font size of two pixels or something like that now that's ridiculous right that's never gonna happen that's just an example that's how i want our mixing to work an extra small screen mix in to say what rules i want for that screen size so let me delete that and close this file and now let's create this mixing so we say at mixing we've seen this before we give the mixing a name now we're not taking in any parameters or arguments so we don't need parentheses and then inside this mixing i'm going to use a media query so hopefully you've seen these before if you've studied css before we say at media and then i'm going to say the min width is going to be some kind of value now to do that i want to use the extra small break point right here so i'm not going to hard code it i'm going to use map get to say look in the breakpoints map and get me the extra small breakpoint so we're just basically saying at the minimum width of zero but we're not hard coding it in case we change these values later on we don't ever want to hard code stuff because then it makes updating things later harder so this is your typical media query it's just at media min width 0 essentially now inside here we're going to use at content now what does this mean well it means that if we use this mixing elsewhere if we go back to one of our components let me come to the card if we use that mixing by saying at extra small if we add rules like font size and set that equal to 10 pixels what we're doing is using the mixing and then this right here is the content so because we can't put these rules directly inside this mixing that makes no sense we don't want to hard code like a font size in here because we want this mixing to be reusable and it's not going to change the font size for every time we use this mixing what we do is we use content and then whatever properties we place inside that mixing when we use it is going to go where the content is right here okay i hope that makes sense so in that example right here the content is just gonna be this one property if we had multiple properties like background color is gonna be red then it would take in both of these two properties and output it where the content is right here so let's delete this example again and let's go back to this mixing and that's all there is to it for the extra small one now i'm going to do the same thing for each one of these break points small medium large and extra large so let me just paste a few of these in like so and i'm going to change this to medium but also this value is it medium no it's small sorry next so sm and then this one is medium so md and then this one is large so lg and then we also have extra large so let's change this and this to extra-large cool so now we have these mix-ins for these different break points and we can just drop these in to whatever selectors we use later on to apply different styles at different screen widths all right cool now i want to show you one more example which is a more kind of flexible mixing for a break point so what i'm going to do is say at mixin and i'm just going to call this one breakpoint now this breakpoint is going to take in a value which i'm going to call bp for break point so say in the future we want to apply some styles at a specific screen width and that screen width is not covered by one of these breakpoints defining these mixins right we want a very specific one then that's what we're creating this mix in for we're passing that break point right here so that could be 20 pixels or 200 pixels which isn't one of these things so what i'm going to do is open this up and in fact we'll also give this a default value of zero so if we don't pass in any kind of value for the breakpoint then it's just going to default to zero and then inside here we'll say medium and then it's going to be the min width is just going to be the break point right here so this is kind of like a very flexible break point we can specify whatever we want and in here we just need to output the content awesome so now we have all of our different break point mixins let's give this a whirl i want to kind of try this out in a test selector so i'm just going to paste in this so we have a class called responsive test right and all we're doing is including these different mixins to style this selector whatever has this class in the html differently at different screen widths so we're saying include the extra small break point which is this thing right here and we're saying at extra small screens and up because it's the min width right here we're just saying the minimum width is zero right so extra small screens and up we're saying we want it to be red color when you get to small screens because we're including this mixing for small screens i want the color to be blue so that means okay when you get to a minimum width of the small break point which is 480 it's not going to be red anymore we're changing it to blue now and then when you get to medium sized screens we're changing it to green and then when you get to large we change it to purple extra large orange and then we're using our custom break point mixing right here to pass in an even bigger break point of 1400 pixels and at that point we say okay well now i want the text to be pink all right so now let's try this out i'm going to go to the html and in the grid system section right here i'm just going to paste in this div which has a class of responsive test remember that was this class right here and inside there i just say changing colors so remember for very small screens it's going to be red then as we work our way up to larger screen sizes it's going to go from red to blue to green to purple to orange and finally to pink right now then before we preview this in the browser i'm opening up the terminal to make sure there's no errors and i can't see any errors so let's check this out in the browser and in fact before we preview it in a browser i've just realized we have to import the breakpoints i always forget to do this inside the index file over here so let's do that in the base and layout section i'm going to say at import and it's going to be the breakpoints file that we want all right so now we can save this check there's no errors and then we can preview this in a browser all right so if we scroll down here we can see we're a very small screen width and you can see it's red and as we go up through the break point it should change to blue first which it does then to green then to purple then to orange and then finally to pink awesome so this is our work and we have now our breakpoints mixins that we can use now in different selectors now at the minute the way we're using this is not entirely useful because we're not going to have this responsive test class in our library instead we might want classes for some kind of grid system that we can use inside our index instead of this class to display things differently on small screens than we would on large screens so we'll take a look at how we can use these breakpoints to generate some kind of grid system in the next lesson