{"action":"closed","issue":{"url":"https://api.github.com/repos/sass/sass/issues/1639","labels_url":"https://api.github.com/repos/sass/sass/issues/1639/labels{/name}","comments_url":"https://api.github.com/repos/sass/sass/issues/1639/comments","events_url":"https://api.github.com/repos/sass/sass/issues/1639/events","html_url":"https://github.com/sass/sass/issues/1639","id":57606956,"number":1639,"title":"Define SASS variables within @media directives","user":{"login":"banacan","id":2278106,"avatar_url":"https://avatars.githubusercontent.com/u/2278106?v=3","gravatar_id":"","url":"https://api.github.com/users/banacan","html_url":"https://github.com/banacan","followers_url":"https://api.github.com/users/banacan/followers","following_url":"https://api.github.com/users/banacan/following{/other_user}","gists_url":"https://api.github.com/users/banacan/gists{/gist_id}","starred_url":"https://api.github.com/users/banacan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/banacan/subscriptions","organizations_url":"https://api.github.com/users/banacan/orgs","repos_url":"https://api.github.com/users/banacan/repos","events_url":"https://api.github.com/users/banacan/events{/privacy}","received_events_url":"https://api.github.com/users/banacan/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2015-02-13T14:49:41Z","updated_at":"2015-02-13T21:34:01Z","closed_at":"2015-02-13T21:34:01Z","body":"I have noticed that it is not possible to define SASS variables within @media directives. To give you an idea how useful this is, Foundation comes with basic styling out of the box, with design elements determined by variables.  For example, top-bar (their navigation menu) has variables for background color, link color, top-level bg color, lower-level bg color. etc., etc.  Changing the value of one variable can affect many selectors due to inheritance.  As it is now, to change the background color of child (dropdown) navigation items on desktop, one must add the following CSS rule within an @media directive:\r\n\r\n@media #($large-up) {\r\n.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {background-color:#333;}\r\n}\r\n\r\nIf SASS allowed defining (or re-defining) variables within @media directives, one would only have to change the value of the variable:\r\n\r\n@media #($large-up) {\r\n$topbar-dropdown-bg:#333;\r\n }\r\n\r\nIn the above examples you can see just how difficult it is to find the correct selector(s) to make the change(s), but how easy it is to change one variable.  I do hope you will consider this small but significant enhancement for a future release. "}}