{"action":"closed","issue":{"url":"https://api.github.com/repos/sass/sass/issues/2582","repository_url":"https://api.github.com/repos/sass/sass","labels_url":"https://api.github.com/repos/sass/sass/issues/2582/labels{/name}","comments_url":"https://api.github.com/repos/sass/sass/issues/2582/comments","events_url":"https://api.github.com/repos/sass/sass/issues/2582/events","html_url":"https://github.com/sass/sass/issues/2582","id":375152872,"node_id":"MDU6SXNzdWUzNzUxNTI4NzI=","number":2582,"title":"Implement ability to increase a selector specificity by some syntax sugar","user":{"login":"hardrese7","id":10993151,"node_id":"MDQ6VXNlcjEwOTkzMTUx","avatar_url":"https://avatars2.githubusercontent.com/u/10993151?v=4","gravatar_id":"","url":"https://api.github.com/users/hardrese7","html_url":"https://github.com/hardrese7","followers_url":"https://api.github.com/users/hardrese7/followers","following_url":"https://api.github.com/users/hardrese7/following{/other_user}","gists_url":"https://api.github.com/users/hardrese7/gists{/gist_id}","starred_url":"https://api.github.com/users/hardrese7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hardrese7/subscriptions","organizations_url":"https://api.github.com/users/hardrese7/orgs","repos_url":"https://api.github.com/users/hardrese7/repos","events_url":"https://api.github.com/users/hardrese7/events{/privacy}","received_events_url":"https://api.github.com/users/hardrese7/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-10-29T18:19:32Z","updated_at":"2018-10-31T23:51:34Z","closed_at":"2018-10-31T23:51:34Z","author_association":"NONE","body":"Hey, everyone knows that using of `important` in CSS is the biggest evil. But there is one good hack for it — selector repeat, for example:\r\n```\r\n.link {\r\ncolor: red;\r\nfont-size: 24px;\r\nline-height: 24px;\r\n}\r\n\r\n.link { // without hack\r\ncolor: green !important;\r\nfont-size: 26px !important;\r\nline-height: 26px !important;\r\n}\r\n\r\n.link.link { // with hack\r\ncolor: green;\r\nfont-size: 26px;\r\nline-height: 26px;\r\n}\r\n```\r\n\r\n\r\nit's really helpful, I have tried to do it with SCSS:\r\n```\r\n.class1__el {\r\npadding: 10px;\r\n}\r\n@media only screen and (max-width : 700px) {\r\n    .class1 {\r\n      &__el#{&}__el {\r\n        padding: 27px 31px 27px;\r\n    }\r\n}\r\n```\r\n\r\nit works but it looks strange, also what will be if I need to increase specificity again and again?\r\n\r\nI suggest adding some syntax sugar here, something like:\r\n```\r\n    .class1 {\r\n      &__el:set-specificity(4) {\r\n        padding: 27px 31px 27px;\r\n      }\r\n   }\r\n``` \r\nthat will be compiled to\r\n```\r\n.class1__el.class1__el.class1__el.class1__el {\r\n    padding: 27px 31px 27px;\r\n}\r\n```"}}
{"actor":{"display_login":"nex3"}}