Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you're making a choice as to which you should be using, <a href="http://css-tricks.com/sass-vs-less/" rel="nofollow noreferrer">this article on css-tricks</a> might be of interest to you.</p> <p>I have come to experience that using LESS or SASS has more advantages than disadvantages. Though this is certainly a disadvantage I can only suggest you structure your files well so any styles you seek are easily found using other references, here are a few things you can do:</p> <ul> <li>Document areas of your stylesheet; ie <code>/* General */</code>, <code>/* Header */</code> and <code>/* Footer */</code></li> <li>Use logical and sensible names for classes you can recognize quickly (and don't number them like error1-error10 or something)</li> <li>Learn to dissect the class/element/id selectors and think about how/where you would have written them.</li> <li>Use <kbd>CTRL</kbd>+<kbd>F</kbd>, often the precise attribute or one near it is fairly easily found this way</li> </ul> <p><strong>SASS</strong></p> <p>There is now a way to debug SASS in firefox using an extension that reads and displays the sass files in the firebug inspector. To use, install the extension and enable the respective debug flags.</p> <p><a href="https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/" rel="nofollow noreferrer">https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/</a></p> <p><em>Edit: as of 2014-07-06, this plugin is no longer available for download. <a href="https://github.com/nex3/firesass/issues/23" rel="nofollow noreferrer">FireSass has been discontinued.</a></em></p> <p>Chrome/Webkit versions have been popping up around the net and theres a beta feature in chrome to add support for SASS debugging. It's based on the same debugging information used in the firefox version. Haven't been able to judge any of them properly as of yet, nor found something which is publicly accepted as being the plugin for the job as of this writing.</p> <p><strong>LESS</strong> / <strong>STYLUS</strong></p> <p>As <a href="https://twitter.com/fgnass/status/268744635592105984" rel="nofollow noreferrer">this tweet</a> @jaketrent points to explains, there is progress on the debugging side in chrome, but nothing baked in yet and given the state of the LESS github it might still take a while... Both solutions are based on the beta feature for SASS debugging support in chrome, basically adding the same debug information as SASS does.</p> <ul> <li><a href="https://github.com/cloudhead/less.js/pull/1038" rel="nofollow noreferrer">https://github.com/cloudhead/less.js/pull/1038</a></li> <li><a href="https://github.com/LearnBoost/stylus/pull/886" rel="nofollow noreferrer">https://github.com/LearnBoost/stylus/pull/886</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload