SCSS Variable Completion in Sublime?

Question

Sass

Sublime doesn't do this out of the box for some reason..
Are there any plugins for this?

Answer 1

I have not come across such plugins, I myself use Emmet's snippets for this, very convenient. read here.

"snippets": {
    // "html": {
    //	"abbreviations": {
    //		"example": "<div class='example' title='Custom element example'>"
    //	}
    // }
    "css": {
      "abbreviations": {
        "mql": "@include breakpoint(${1:xlarge}) {\n\t|${2}\n}",
        "mq": "@include breakpoint(${1:large}) {\n\t|${2}\n}",
        "mqm": "@include breakpoint(${1:medium}) {\n\t|${2}\n}",
        "mqs": "@include breakpoint(${1:small only}) {\n\t|${2}\n}",
        "flex": "@include flex(${1:null}, ${2:null}, ${3:null}, ${4:null}, ${5:null});",
        "inc": "@include ${1};",
        "ext": "@extend ${1};",
        "clear": "@include clearfix;",
        "qqq": "&${1:-} {${2}}",
        "dn": "display: none;",
        "db": "display: block;",
        "df": "display: flex;",
        "di": "display: inline;",
        "dib": "display: inline-block;",
        "trans": "transition: \\$transition;",
        "colw": "color: \\$whitish;",
        "colb": "color: \\$blackish;",
        "colp": "color: \\$primary;",
        "cols": "color: \\$secondary;",
        "bgcw": "background-color: \\$whitish;",
        "bgcb": "background-color: \\$blackish;",
        "bgcpr": "background-color: \\$primary;",
        "bgcs": "background-color: \\$secondary;",
        "hover": "@include superhover {\n\t|${1}\n}",
      }
    },
  },

Answer 2

I did not find a plug-in with auto-cooking on the fly. But there is a good alternative. I use this plugin: List Stylesheet Variables . There you need to press hot keys, and a list of used variables will come out. Suitable for both Less and Scss.