SASS Snippets

by sublimebrasil ALL

Sass Snippets for Sublime

Details

Version 1.0.0
Homepage github.com
Issues github.com
Modified 11 years ago
Last Seen 3 hours ago
First Seen 12 years ago

Installs

Total 127K
Win 73K
Mac 38K
Linux 16K

	Dec 21	Dec 20	Dec 19	Dec 18	Dec 17	Dec 16	Dec 15	Dec 14	Dec 13	Dec 12	Dec 11	Dec 10	Dec 9	Dec 8	Dec 7	Dec 6	Dec 5	Dec 4	Dec 3	Dec 2	Dec 1	Nov 30	Nov 29	Nov 28	Nov 27	Nov 26	Nov 25	Nov 24	Nov 23	Nov 22	Nov 21	Nov 20	Nov 19	Nov 18	Nov 17	Nov 16	Nov 15	Nov 14	Nov 13	Nov 12	Nov 11	Nov 10	Nov 9	Nov 8	Nov 7	Nov 6
Windows	0	0	1	1	0	1	0	0	0	1	1	0	2	1	0	1	1	0	0	2	0	0	1	0	0	0	0	0	0	2	3	0	2	0	0	0	0	0	0	1	2	1	0	3	2	1
Mac	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	1	1	2	0	0
Linux	0	1	0	2	0	0	0	0	1	1	0	0	0	0	1	0	2	1	0	0	0	1	0	0	0	0	0	0	1	0	0	0	1	0	2	0	0	0	0	0	2	0	0	0	0	0

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