Skip to content

Instantly share code, notes, and snippets.

@lcherone

lcherone/input.scss

Last active July 8, 2021 18:29
Show Gist options
  • Save lcherone/55dd5c81fa2c9785ccc53b2fe34ebfa2 to your computer and use it in GitHub Desktop.
Save lcherone/55dd5c81fa2c9785ccc53b2fe34ebfa2 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
.nav {
nav-prop: 1;
.parent-class {
parent-prop: 1;
&.sibling-class {
grand-child-prop: 1;
.grand-child-class {
child-prop: 1;
}
}
.child-class {
grand-child-prop: 1;
.grand-child-class {
child-prop: 1;
}
}
}
.second-parent-class {
parent-prop: 1;
&.second-sibling-class {
grand-child-prop: 1;
.grand-child-class {
child-prop: 1;
}
}
.second-child-class {
child-prop: 1;
.second-grand-child-class {
second-grand-child-prop: 1;
}
}
}
}
Raw
output.css
.nav {
nav-prop: 1;
}
.nav .parent-class {
parent-prop: 1;
}
.nav .parent-class.sibling-class {
grand-child-prop: 1;
}
.nav .parent-class.sibling-class .grand-child-class {
child-prop: 1;
}
.nav .parent-class .child-class {
grand-child-prop: 1;
}
.nav .parent-class .child-class .grand-child-class {
child-prop: 1;
}
.nav .second-parent-class {
parent-prop: 1;
}
.nav .second-parent-class.second-sibling-class {
grand-child-prop: 1;
}
.nav .second-parent-class.second-sibling-class .grand-child-class {
child-prop: 1;
}
.nav .second-parent-class .second-child-class {
child-prop: 1;
}
.nav .second-parent-class .second-child-class .second-grand-child-class {
second-grand-child-prop: 1;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"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