Complexity Metrics for Sassy Cascading Style Sheets

Many front-end web developers are nowadays increasingly using sassy cascading stylesheets (SCSS) instead of the regular cascading style sheets (CSS). Despite its increased demand, SCSS has inherent complexity which arises from its features such as the use of nesting, inheritance, variables, operators, and functions. In addition, SCSS complexity, like all other software, continually increases with age. High complexity is undesirable because it leads to software that is difficult to understand, modify and test. Although there has been some metrics proposed to measure stylesheets complexity, these were defined in the context of regular CSS, and cannot be used to measure SCSS due to differences in their syntax. This paper proposes four metrics for measuring the complexity of SCSS code. The metrics have been used to calculate the complexity of three code snippets and three real-world projects and were found to be intuitional. The metrics were also evaluated using the Kaner framework and satisfied all the evaluation questions, indicating that they are sufficiently practical as required in the industry. In addition, the metrics were evaluated using Weyuker's properties, and results show that all the four metrics satisfied seven out of the nine properties, implying that they are theoretically sound.