The Cascading Style Sheets (CSS) specification has been essential to website aesthetics since the mid-1990s. It’s not quite a programming language and has historically lacked most modern development tools such as functions or variables. Fortunately, SCSS provides an extension to CSS syntax that allows for such programming.<\/p>\n
SCSS allows developers to define a variable that gets replaced at compile-time much like how TL;DR<\/strong> – use the An issue can arise when using such variables in SCSS with The error message here will vary depending on how one chooses to compile their SCSS. It might be a compile-time error or simply a SCSS is an extension<\/em> of CSS meaning any valid CSS is also valid CSS but<\/strong>\u00a0not all SCSS is valid CSS<\/strong> and such variable definition is an illustration of just that.<\/p>\n Immediately, this seems like a major issue. Fortunately, the work-around is simple and should feel native to any web programmer familiar with syntaxes used by React\/JSX or similar tools. Below is how to insert an SCSS variable into the CSS calc function:<\/p>\n This code compiles without error and will return a value of The end result in this short contrived example is the same as the previous code. The SCSS syntax is arguably\u00a0sassier<\/em> (living up to the directive’s name) but does lose some of the advantages of CSS custom properties<\/a>. Namely, JavaScript code is not able to directly access and manipulate them since they are replaced with their static values at compile time. Additionally, CSS custom properties\u00a0cascade<\/em> and provide systems of inheritance.<\/p>\n Cascading Styles Sheets (CSS)<\/strong> is the language in which websites express their aesthetics, structure, and often much of their functionality. Syntactically Awesome Style Sheets (SASS)<\/strong> is a preprocessor directive by which more dynamic CSS can be written. Sassy CSS (SCSS)<\/strong> is the syntax in which this language is written.<\/p>\n SASS files are written with the extension #define<\/code> directives work in languages like C. When the SCSS files are compiled down to CSS each instance of a variable is replaced with its value. This makes the life of web developers easier but can cause some headaches when mixing with some native CSS features like functions.<\/p>\n#{}<\/code> syntax as such: calc(100vh - #{$variable});<\/code><\/p>\nSCSS Variables & CSS Functions<\/h2>\n
calc<\/code>, transform<\/code>, scale<\/code>, or any number of the available CSS built-in functions<\/a>. CSS functions expect a certain syntax and the $<\/code>-adorned SCSS is not within spec. Below is an example of an attempt at using an SCSS variable with the CSS calc<\/code> function that one might make without being aware of the issue:<\/p>\n\/\/ Define a variable\r\n$header_height: 90px;\r\n\r\n\/\/ Attempt to use it in the CSS calc function\r\n\/\/ NOTE: Does Not Work!!!\r\n.overlay{\r\n height: calc(100vh - $header_height);\r\n}<\/pre>\nUnexpected term<\/code> nag via one’s linter. In any case, the issue arises from inserting the $header_height<\/code> variable directly into the CSS function.<\/p>\n\/\/ Define the variable the same way\r\n$header_height: 90px;\r\n\r\n\/\/ Use the #{} syntax to insert a variable\r\n\/\/ into the calc function correctly.\r\n.overlay{\r\n height: calc(100vh - #{$header_height});\r\n}<\/pre>\n100vh - 90px<\/code> to the height<\/code> parameter of the .overlay<\/code> class. CSS now allows programmers to use variables (a.k.a. custom properties) in a similar fashion. Consider the above code rewritten in pure CSS:<\/p>\n\/** Defines a class to hold custom properties **\/\r\n.custom{\r\n\r\n \/** Defines the Height **\/\r\n --height: 90px;\r\n}\r\n\r\n.overlay{\r\n\r\n \/** Uses var() function to access custom property **\/\r\n height: calc(100vh - var(--height));\r\n}<\/pre>\nKnowing the Difference: CSS\/SASS\/SCSS<\/h2>\n
.sass<\/code> and pre-date the SCSS files with the extension .scss<\/code>. The difference is in syntax — SCSS is an extension of CSS such that all CSS is valid SCSS whereas SASS has an indentation-formatted styling that, among other things, avoids the need for brackets. They both compile to CSS under the hood and the difference is mostly syntactic.<\/p>\nFinal Thoughts<\/h2>\n