Skip to content

Instantly share code, notes, and snippets.

@raorao
Last active September 4, 2015 20:00
Show Gist options
  • Save raorao/7a05f766b97b9880f281 to your computer and use it in GitHub Desktop.
Save raorao/7a05f766b97b9880f281 to your computer and use it in GitHub Desktop.
how I used to write sass --> how i write it now.
// how I used to write sass!
// -----------------------
// its short, sure, but short doesn't necessarily mean simple. Its very difficult for me
// to tell how a given element gets its styles -- element-1 is getting inherited styles
// from its container, and then has two different explicit selectors. At scale,
// its even harder to tell what overrides what, and file ordering begins to actually
// matter. Whenever I see code like this now, I refactor it asap -- before
// it gets too unwieldy and brittle to change.
.container-element
font: 15px verdana
color: $text-blue
@include clearfix
.element-1, .element-2, .element-3
border-color: $border-red
border-width: 4px
padding: 32px
.element-1
border-color: $border-black
.element-2
background-color: $black
color: $text-grey
// how I write sass now!
// ---------------------
// its longer, sure, and will take milliseconds longer to load as the compiled
// css will include a fair amount of duplication. But IMO I have a much better sense
// where my styles are coming from, and how each element is styled. If I need to override
// styles, I can do it within a selector, and not worry about specificity at all.
// the process of modularizing my css into helpers (and potentially into more
// complicated abstractions) tends to reveal other forms of duplication, which
// in the long run seems to make my css files shorter.
=callout-styling
font: 15px verdana
color: $text-blue
border-color: $border-red
border-width: 4px
=three-columns
float: left
margin-right: 15px
padding: 32px
&:last-child
margin-right: 0
=contained-element
+three-columns
+callout-element
.container-element
@include clearfix
.contained-element-1
+contained-element
border-color: $border-black
.contained-element-2
+contained-element
background-color: $black
color: $text-grey
.contained-element-3
+contained-element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment