ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

SASS Snippets

by sublimebrasil ALL

Sass Snippets for Sublime

Labels snippets

Details

  • 1.0.0
  • github.​com
  • github.​com
  • 11 years ago
  • 28 minutes ago
  • 12 years ago

Installs

  • Total 127K
  • Win 73K
  • Mac 38K
  • Linux 16K
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 Aug 4 Aug 3 Aug 2
Windows 1 0 2 2 0 2 1 1 1 0 0 0 0 0 1 0 0 2 0 1 0 0 0 1 2 1 0 0 1 1 1 1 1 0 0 0 0 1 1 4 0 1 0 2 1 1
Mac 0 0 1 0 0 0 0 0 1 0 1 0 0 0 1 0 0 1 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0 1 1 1 0 0 0
Linux 0 1 0 0 2 1 0 0 0 0 0 0 1 0 1 0 3 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 1 0 0 0 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.

List of Snippets

Directives

[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

or

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

or

@if ${1:something} ${2:==} ${3:true/false} {
    $4
}$0
[import] @import
@import "$0";
[include] @include

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

or

opacity(${1:$color})
[opacify] opacify() / [fade-in] fade-in()
opacify(${1:$color}, ${2:$amount})

or

fade-in(${1:$color}, ${2:$amount})
[transparentize] transparentize() / [fade-out] fade-out()
transparentize(${1:$color}, ${2:$amount})

or

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

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

License

MIT License © Sublime Brasil