Prevent parsing SASS code, but still output it to the final css file

Question

I just started using SASS. Very impressed, however, there is something that I would like to do, but I can not find the answer, how can or not.

I have a CSS block that I don't want SASS to parse / compile, but I would still like this block to output to the final compiled CSS file. Is it possible?

Thanks.

My first SO question usually gives an answer. I hope I didn’t miss it somewhere, tried every search term that I could think of to find it.

Answer 1

Put it in a separate .css file and import it into your SASS file. A file ending in .css is not parsed, but is still included in the final output.

Answer 2

Try embedding your block in / * ..... * / in your scss file. Hope this helps.

Answer 3

This question is a bit outdated, but in the spirit of maintaining relevance:

The current version of SASS (3.4.22) does a pretty good job just to change what it needs. If what you wrote is valid CSS, it should be output as is.

The only time you should see that SASS is changing your styles is if you did something similar to how it should be changed. Based on their documentation, it will look like this:

• Nested Styles
• String concatenation
  • content: 'foo' + 'bar';
• Using interpolation
  • left: calc(50% - #{$variable})
• Using Variables
  • width: $variable
• Using @extend or embedding @include

In most other situations, in my experience, SASS will happily spit out everything you wrote.

If you need to infer that SASS insists on parsing when it is not needed, you can wrap the fragment in quotation marks and remove them using the unquote function:

 $family: unquote("Droid+Sans"); @import url("http://fonts.googleapis.com/css?family=#{$family}"); 

which compiles to

 @import url("http://fonts.googleapis.com/css?family=Droid+Sans");