SASS Snippets

by sublimebrasil ST2/ST3

Sass Snippets for Sublime

Details

Version 1.0.0
Homepage github.com
Issues github.com
Modified 4 years ago
Last Seen 3 hours ago
First Seen 5 years ago

Installs

Total 88K
Win 46K
OS X 30K
Linux 11K

	Sep 19	Sep 18	Sep 17	Sep 16	Sep 15	Sep 14	Sep 13	Sep 12	Sep 11	Sep 10	Sep 9	Sep 8	Sep 7	Sep 6	Sep 5	Sep 4	Sep 3	Sep 2	Sep 1	Aug 31	Aug 30	Aug 29	Aug 28	Aug 27	Aug 26	Aug 25	Aug 24	Aug 23	Aug 22	Aug 21	Aug 20	Aug 19	Aug 18	Aug 17	Aug 16	Aug 15	Aug 14	Aug 13	Aug 12	Aug 11	Aug 10	Aug 9	Aug 8	Aug 7	Aug 6	Aug 5
Windows	39	48	25	34	41	60	55	40	29	35	23	37	52	50	50	46	25	18	26	38	59	25	48	26	27	35	58	52	52	39	21	25	46	43	41	37	57	23	24	43	31	44	42	51	21	25
OS X	21	26	10	14	28	26	25	18	10	9	10	18	19	28	23	18	10	8	18	18	12	10	15	5	17	15	14	23	16	14	9	11	21	12	18	13	16	6	10	27	17	9	24	16	12	13
Linux	7	7	8	5	9	9	8	4	3	6	5	7	9	9	7	5	2	5	8	6	12	6	11	6	4	10	6	6	13	8	3	5	12	12	6	6	9	6	1	5	5	14	9	5	4	8

Readme

Source: raw.githubusercontent.com

Sass Snippets for Sublime

Instruções em português

We thank @mrmartineau for kindly providing replacement plugin and @FichteFoll for the support.

Install

To install through Package Control, search for SASS Snippets.

Instead, you can download the package and put it manually inside your Packages directory. Remember that should work but will not update automatically.

Note: we recommend the “Syntax Highlighting for Sass” plugin for syntax highlight.

Directives

[content] @content

@content

[debug] @debug

@debug $0;

[each] @each

@each ${1:var} in ${2:item1, item2, item3} {
    .#{$1}$3 {
        $4
    }
}$0

[extend] @extend

@extend $0;

[for] @for

@for $i from ${1:1} through ${2:10} {
    $3
}$0

[function] @function

@function $1($3) {
    $4
    @return $5;
}$0

[if] @if @else @if

@if ${1:something} ${2:==} ${3:true/false} {
    $4
} @else if {
    $5
}${6: @else {
    $7
\}}$0

@if ${1:something} ${2:==} ${3:true/false} {
    $4
} @else {
    $5
}$0

@if ${1:something} ${2:==} ${3:true/false} {
    $4
}$0

[import] @import

@import "$0";

[include] @include

@include $0;

with Sass syntax

+$0;

[mixin] @mixin

@mixin $1($2) {
    $3
}$0

with Sass syntax

=$0;

[return] @return

@return $0;

[warn] @warn

@warn $0;

[while] @while

$i: ${1};
@while $i > ${2} {
    .#{$i} $3 {
        $4
    }
}$0

[font] @font-face

@font-face {
    font-family:$1;
    src:url($2);$0
}

Flags

[default] !default

!default

[optional] !optional

!optional

Functions

Color

[rgb] rgb()

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

[rgba] rgba()

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

[rgba-short] rgba()

rgba(${1:$color}, ${3:$alpha})

[red] red()

red(${1:$color})

[green] green()

green(${1:$color})

[blue] blue()

blue(${1:$color})

[mix] mix()

mix(${1:$color1}, ${2:$color2}, ${3:$weight:50%})

[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})

[saturation] saturation()

saturation(${1:$color})

[lightness] lightness()

lightness(${1:$color})

[adjust-hue] adjust-hue()

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

[lighten] lighten()

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

[darken] darken()

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

[saturate] saturate()

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

[desaturate] desaturate()

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

[grayscale] grayscale()

grayscale(${1:$color})

[complement] complement()

complement(${1:$color})

[invert] invert()

invert(${1:$color})

[opacity] opacity() / [alpha] alpha()

alpha(${1:$color})

opacity(${1:$color})

[opacify] opacify() / [fade-in] fade-in()

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

fade-in(${1:$color}, ${2:$amount})

[transparentize] transparentize() / [fade-out] fade-out()

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

fade-out(${1:$color}, ${2:$amount})

[adjust-color] adjust-color()

adjust-color(${1:$color}, ${2:[$red]}, ${3:[$green]}, ${4:[$blue]}, ${5:[$hue]}, ${6:[$saturation]}, ${7:[$lightness]}, ${7:[$alpha]})

[scale-color] scale-color()

scale-color(${1:$color}, ${2:[$red]}, ${3:[$green]}, ${4:[$blue]}, ${6:[$saturation]}, ${7:[$lightness]}, ${7:[$alpha]})

[change-color] change-color()

change-color(${1:$color}, ${2:[$red]}, ${3:[$green]}, ${4:[$blue]}, ${5:[$hue]}, ${6:[$saturation]}, ${7:[$lightness]}, ${7:[$alpha]})

[ie-hex-str] ie-hex-str()

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

Number

[abs] abs()

abs(${1:$value})

[ceil] ceil()

ceil(${1:$value})

[floor] floor()

floor(${1:$value})

[max] max()

max(${1:$numbers...})

[min] min()

min(${1:$numbers...})

[percentage] percentage()

percentage(${1:$value})

[round] round()

round(${1:$value})

String

[quote] quote()

quote(${1:string})

[unquote] unquote()

unquote(${1:string})

List

[append] append()

append(${1:$list}, ${2:$value}, ${3:[auto/comma/space]})

[index] index()

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

[join] join()

join(${1:$list1}, ${2:$list2}, ${3:[auto/comma/space]})

[length] length()

length(${1:$list})

[nth] nth()

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

[zip] zip()

zip(${1:$lists...})

Introspection

[comparable] comparable()

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

[type-of] type-of()

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

[unit] unit()

unit(${1:$number})

[unitless] unitless()

unitless(${1:$number})

Miscellaneous

[if] if()

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

Legacy

[counter] counter()

counter(${1:$args...})

[counters] counters()

counters(${1:$args...})

CSS Extensions

[placeholder] @placeholder

%$1 {
    $2
}$0

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request