{"action":"opened","issue":{"url":"https://api.github.com/repos/oppia/oppia/issues/1930","repository_url":"https://api.github.com/repos/oppia/oppia","labels_url":"https://api.github.com/repos/oppia/oppia/issues/1930/labels{/name}","comments_url":"https://api.github.com/repos/oppia/oppia/issues/1930/comments","events_url":"https://api.github.com/repos/oppia/oppia/issues/1930/events","html_url":"https://github.com/oppia/oppia/issues/1930","id":157683673,"number":1930,"title":"Refactor oppia.css with LESS/SASS","user":{"login":"charisseysabel","id":11045720,"avatar_url":"https://avatars.githubusercontent.com/u/11045720?v=3","gravatar_id":"","url":"https://api.github.com/users/charisseysabel","html_url":"https://github.com/charisseysabel","followers_url":"https://api.github.com/users/charisseysabel/followers","following_url":"https://api.github.com/users/charisseysabel/following{/other_user}","gists_url":"https://api.github.com/users/charisseysabel/gists{/gist_id}","starred_url":"https://api.github.com/users/charisseysabel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/charisseysabel/subscriptions","organizations_url":"https://api.github.com/users/charisseysabel/orgs","repos_url":"https://api.github.com/users/charisseysabel/repos","events_url":"https://api.github.com/users/charisseysabel/events{/privacy}","received_events_url":"https://api.github.com/users/charisseysabel/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-05-31T14:20:23Z","updated_at":"2016-05-31T14:20:23Z","closed_at":null,"body":"I discussed introducing CSS preprocessors to Oppia with @seanlip so I made this issue to give an overview on how CSS preprocessors can help build a more maintanable CSS. Our CSS file is getting bigger and bigger and we all know there's a lot of duplicated stuff in there that we wish we can reuse over and over. Of course, if you use CSS preprocessors, you can skip the overview/tutorial and tell me what you think instead!\r\n\r\nI'm going to quote text from this [blog post](http://vanseodesign.com/css/css-preprocessors/) because it explains better than me. I would suggest to read it entirely if you're not familiar.\r\n\r\nSo, **what are CSS preprocessors?**\r\n> The answer is in the name. If you understand how php or asp or any other server side programming language works it amounts to the same thing. In fact the first preprocessed css I encountered were css files ending in .php in order to use variables.\r\n> \r\n> CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years. 3 of the more popular css preprocessors are Sass, LESS, and Stylus\r\n> \r\n> Because they aren’t css, they aren’t bound by the limitations of css.The preprocessed language can give you more functionality than css as long as it eventually makes sure everything is output as css and works in a browser like we expect.\r\n\r\n\r\n**How can it help build a more maintainable code?**\r\n\r\n> For example many developers want more abstraction than css gives us by default. One goal of css has been to keep it simple so anyone can quickly pick up the language and learn. However that focus also limits what css can do and developers don’t much like limitations. We want variables and if the language won’t gives it to us, we’ll find a way to give it to ourselves.\r\n> \r\n> Preprocessors offer more than variables of course. They can offer whatever they want as long as the resulting css file they produce works as ordinary css.\r\n\r\nUsing preprocessors would also save us a lot of time on keeping styles consistent throughout the site.\r\n\r\n**Possible Issues with CSS Preprocessors**\r\n\r\n> The main issue is that everyone working on the site needs to be using the same preprocessor. Part of your team couldn’t work in Sass while the some others use LESS and others still edit the css files directly.\r\n\r\n(Read more possible issues [here](http://www.amberweinberg.com/januarys-12412-researching-less-sass/))\r\n\r\n**Cool, so how does it work?**\r\nThere are lots of tutorials online on how to get started but, to save time on Googling stuff, here's a really quick example using the actual Oppia CSS.\r\n\r\nSay, you're building a new page and it requires a button. You've been digging around the css file and found that there's a _.oppia-button_ class that you can use. Here's a catch -- we could just add the class name in the HTML, right? But what if you just want the characteristics of the basic Oppia button but with a different color, different hover state?\r\n\r\nWe can store constants in a variable:\r\n```\r\n@GlobalFont: \"Capriola\", \"Roboto\", Arial, sans-serif;\r\n@GlobalFontSize: 14px;\r\n@ButtonBgColor: rgba(0,0,0,0.2);\r\n```\r\n\r\nBuilding a basic button. Note: this is not an HTML class called \"BasicButton\". This is called a _mixin_. You can group styles together and \"call\" them later on in a CSS declaration. These can be customized by entering parameters in the parenthesis. Kind of like a function.\r\n```\r\n.BasicButton() {\r\n  background-color: @ButtonBgColor;\r\n  color: rgba(255,255,255,1.0);\r\n  font-family: @GlobalFont;\r\n  font-size: @GlobalFontSize;\r\n  margin: 15px;\r\n  padding: 15px;\r\n  text-transform: uppercase;\r\n  white-space: normal;\r\n}\r\n\r\n```\r\nSo, now you have a div:\r\n`<div class=\"oppia-about-button\"></div>`\r\n\r\nTo use the mixin we just made above, we _call_ it:\r\n```\r\n.oppia-about-button { \r\n     .BasicButton();\r\n}\r\n```\r\n\r\nHere's a screenshot of what will happen.\r\n![quick-overview](https://cloud.githubusercontent.com/assets/11045720/15677545/0532deda-274b-11e6-874e-179c86e7c7ca.png)\r\n\r\nI use LESS, but I believe SASS works pretty much the same.\r\nAlso, I know that this issue would take a lot of time considering our CSS has over 3000 lines of code. But I believe using a preprocessor would help us in the long run.\r\n\r\nLet me know your thoughts!\r\n"}}
{"actor":{"display_login":"charisseysabel"}}