CODEWITHSUNDEEP
sass
Tarun
Tarun

Reputation: 1898

Not able to compile comments in SASS

I'm using Mac 10.7.2, Ruby 1.9.3, and SASS 3.2.1. I'm trying to get multiline comment and comments between multilevel CSS. I know we can achieve multiline comment in SASS as below:

SASS

/*
 Multiline
 comments
 goes here

CSS

/* Multiline
 * comments
 * goes here */

But i use different kinda comments in my style sheet to highlight/identify multiple levels and different kinda stuff in my CSS two of them are below:

My style sheet start with comment below:

/***************************************************************

Theme Name: Theme name goes here
Theme URI: Theme URL goes here
Description: Discription related to theme will goes here
Version: 1.1
Author: Author name goes here
Author URI: Authour url goes here

***************************************************************/

My application Index comment are like below:

/*
---------------------------------------
---------------------------------------
--- Table of Contents:              ---
---                                 ---
--- 1. HEADER                       ---
--- -1.1 Navigation Bar             ---
---                                 ---
---                                 ---
--- 2. MAIN SECTION                 ---
--- -2.1 Home page                  ---
--- --2.1.1 Sections                ---
--- ---2.1.1.1 sub section          ---
---                                 ---
---                                 ---
--- 3. FOOTER                       ---
---------------------------------------
---------------------------------------
*/

I can find comment closer to it but, not able to get exactly this as compiled CSS comment

SASS

/*
  ---------------------------------------
  ---------------------------------------
  --- Table of Contents:              ---
  ---                                 ---
  --- 1. DEFAULT ELEMENTS             ---
  --- 2. LINKS                        ---
  --- 3. TABLE                        ---
  --- 4. FORM                         ---
  --- 5. GLOBAL CLASSES               ---
  ---------------------------------------
  ---------------------------------------

CSS

/*  ---------------------------------------
 *  ---------------------------------------
 *  --- Table of Contents:              ---
 *  ---                                 ---
 *  --- 1. DEFAULT ELEMENTS             ---
 *  --- 2. LINKS                        ---
 *  --- 3. TABLE                        ---
 *  --- 4. FORM                         ---
 *  --- 5. GLOBAL CLASSES               ---
 *  ---------------------------------------
 *  --------------------------------------- */

Also some time we need comments in multilevel

.firstLavel
  background: #f00
  /* comeent goes here before second level */
  .secondLavel
    font-size:  20
    color:  #ddd
  /* comeent goes here before third level
  .secondLavel
    font-size:  70
    color:  #ded

But I'm getting result:

  background: red;
  /* comeent goes here before second level */
  /* comeent goes here before third level */ }
  .firstLavel .secondLavel {
    font-size: 20;
    color: #dddddd; }
  .firstLavel .secondLavel {
    font-size: 70;
    color: #ddeedd; }

It should be:

.firstLavel {
  background: red; }

  /* comment goes here before second level */
  .firstLavel .secondLavel {
    font-size: 20;
    color: #dddddd; }

  /* comment goes here before third level */ 
  .firstLavel .secondLavel {
    font-size: 70;
    color: #ddeedd; }

Upvotes: 2

Views: 1177

Answers (1)

Vikko
Vikko

Reputation: 1406

Sass compiles using a algorithm that recursively renders all children of the CSS tree, starting with the endpoints (those without deeper levels). Due to this algorithm it won't be possible to set a comment before a child when it is not an endpoint: comments never have deeper levels.. The only way to set comments is set the comment as a child of the node.

To clarify, consider this tree:

root
  child1 
    child1.1
      /* comment on 1.1*/
      child1.1.1
    child1.2
  child2
  /* comment on 2 */
  child3
    /* comment on 3*/
    child3.1
  child4

rendering it will result first the entries without children, afterwards the entries those that go deeper. The order of the CSS will be:

root
  child2
  /* comment on 2 */
  child4
  child1
    child1.2
    child1.1
      /* comment on 1.1 */
      child1.1.1
  child3
    /* comment on 3 */
    child3.1

Algorithm used is a BSF with a queue which puts endpoints first

Upvotes: 1

Related Questions