Some editor tricks to make Atom easier to theme Semantic UI in

semantic-ui-less-atom.md

Using Atom with Semantic UI

I've been using Atom with Semantic UI and found some tweaks to be helpful when theming.

Getting the syntax for .variables and .overrides to default to LESS

1. Install the file-types package

2. Open the config folder and edit the config.cson file

3. Add a value in alphabetical order for "file-types", unless it's there already.

  "file-types":
    variables: "source.css.less"
    overrides: "source.css.less"

4. Restart Atom and see that files ending in .variables and .overrides default to LESS syntax.

Seeing at a glance what colors variables are

1. Install the pigments package

2. Open the config folder and edit the config.cson file

3. Add a value in alphabetical order for "pigments", unless it's there already.

  pigments:
    autocompleteScopes: [
      ".source.css"
      ".source.css.less"
      ".source.sass"
      ".source.css.scss"
      ".source.stylus"
      ".source.variables"
    ]
    autocompleteSuggestionsFromValue: true
    extendAutocompleteToColorValue: true
    extendAutocompleteToVariables: true
    extendedSearchNames: [
      "**/*.css"
      "**/*.variables"
    ]
    filetypesForColorWords: [
      "css"
      "less"
      "styl"
      "stylus"
      "sass"
      "scss"
      "variables"
    ]
    sourceNames: [
      "**/*.css"
      "**/*.styl"
      "**/*.stylus"
      "**/*.less"
      "**/*.sass"
      "**/*.scss"
      "**/*.variables"
      "**/*.overrides"
    ]

4. Restart Atom and see that your colors are previewable in the editor. 🎉