Question

How can we know if any website is using Sass and Compass for CSS?

Answer 1

That’s a though one, but I would take a look at the CSS files, IF the developers forgot about changing the output, you’ll be able to spot the file names and line numbers of the source files.

If not, look for uncommon patterns in the CSS output, for instance SASS makes nesting very easy to do, so a selector could look like this in the CSS (you would never hand-write this long selectors)

div#wrapper div#container ul#myId li a { color: blue; }
div#wrapper div#container ul#myId li.sass a { color: red; }

But would be look like this in SASS source file (no repetition, easy to getaway with)

div#wrapper {
  div#container {
     ul#myId {
       li {
         a { color: blue; }
         &.sass {
           a { color: red; }
         }
       }

     }
  }
}

Also, look for lengthy class combinations, those come from using the @extend directive, that would look like this:

.button, .button1, .button-submit, .button-add-to-cart, .button-signup, .button-register {
 display: inline-block; 
 }

Another good idea is to look in the source of CSS3 generated buttons, usually developers only care for Firefox, Safari, Chrome and IE, but a SASS generated output will be REALLY verbose with a lot of vendor prefixes, including ones for Opera.

Good luck!