Jitendra Vyas
Jitendra Vyas

Reputation: 152667

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

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

Upvotes: 0

Views: 508

Answers (2)

stephanlindauer
stephanlindauer

Reputation: 2336

if the developer forgot to compile for production or minify the .css, than you should still be able to see the automatically inserted comments that point back to the original source, like:

/* line 22, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
.selector {
    bla: 123;
}

or

/* line 5, sass/large/_common.scss */
.selector {
   bla: 123;
}

Upvotes: 0

leopic
leopic

Reputation: 3002

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!

Upvotes: 2

Related Questions