SASS Snippets

by sublimebrasil ALL

Sass Snippets for Sublime

Details

Version 1.0.0
Homepage github.com
Issues github.com
Modified 9 years ago
Last Seen 14 minutes ago
First Seen 10 years ago

Installs

Total 126K
Win 72K
Mac 38K
Linux 16K

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

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