The latest articles on DEV Community by MarcoPal (@marcopal). https://dev.to/marcopal https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F347426%2Fe028ad3f-1a0d-4e21-8d69-de97caaa1ee6.jpeg https://dev.to/marcopal en MarcoPal Sat, 07 Mar 2020 19:28:17 +0000 https://dev.to/marcopal/scss-system-responsiveness-in-one-line-4eca https://dev.to/marcopal/scss-system-responsiveness-in-one-line-4eca <p>Hi everybody,<br> I want to share with you a @mixin i created, <br> inspired by TailwindCSS and styled-system.</p> <p><a href="https://github.com/MarcoPal/scss-system">https://github.com/MarcoPal/scss-system</a></p> <p>Here's an example<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s---fiIg-bj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sgl9m4k76msz6jbdedla.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s---fiIg-bj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sgl9m4k76msz6jbdedla.png" alt="Alt Text"></a></p> <p>And this is the output<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--68PbZnqw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jxagik4o0lfjhbrn4p8y.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--68PbZnqw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jxagik4o0lfjhbrn4p8y.png" alt="Alt Text"></a></p> <p>The only requirement is a $breakpoint list or map.</p> <p>Check out the repo to <a href="https://github.com/MarcoPal/scss-system">learn more</a></p> css scss sass webdev