SASS Snippets
Sass Snippets for Sublime
Labels snippets
Details
Installs
- Total 124K
- Win 71K
- Mac 38K
- Linux 15K
| 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 | Nov 5 | Nov 4 | Nov 3 | Nov 2 | Nov 1 | Oct 31 | Oct 30 | Oct 29 | Oct 28 | Oct 27 | Oct 26 | Oct 25 | Oct 24 | Oct 23 | Oct 22 | Oct 21 | Oct 20 | Oct 19 | Oct 18 | Oct 17 | Oct 16 | Oct 15 | Oct 14 | Oct 13 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Windows | 3 | 0 | 5 | 10 | 5 | 4 | 1 | 2 | 3 | 4 | 12 | 12 | 4 | 4 | 5 | 4 | 5 | 7 | 3 | 6 | 8 | 4 | 3 | 5 | 2 | 5 | 7 | 1 | 3 | 8 | 7 | 5 | 7 | 4 | 3 | 3 | 1 | 3 | 5 | 5 | 4 | 2 | 4 | 3 | 2 | 9 |
| Mac | 1 | 0 | 0 | 1 | 2 | 0 | 0 | 0 | 2 | 0 | 5 | 2 | 1 | 0 | 0 | 1 | 0 | 1 | 1 | 2 | 1 | 2 | 3 | 2 | 3 | 2 | 2 | 2 | 1 | 0 | 0 | 0 | 2 | 1 | 1 | 0 | 1 | 2 | 2 | 1 | 1 | 0 | 2 | 0 | 0 | 1 |
| Linux | 0 | 1 | 0 | 0 | 1 | 0 | 1 | 0 | 1 | 2 | 1 | 1 | 1 | 3 | 0 | 2 | 0 | 1 | 1 | 0 | 2 | 1 | 0 | 0 | 2 | 1 | 0 | 0 | 2 | 0 | 0 | 6 | 4 | 2 | 0 | 1 | 1 | 1 | 4 | 1 | 0 | 0 | 0 | 0 | 0 | 2 |
Readme
- Source
- raw.githubusercontent.com
Sass Snippets for Sublime
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
[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
- 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
License
MIT License © Sublime Brasil