Sublime Text SASS Snippets

Type the snippet shortcode and then press Tab to complete the snippet.

The snippets are listed below in alphabetical order. The '$1' indicates the initial position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little tricky to explain, but any snippet that has a $1/$2/$3/etc. uses this technique.

Feel free to play with, alter, expand, or ruin these snippets as you please. I only ask that if you come up with an incredibly handy snippet, or simply one that I have missed, that you let me know (via email, Twitter, GitHub or as a comment on the original [blog post][1]) so that I can improve these for everybody. Thanks! [1]: http://joshnh.com/2012/02/a-collection-of-css-snippets-for-sublime-text-2/ "The original blog post."

---

`

That's a backtick in case you were unsure (it's on the same key as the tilde (~), directly above Tab).

/* $1 **************************************************/

abs

position: absolute

act

$1:active {
    $2
}

aft

$1:after
    content: ''
    $2

amp

Wrap ampersand with to make them look sexy.

.amp
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif
    font-style: italic
    font-weight: normal

ani

Animation shorthand: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction.

animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate}

aut

margin: ${1:0} auto

bac

background: ${1:#fff} url('$2') ${3:0} ${4:0} ${5:repeat|repeat-x|repeat-y|no-repeat|inherit|round|space}

bef

$1:before
    content: ''
    $2

blo

display: block

bol

font-weight: bold

bor

border-radius: $1

bot

bottom: ${1:0}

box

box-sizing: border-box

cen

text-align: center

cf

You should look at using inline-block for layouts instead of floats.

.cf:after,
.cf:before
    content: ''
    display: table
.cf:after
    clear: both
.cf
    zoom: 1

con

content: '$1'

cur

cursor: ${1:auto|crosshair|default|pointer|move|e-resize|ne-resize|-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress}

fil

animation-fill-mode: ${1:none|forwards|backwards|both}

fir

$1:first-child
    $2

fix

position: fixed

fon

You don't need to declare a value for the line-height unless using pixels (1.5 is the same as 1.5em or 150%).

font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif}

gra It's a good idea to define a background color, and use alpha transparency with your gradients, that way you only need to alter a single value if you want to change the color of the background.

background-image: linear-gradient($1)

hid

overflow: hidden

hov

It is good (for accessibility reasons) to use the focus pseudo-class alongside the hover pseudo-class when defining styles for anchors, there is no need for :focus in most other cases.

$1:hover,
$1:focus
    $2

h

My preference over rgba(), and I have written [an article][2] explaining why [2]: http://joshnh.com/2011/09/hsla-are-you-using-it-here-is-why-i-think-you-should-be/ "HSLA and You"

hsla(${1:0},${2:0}%,${3:0}%,${4:1})

hyp

hyphens: auto

inl

Comment out the whitespace between elements in your markup if you need pixel perfect alignment (although pixel perfection is not realistic).

display: inline-block

ita

font-style: italic

key

This snippet makes good use of Sublime Text 2's multiple selection capabilites. If you lose the multiple selection, a quick way to regain it is to select 'keyframes', hit CMD+D (CTRL+D on Windows) four times, and then use the arrow keys to navigate. Continuing to tab will reduce the caret back down to a single selection, but you can also force it using ESC.

@keyframes $1
    0% { $2 }
    100% { $3 }

lef

left: ${1:0}

lin

line-height: ${1:1.5}

mar

margin: ${1:0}

med

When designing with a focus on responsiveness, using min-width is recommended (it means that smaller devices, such as mobiles, aren't applying styles that aren't being used).

@media (min-width: $1)
    $2

non

text-decoration: none

pad

padding: ${1:0}

pla

animation-play-state: ${1:running|paused}

r

My preference is hsla(), and I have written [an article][2] explaining why.

rgba(${1:0},${2:0},${3:0},${4:1})

rel

position: relative

rig

right: ${1:0}

san

font-family: ${1:<font-name>,} sans-serif

ser

font-family: ${1:<font-name>,} serif

sha

box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)}

t

transparent

tap

This overrides the highlight color on iPhones/iPads.

tap-highlight-color: ${1:hsla(0,0%,0%,.5)}

tex

Use wisely, please keep readability in mind.

text-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:hsla(0,0%,0%,.25)}

top

top: ${1:0}

transform

This is too complex to write out all options.

transform: $1

transition

Transition shorthand: transition-propery transition-duration transition-timing-function transition-delay. The default values are: all 0 ease 0, this means that if you want to apply a transition to all properties, using the ease timing-function, you only need to declare the duration (e.g. transition: .5s).

transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)}

upp

text-transform: uppercase

wra

For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the 'overflow-wrap' property. However this syntax non-conforming in author style sheets. (http://www.w3.org/TR/css3-text/#overflow-wrap)

overflow-wrap: break-word
    word-wrap: break-word