ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

SCSS Snippets Complete

by onhernandes ST2/ST3

Complete SASS/SCSS snippets for Sublime Text 3 :pushpin:

Labels snippets

Details

Installs

  • Total 15K
  • Win 9K
  • OS X 4K
  • Linux 2K
Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6 Apr 5 Apr 4 Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10
Windows 5 9 15 5 5 9 10 10 16 9 6 7 12 15 8 12 9 9 3 11 8 9 8 15 3 11 8 10 8 6 18 6 7 8 12 21 23 18 3 6 5 12 11 21 7 5
OS X 5 2 1 0 0 1 2 3 5 4 1 2 7 5 5 2 0 4 4 4 4 0 3 2 3 1 6 3 3 2 1 2 2 6 3 5 2 5 0 1 4 2 8 4 5 3
Linux 1 3 0 2 1 4 1 1 0 1 0 1 1 3 4 1 0 2 0 0 4 0 5 2 1 1 2 0 1 4 1 1 1 2 1 2 2 2 3 0 2 1 3 2 2 1

Readme

Source
raw.​githubusercontent.​com

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