question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS style comments used in scss/variables format

See original GitHub issue

Since the comments used in the scss/variables format are /* ... */ style, they show up (oddly) in the final output.

_variables.scss (generated by style-dictionary)

/**
 * Do not edit directly
 * Generated on Wed, 03 Jul 2019 14:49:57 GMT
 */

$some-variable: blue; /* The color of the sky */

button.scss

@import 'variables';

button {
  background: $some-variable;
}

button.css (compiled output from Sass)

/**
 * Do not edit directly
 * Generated on Wed, 03 Jul 2019 14:49:57 GMT
 */
/* The color of the sky */

button {
  background: blue;
}

Looking at #195 and #196 it seems this was done to ensure that the comments would not break CSS, but as you can see, it really doesn’t make sense to have CSS-style comments on the Sass variables when the variables themselves will not be present in the final output.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
dbanksdesigncommented, Jul 3, 2019

Awesome I’ll change the less variables format too!

1reaction
dbanksdesigncommented, Jul 3, 2019

Just started a PR to fix this. 👆

Read more comments on GitHub >

github_iconTop Results From Across the Web

Comments
When writing style libraries using Sass, you can use comments to document the mixins, functions, variables, and placeholder selectors that your library ...
Read more >
Producing Well-Formatted CSS using SASS Comments
In this article, we have studied about SASS comments to produce the well-formatted CSS. Comments should be accurate and updated at all times....
Read more >
Comments - CSS: Cascading Style Sheets - MDN Web Docs
A CSS comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the...
Read more >
Sass Style Guide
Use Your Regular CSS Formatting Rules / Style Guide. This post is about Sass-specific stuff, but as a base to this, you should...
Read more >
Comment Standards in SASS and LESS - FFW
Preprocessors generate well-formatted CSS and makes our stylesheets easier to organize and maintain. SASS and LESS allow us to use nested rules, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found