Automated Extraction of Mixins in Cascading Style Sheets

Cascading style sheets (CSS) is a language that describes the presentation of web documents. CSS is widely adopted in web development and it is now common for web projects to have several thousands of CSS lines of code. Because the language lacks advanced features to allow code reuse, several languages such as Sass and Less have emerged as extensions to CSS. They provide mechanisms such as mixins to enable reuse. However, when a developer wants to migrate her web project from CSS to one of these extension languages, identifying mixins is a challenging task. In this paper, we describe an automated approach to extract mixins from CSS code. We have developed a tool that identifies mixins in CSS files and automatically generates Sass code. Our technique enables a fine-grained control on the generated code tailored to developer needs. We evaluate our approach on more than a hundred CSS files and conduct several case studies to assess its real-world relevance.