[SASS] Change output style comments to non-rendered comments in invisibles files

[cchaos]

Summary

There are two kinds of SASS comments.

1. // This style doesn't get output in the compiled CSS file
2. /* This style does */

When importing the invisibles files (variables, mixins, functions), if those files contain the second comment style, then the comments will be output in the consumer's CSS. This is unnecessary and can cause confusion.

Kibana example:

This PR, just changes the comments from the invisibles files to be the non-compiled style.

Checklist

• [ ] Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• [ ] Checked in IE11 and Firefox
• [ ] Props have proper autodocs
• [ ] Added documentation examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[andreadelrio]

Changes LGTM. Maybe we can have Sass Lint give us warnings when we use comments type 2 in our Sass files

[cchaos]

Maybe we can have Sass Lint give us warnings when we use comments type 2 in our Sass files

That's a good thought, but it's hard to determine in the Linter if the file is simply just an invisibles file. For instance, we still use the compilable style of comments in selectors so when compiled we can view those comments like:

eui/src/components/badge/_badge.scss

Lines 1 to 7 in 9e71bec

	/**
	* 1. Accounts for the border
	*/
	.euiBadge {
	font-size: $euiFontSizeXS;
	font-weight: $euiFontWeightMedium;
	line-height: $euiSize + 2px; /* 1 */

But those will only be compiled once, where as the invisibles files are imported multiple times by multiple files and so we don't want those comments output multiple times without context.