Bartosz Walicki Bartosz Walicki - 3 months ago 19
Sass (Sass) Question

Atom snippets not working with scss multiline snippet

I am trying to get working my custom snippets in Atom editor. This is my snippets.cson file:

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
# 'Console log':
# 'prefix': 'log'
# 'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson
'.text.html.basic':
'Bootstrap css link':
'prefix': 'bootstrap'
'body': '<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">$1'

'Vue minified':
'prefix': 'vuemin'
'body': '<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>$1'

'Vue develompent':
'prefix': 'vuedev'
'body': '<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>$1'

'Placehold img':
'prefix': 'ph'
'body': '<img src="https://placehold.it/$1" alt="">'
'Telephone':
'prefix': 'tel'
'body': '<a href="tel:+48888888888$1">+48 888 888 888</a>'

'.source.css.scss':
'Breakpoint Foundation':
'prefix': 'bp'
'body': """
@include breakpoint($1) {
$2
}
"""

'.source.css.scss':
'Breakpoint Foundation Medium':
'prefix': 'bpm'
'body': """
@include breakpoint(medium) {
$1
}
"""

'.source.css.scss':
'Breakpoint Foundation Large':
'prefix': 'bpl'
'body': """
@include breakpoint(large) {
$1
}
"""

'Kentico comment':
'prefix': 'kc'
'body': '/*#$1#*/'


Everything works ok except this part:

'.source.css.scss':
'Breakpoint Foundation':
'prefix': 'bp'
'body': """
@include breakpoint($1) {
$2
}
"""

'.source.css.scss':
'Breakpoint Foundation Medium':
'prefix': 'bpm'
'body': """
@include breakpoint(medium) {
$1
}
"""

'.source.css.scss':
'Breakpoint Foundation Large':
'prefix': 'bpl'
'body': """
@include breakpoint(large) {
$1
}
"""


When I editing scss file, only
bpl
and
kc
snippet is working.
I have 1.10.0 Atom with 1.11.0 autocomplete-snippets and 1.0.2 snippets plugins.

Answer

You need to group all snippets that share the same scope, otherwise previous instances get overwritten by later ones.

Example:

'.source.css.scss':
  'Breakpoint Foundation':
    'prefix': 'bp'
    'body': """
      @include breakpoint($1) {
        $2
      }
    """
  'Breakpoint Foundation Medium':
    'prefix': 'bpm'
    'body': """
      @include breakpoint(medium) {
        $1
      }
    """
  'Breakpoint Foundation Large':
    'prefix': 'bpl'
    'body': """
      @include breakpoint(large) {
        $1
      }
    """

One might argue that Atom should merge these keys, but that bears discussion with the developers.

Comments