🚀 𝐒𝐭𝐨𝐩 𝐫𝐞𝐩𝐞𝐚𝐭𝐢𝐧𝐠 @𝐦𝐞𝐝𝐢𝐚 𝐬𝐜𝐫𝐞𝐞𝐧! 𝐔𝐬𝐞 𝐒𝐚𝐬𝐬 𝐌𝐢𝐱𝐢𝐧𝐬 𝐭𝐨 𝐦𝐚𝐤𝐞 𝐲𝐨𝐮𝐫 𝐫𝐞𝐬𝐩𝐨𝐧𝐬𝐢𝐯𝐞 𝐂𝐒𝐒 𝐜𝐥𝐞𝐚𝐧𝐞𝐫 𝐚𝐧𝐝 𝐬𝐦𝐚𝐫𝐭𝐞𝐫.

𝐏𝐫𝐨𝐛𝐥𝐞𝐦?
Assume, you are styling a responsive web application. When styling for different screen sizes, you often need to write multiple @media queries. This can lead to repeating @media statements throughout your CSS file. How can we avoid it?

𝐒𝐨𝐥𝐮𝐭𝐢𝐨𝐧?
Sass solves this problem by Mixin. Mixins allow you to define styles that can be re-used throughout your stylesheet.

𝐇𝐨𝐰?
💠 Install Sass → npm install sass.

💠Define a mixing named it screen-style with the argument of size screen and in the body use @content (take an entire block of styles).

💠Define a new mixin named it small-breakpoint and use name of previous mixin with @include (it will be included in the previous mixin).

💠Define the desired selector.

💠Use the small-breakpoint mixin with @include inside the selector.

💠Add the desired styles.

❓ 𝐇𝐚𝐯𝐞 𝐲𝐨𝐮 𝐞𝐯𝐞𝐫 𝐮𝐬𝐞 𝐌𝐢𝐱𝐢𝐧𝐬? 𝐈𝐟 𝐬𝐨, 𝐒𝐡𝐚𝐫𝐞 𝐲𝐨𝐮𝐫 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞 𝐢𝐧 𝐭𝐡𝐞 𝐜𝐨𝐦𝐦𝐞𝐧𝐭.

hashtag#CSS hashtag#Sass hashtag#FrontendDevelopment hashtag#WebDevelopment hashtag#CleanCode