Skip to content

Instantly share code, notes, and snippets.

@Grawl

Grawl/sass-order.md

Last active December 21, 2017 03:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Grawl/cd5e0c75591611c3de7cf37a6f60c73d to your computer and use it in GitHub Desktop.
Save Grawl/cd5e0c75591611c3de7cf37a6f60c73d to your computer and use it in GitHub Desktop.
Download ZIP
Sass order
Raw
sass-order.md
  1. @extends
    • @extends %placeholder
    • @extends .className
  2. $variables
  3. @media
    • @media (max-width: 1400px)
    • +breakpoint(medium)
    • @media (max-width: 768px)
  4. @at-root
    • @at-root :root &
    • @at-root .is-active &
  5. @include mixin
  6. property: value
    1. specific behaviours
      • cursor
      • visibility
      • etc
    2. flow
      1. display
      2. float
      3. width, height
      4. margin
      5. padding
    3. typography
      • font-size
      • color
      • rendering
    4. styling
      • background
      • filter
      • clip-path
      • border-radius
  7. &[attributes]
    • &[disabled]
    • &[tabindex=0]
  8. &:pseudo-classes
    • :hover
    • :focus
  9. &::pseudo-elements
    1. &::before
    2. &::after
    3. &::placeholder
  10. &_modificators
    • &_tiny
    • &_loud
  11. &-childs
    • &-element
    • &-icon
  12. childs
    • .className
    • input[type=number]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment