SASS Snippets

by sublimebrasil ALL

Sass Snippets for Sublime

Details

Version 1.0.0
Homepage github.com
Issues github.com
Modified 12 years ago
Last Seen 4 hours ago
First Seen 13 years ago

Installs

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

	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	Aug 4	Aug 3	Aug 2	Aug 1	Jul 31	Jul 30	Jul 29	Jul 28	Jul 27	Jul 26	Jul 25	Jul 24	Jul 23	Jul 22	Jul 21	Jul 20	Jul 19	Jul 18	Jul 17	Jul 16	Jul 15	Jul 14	Jul 13	Jul 12	Jul 11	Jul 10	Jul 9	Jul 8	Jul 7	Jul 6
Windows	0	0	0	1	0	0	0	1	0	0	0	0	0	1	0	1	0	0	2	0	1	1	0	1	0	0	0	3	1	1	2	0	0	0	1	1	3	0	1	0	1	0	0	0	3	1
Mac	0	0	0	0	0	1	1	0	0	0	1	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	1	0	0	0	1	0	0	1	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	1	1	0	0	0	0	0	0	1	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