Skip to content

Instantly share code, notes, and snippets.

@JoeCianflone

JoeCianflone/input.scss

Created November 4, 2020 14:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JoeCianflone/2f260f48fb21b14c536ad89b12b264c3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JoeCianflone/2f260f48fb21b14c536ad89b12b264c3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
$mq: (
'xs': #{'min-width: 480px'},
'sm': #{'min-width: 576px'},
'md': #{'min-width: 768px'},
'wd': #{'min-width: 900px'},
'xw': #{'min-width: 1024px'},
'lg': #{'min-width: 1280px'},
'xl': #{'min-width: 1366px'},
);
@mixin at-size($size) {
&\:#{$size} {
@content;
}
}
@mixin with-queries ($parent: &) {
$first: true;
@if ($first == true) {
@content;
$first: false;
}
@each $key, $value in $mq {
$name: str-slice(#{$parent}, 2);
@media ($value) {
@at-root {
.#{$key}\:\:#{$name} { @content; }
}
}
}
}
@mixin xsmall($parent: &) {
@include at-size('xsmall') { @content; }
}
@mixin button {
color: red;
font-size: 18px;
}
.button {
@include with-queries {
@include button;
@include xsmall {
@include button;
font-size: 10px;
}
}
}
.button--secondary {
@include with-queries {
@include button;
@include xsmall {
@include button;
font-size: 10px;
}
}
}
Raw
output.css
.button {
color: red;
font-size: 18px;
}
.button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
@media (min-width: 480px) {
.xs\:\:button {
color: red;
font-size: 18px;
}
.xs\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 576px) {
.sm\:\:button {
color: red;
font-size: 18px;
}
.sm\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 768px) {
.md\:\:button {
color: red;
font-size: 18px;
}
.md\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 900px) {
.wd\:\:button {
color: red;
font-size: 18px;
}
.wd\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 1024px) {
.xw\:\:button {
color: red;
font-size: 18px;
}
.xw\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 1280px) {
.lg\:\:button {
color: red;
font-size: 18px;
}
.lg\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 1366px) {
.xl\:\:button {
color: red;
font-size: 18px;
}
.xl\:\:button\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
.button--secondary {
color: red;
font-size: 18px;
}
.button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
@media (min-width: 480px) {
.xs\:\:button--secondary {
color: red;
font-size: 18px;
}
.xs\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 576px) {
.sm\:\:button--secondary {
color: red;
font-size: 18px;
}
.sm\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 768px) {
.md\:\:button--secondary {
color: red;
font-size: 18px;
}
.md\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 900px) {
.wd\:\:button--secondary {
color: red;
font-size: 18px;
}
.wd\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 1024px) {
.xw\:\:button--secondary {
color: red;
font-size: 18px;
}
.xw\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 1280px) {
.lg\:\:button--secondary {
color: red;
font-size: 18px;
}
.lg\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
@media (min-width: 1366px) {
.xl\:\:button--secondary {
color: red;
font-size: 18px;
}
.xl\:\:button--secondary\:xsmall {
color: red;
font-size: 18px;
font-size: 10px;
}
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment