Skip to content

Instantly share code, notes, and snippets.

@entozoon
Last active August 29, 2015 14:13
Show Gist options
  • Save entozoon/25324cf51b1f9b586024 to your computer and use it in GitHub Desktop.
Save entozoon/25324cf51b1f9b586024 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
.cup {
$cup-colour: #0000ff; // variables have scope!
color: $cup-colour;
&__milk { // __ describes an element contained within it's parent
liquid: milk;
calcium: 10g;
&--chocolate { // -- describes a modification from the parent
flavour: chocolate;
/* only the things that make it different from .cup__milk */
}
&__straw {
color: $cup-colour;
}
}
}
// Comments written like this will not be visible in the compiled CSS
// even when non-minified, which is pretty useful if you ask me
.standard_css_stuff {
/* You can literally just write normal oldschool CSS
in your .sass files and it'll work just fine!*/
}
.canItDoMaths_fuckYesItCan {
width: 30px * 2;
$margin: 100px;
margin-left: $margin - 10px;
}
.these {
.items {
.are {
.nested {
color: blue;
}
.together {
color: red;
}
}
}
}
/* Advanced stuff for future reference, don't worry about these though */
// You can use & in clever ways ..
h1 {
&, a {
color: white;
}
}
.listing {
& + & {
margin-left: 10px;
}
.footer & {
background: green;
}
}
// You can extend classes ..
.milk { color: white; }
.yoghurt {
@extend .milk;
thickness: gloopy;
}
.cup {
color: #0000ff;
}
.cup__milk {
liquid: milk;
calcium: 10g;
}
.cup__milk--chocolate {
flavour: chocolate;
/* only the things that make it different from .cup__milk */
}
.cup__milk__straw {
color: #0000ff;
}
.standard_css_stuff {
/* You can literally just write normal oldschool CSS
in your .sass files and it'll work just fine!*/
}
.canItDoMaths_fuckYesItCan {
width: 60px;
margin-left: 90px;
}
.these .items .are .nested {
color: blue;
}
.these .items .are .together {
color: red;
}
/* Advanced stuff for future reference, don't worry about these though */
h1, h1 a {
color: white;
}
.listing + .listing {
margin-left: 10px;
}
.footer .listing {
background: green;
}
.milk, .yoghurt {
color: white;
}
.yoghurt {
thickness: gloopy;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment