SASS Snippets

by sublimebrasil ST2/ST3

Sass Snippets for Sublime

Details

Version 1.0.0
Homepage github.com
Issues github.com
Modified 5 years ago
Last Seen 35 minutes ago
First Seen 6 years ago

Installs

Total 102K
Win 56K
OS X 34K
Linux 13K

	Jun 25	Jun 24	Jun 23	Jun 22	Jun 21	Jun 20	Jun 19	Jun 18	Jun 17	Jun 16	Jun 15	Jun 14	Jun 13	Jun 12	Jun 11	Jun 10	Jun 9	Jun 8	Jun 7	Jun 6	Jun 5	Jun 4	Jun 3	Jun 2	Jun 1	May 31	May 30	May 29	May 28	May 27	May 26	May 25	May 24	May 23	May 22	May 21	May 20	May 19	May 18	May 17	May 16	May 15	May 14	May 13	May 12	May 11
Windows	15	27	23	21	38	41	41	33	24	14	33	47	48	40	48	38	21	48	12	38	37	67	21	21	38	42	47	26	43	35	36	44	46	36	40	37	24	24	45	38	43	52	52	28	44	45
OS X	6	4	4	10	17	11	12	13	9	7	12	16	10	15	13	9	12	8	12	11	16	10	4	7	18	11	15	16	19	9	13	14	9	11	18	19	8	9	16	11	15	22	14	8	7	10
Linux	1	5	4	6	8	5	5	6	3	5	6	6	7	5	6	4	7	8	8	3	4	11	3	5	7	3	2	6	10	6	4	5	8	8	4	6	6	7	9	10	6	13	4	7	6	4

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