Sass Snippets for Sublime
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css-extensions
directives
flags
functions
messages
.editorconfig
CHANGELOG.md
README.md
README_pt-BR.md
messages.json

README.md

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

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