{"action":"closed","issue":{"url":"https://api.github.com/repos/postcss/postcss-simple-vars/issues/29","labels_url":"https://api.github.com/repos/postcss/postcss-simple-vars/issues/29/labels{/name}","comments_url":"https://api.github.com/repos/postcss/postcss-simple-vars/issues/29/comments","events_url":"https://api.github.com/repos/postcss/postcss-simple-vars/issues/29/events","html_url":"https://github.com/postcss/postcss-simple-vars/issues/29","id":106529470,"number":29,"title":"Using JS object for vars, referencing in CSS?","user":{"login":"benfrain","id":1318466,"avatar_url":"https://avatars.githubusercontent.com/u/1318466?v=3","gravatar_id":"","url":"https://api.github.com/users/benfrain","html_url":"https://github.com/benfrain","followers_url":"https://api.github.com/users/benfrain/followers","following_url":"https://api.github.com/users/benfrain/following{/other_user}","gists_url":"https://api.github.com/users/benfrain/gists{/gist_id}","starred_url":"https://api.github.com/users/benfrain/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benfrain/subscriptions","organizations_url":"https://api.github.com/users/benfrain/orgs","repos_url":"https://api.github.com/users/benfrain/repos","events_url":"https://api.github.com/users/benfrain/events{/privacy}","received_events_url":"https://api.github.com/users/benfrain/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-09-15T10:41:53Z","updated_at":"2015-09-15T17:09:53Z","closed_at":"2015-09-15T17:09:53Z","body":"I'm using Gulp and here is the relevant section of my gulpfile.js:\r\n\r\n```\r\nvar gulp = require(\"gulp\");\r\nvar changed = require('gulp-changed');\r\n\r\n//As we need to reference a single set of vars across multiple independently processed CSS files, we have created a JS for the CSS vars\r\nvar cssVariables = require('./preCSS/variables.js');\r\n\r\nvar sourceCSS = [\"preCSS/**/*.css\"];\r\nvar outputCSS = \"./\";\r\n\r\ngulp.task(\"styles\", function () {\r\n\r\n    //PostCSS related\r\n    var postcss = require(\"gulp-postcss\");\r\n    var autoprefixer = require(\"autoprefixer\");\r\n    var mixins = require(\"postcss-mixins\")({\r\n        mixins: {\r\n            FontHeadline: function () {\r\n                return {\r\n                    \"font-family\": cssVariables[\"$font-verdana\"],\r\n                    \"font-weight\": '400',\r\n\r\n                    '@media (max-device-width: 1024px)': {\r\n                        'font-family': cssVariables[\"$font-hv-bold\"],\r\n                        'font-weight': '700'\r\n                    },\r\n                    '@media (max-device-width: 2048px) and (min-resolution: 2dppx)': {\r\n                        'font-family': cssVariables[\"$font-hv-bold\"],\r\n                        'font-weight': '700'\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    });\r\n    var simpleVars = require(\"postcss-simple-vars\");\r\n    var nested = require(\"postcss-nested\");\r\n    //Utils\r\n    var gutil = require(\"gulp-util\");\r\n\r\n    var processors = [\r\n    postcssImport({ glob: true }), mixins, simpleVars({\r\n        variables: cssVariables\r\n    }), colorFunction(), nested, autoprefixer({ browsers: [\"last 2 version\", \"safari 5\", \"ie > 9\", \"opera 12.1\", \"ios 6\", \"android 2.3\"] })];\r\n\r\n    return gulp.src(sourceCSS)\r\n    // Only files that have changed are piped through\r\n    .pipe(changed(outputCSS))\r\n\r\n    // We always want PostCSS to run\r\n    .pipe(postcss(processors).on(\"error\", gutil.log))\r\n\r\n    // Set the destination for the CSS file\r\n    .pipe(gulp.dest(outputCSS));\r\n\r\n});\r\n```\r\n\r\nWithin my `preCSS/variables.js` I have my vars set up like this:\r\n\r\n```\r\nmodule.exports = {\r\n    \"$color-grey-47\": \"#474747\"\r\n}\r\n```\r\n\r\nNow, in my CSS files I have a rule like this:\r\n\r\n```\r\n.pm-Splash_TabsWrapper {\r\n    @mixin FontHeadline;\r\n    background-color: $color-grey-47;\r\n    height: $size-quadruple;\r\n    width: 100%;\r\n    display: flex;\r\n    padding: 0 $size-full;\r\n}\r\n```\r\n\r\nThe build fails with 'undefined variable $color-grey-47'\r\n\r\nIs this how I should be referencing my vars in the CSS? Like I would if they were defined in the CSS? You will notice that the mixin (`FontHeadline`) I have included in the Gulpfile references the vars in a JS fashion (and this works) but when I try that in the CSS it fails too.\r\n\r\nCould you advise what I'm doing wrong here? Thanks for any pointers.\r\n\r\n"}}