Complete SASS/SCSS snippets for Sublime Text 3 📌
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
abs.sublime-snippet
adjust-color.sublime-snippet
adjust-hue.sublime-snippet
alpha.sublime-snippet
append.sublime-snippet
at-root.sublime-snippet
blue.sublime-snippet
call.sublime-snippet
ceil.sublime-snippet
change-color.sublime-snippet
comparable.sublime-snippet
complement.sublime-snippet
darken.sublime-snippet
debug.sublime-snippet
default.sublime-snippet
desaturate.sublime-snippet
each.sublime-snippet
error.sublime-snippet
extend.sublime-snippet
fade-in.sublime-snippet
fade-out.sublime-snippet
feature-exists.sublime-snippet
floor.sublime-snippet
for.sublime-snippet
function-exists.sublime-snippet
function.sublime-snippet
global-variable-exists.sublime-snippet
grayscale.sublime-snippet
green.sublime-snippet
hsl.sublime-snippet
hsla.sublime-snippet
hue.sublime-snippet
ie-hex-str.sublime-snippet
if-else.sublime-snippet
if-misc.sublime-snippet
if.sublime-snippet
import.sublime-snippet
include.sublime-snippet
index.sublime-snippet
inspect.sublime-snippet
invert.sublime-snippet
is-superselector.sublime-snippet
join.sublime-snippet
keywords.sublime-snippet
length.sublime-snippet
lighten.sublime-snippet
lightness.sublime-snippet
list-separator.sublime-snippet
map-get.sublime-snippet
map-has-key.sublime-snippet
map-keys.sublime-snippet
map-merge.sublime-snippet
map-remove.sublime-snippet
map-values.sublime-snippet
max.sublime-snippet
min.sublime-snippet
mix.sublime-snippet
mixin-exists.sublime-snippet
mixin.sublime-snippet
nth.sublime-snippet
opacify.sublime-snippet
opacity.sublime-snippet
package.json
percentage.sublime-snippet
quote.sublime-snippet
random.sublime-snippet
red.sublime-snippet
rgb.sublime-snippet
rgba.sublime-snippet
round.sublime-snippet
saturate.sublime-snippet
saturation.sublime-snippet
scale-color.sublime-snippet
selector-append.sublime-snippet
selector-extend.sublime-snippet
selector-nest.sublime-snippet
selector-parse.sublime-snippet
selector-replace.sublime-snippet
selector-unify.sublime-snippet
set-nth.sublime-snippet
simple-selectors.sublime-snippet
str-index.sublime-snippet
str-insert.sublime-snippet
str-length.sublime-snippet
str-slice.sublime-snippet
supported.md
to-lower-case.sublime-snippet
to-upper-case.sublime-snippet
transparentize.sublime-snippet
type-of.sublime-snippet
unique-id.sublime-snippet
unit.sublime-snippet
unitless.sublime-snippet
unquote.sublime-snippet
variable-default.sublime-snippet
variable-exists.sublime-snippet
variable-list.sublime-snippet
variable-map.sublime-snippet
variable.sublime-snippet
warn.sublime-snippet
while.sublime-snippet
zip.sublime-snippet

README.md

Complete SASS/SCSS Snippets!

Complete SASS/SCSS snippets for Sublime Text 3

Table of Content

Commom

[mix] mixin

// Name ${1:name}
// Desc
// Return
@mixin ${1:name}() {
	@content;
}

[fun] function

// Name ${1:name}
// Desc
// Return
@function ${1:name}() {
	@warn 'warn me';
	@return false;
}

[inc] include

@include ${1:mixin}();

[ext] extend

@extend .${1:elem};

[imp] import

@import '${1:this}';

[ea] each

@each ${1:key}, ${2:var} in $map[item1, item2, item3...] {
	.#{$key} {

	}
}

[for] for

@for ${1:i} from 1 through 3 {
	.item-#{$i} {
	
	}
}

[ife] if/elseif/else

@if something == true {

} @else if 0 < 1 {

} @else {

}

[if] if

if(${1:condition}, $if-true, $if-false) {
	
}

[wh] while

@while ${1:i} > 0 {
	.item-#{$i} {

	}
}

[wr] warn

@warn 'warning must be inside of function, do not forget this';

[er] error

@error 'fatal error';

[de] debug

@debug ${1:debug};

[$] variable

${1:var}: ${2:val};

[mp] variable as map

${1:map}: (
	item1: 0
);

[lt] variable as list

${1:map}: list1 list2 list3;

[vd] variable as default

${1:var}: ${2:val} !default;

[at] at-root

@at-root {
	 ${1:class} {  }
	 ${2:class2} {  }
}

Miscellaneous

[i] if

@if(${1:condition}, $if-true, $if-false)

[ui] unique-id

unique-id()

Introspection

[fe] feature-exists

feature-exists(${1:feature})

[ve] variable-exists

variable-exists(${1:variable})

[ge] global-variable-exists

global-variable-exists(${1:variable})

[fne] function-exists

function-exists(${1:function})

[me] mixin-exists

mixin-exists(${1:mixin})

[ins] inspect

inspect(${1:value})

[ty] type-of

type-of(${1:value})

[un] unit

unit(${1:number})

[unl] unitless

unitless(${1:number})

[cp] comparable

comparable(${1:number1}, ${2:number2})

[ca] call

call(${1:name}, ${2:args})

Selector

[sn] selector-nest

selector-nest(${1:selectors})

[sa] selector-append

selector-append(${1:selectors})

[se] selector-extend

selector-extend(${1:selector}, ${2:extendee}, ${3:extender})

[sp] selector-parse

selector-parse(${1:selector})

[sr] selector-replace

selector-replace(${1:selector}, ${2:original}, ${3:replacement})

[su] selector-unify

selector-unify(${1:selector1}, ${2:selector2})

[is] is-superselector

is-superselector(${1:super}, ${2:sub})

[ss] simple-selectors

simple-selectors(${1:selector})

Number

[pr] percentage

percentage(${1:number})

[ro] round

round(${1:number})

[ce] ceil

ceil(${1:number})

[fl] floor

floor(${1:number})

[ab] abs

abs(${1:number})

[mi] min

min(${1:number})

[ma] max

max(${1:number})

[rd] random

random(${1:limit})

Maps

[mk] map-has-key

map-has-key(${1:map}, ${2:key})

[mk] map-keys

map-keys(${1:map})

[mv] map-values

map-values(${1:map})

[mg] map-get

map-get(${1:map}, ${2:key})

[mmg] map-merge

map-merge(${1:map1}, ${2:map2})

[mr] map-remove

map-remove(${1:map}, ${1:keys})

[key] keywords

keywords(${1:args})

List

[ln] length

length(${1:list})

[nth] nth

nth(${1:list}, ${2:n})

[stn] set-nth

set-nth(${1:list}, ${2:n}, ${3:value})

[jo] join

join(${1:list}, ${2:list2}, ${3:separator})

[ap] append

append(${1:list}, ${2:val}, ${3:separator})

[zip] zip

zip(${1:lists})

[in] index

index(${1:list}, ${2:val})

[ls] list-separator

list-separator(${1:separator})

RGB

[rgb] rgb

rgb(${1:red}, ${2:green}, ${3:blue})

[rgba] rgba

rgba(${1:red}, ${2:green}, ${3:blue}, ${4:alpha})

[red] red

red(${1:color})

[gr] green

green(${1:color})

[bl] blue

blue(${1:color})

[mix] mix

mix(${1:color}, ${2:color2}, ${3:weight})

HSL

[hsl] hsl

hsl(${1:hue}, ${2:saturation}, ${3:lightness})

[hsla] hsla

hsla(${1:hue}, ${2:saturation}, ${3:lightness}, ${4:alpha})

[hue] hue

hue(${1:color})

[st] saturation

saturation(${1:color})

[lgt] lightness

lightness(${1:color})

[dk] darken

darken(${1:color}, ${2:amount})

[lg] lighten

lighten(${1:color}, ${2:amount})

[ah] adjust-hue

adjust-hue(${1:color}, ${2:degrees})

[ste] saturate

saturate(${1:color}, ${2:amount})

[dst] desaturate

desaturate(${1:color}, ${2:amount})

[grs] grayscale

grayscale(${1:color})

[cpm] complement

complement(${1:color})

[iv] invert

invert(${1:color})

Others

[ac] adjust-color

adjust-color(${1:color}, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])

[sc] scale-color

scale-color(${1:color}, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])

[cc] change-color

change-color(${1:color}, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])

[ih] ie-hex-str

ie-hex-str(${1:color})

Opacity

[al] alpha

alpha(${1:color})

[op] opacify

opacify(${1:color}, ${2:amount})

[tr] transparentize

transparentize(${1:color}, ${2:amount})

Strings

[uq] unquote

unquote(${1:string})

[qt] quote

quote(${1:string})

[stl] str-length

str-length(${1:string})

[sti] str-insert

str-insert(${1:string}, ${2:insert}, ${3:index})

[stx] str-index

str-index(${1:string}, ${2:substring})

[sts] str-slice

str-slice(${1:string}, ${2:start}, ${3:end})

[tu] to-upper-case

to-upper-case(${1:string})

[tl] to-lower-case

to-lower-case(${1:string})

Contributing

  1. Fork
  2. Create your own branch git checkout -b new-snippet
  3. Add and commit git add -A && commit -m 'add new-snippet'
  4. Push git push origin new-feature
  5. Submit a Pull Request

License

MIT license