Multiple KSS entries in SASS files (indented syntax) don't work

[jnystromdesign]

If you add a kss declaration after a sass style, that kss will be ignored by sc5 and handled as a commented part of the SASS/CSS. By putting all KSS declarations in the top of the file and all the sass styles below, all sections will be will be included.

Not sure this is intended, but I'd prefer if I could have KSS and SASS together and have multiple sections declared in one file.

[PhilippeVay]

(edit: my bad if you were speaking specifically of the .sass syntax - the one without curly braces - and not the .scss one)

Any KSS declaration that ends with:

// Styleguide 4.2

will create a component numbered 4.2 with its own page and the Sass code that follows will be shown in a "Display CSS" part. Beware that all lines in the KSS part must begin with // even in markup:, no empty blank line allowed (that's a bit annoying in HTML code but well, still manageable :) ). Here's an example file found in SC5 project. Do you have a similar structure?

[varya]

@jnystromdesign Could you provide code example?

[j-buntinx]

@varya I have the same issue. In my example code the "Navigation" does not show up in the styleguide.

// Button
//
// default - Default button
// button--shadow - Shadow button
// button--blue - Blue button
// button--orange - Orange button
// button--orange-gradient - Orange gradient button
//
// markup:
// <a href="#" class="button {$modifiers}">Button text</a>
//
// Styleguide 2.1

.button
  background: $dark-grey
  border-radius: 5px
  color: $white
  display: block
  font-size: 18px
  line-height: 20px
  padding: 14px 10px
  position: relative
  text-align: center
  text-decoration: none

  &--shadow
    box-shadow: 1px 2px 4px $opacity-black-2

  &--blue
    background: $blue

  &--orange
    background: $orange

  &--orange-gradient
    background: $orange-gradient

// Navigation
//
// markup: 
// <nav class="nav">Navigation</nav>
//
// Styleguide 2.2

.nav
  display: block
  background: $blue

[varya]

This is related to Gonzales bug https://github.com/tonyganch/gonzales-pe/issues/266 As a workaround try to add multiline comment /* hack */ before the section which is not parsed.

[j-buntinx]

Yes, that works. But then the /* hack */ shows up in the "Show CSS" part of the generated site. This also works, but then the sg-wrapper lines get ignored.

/*
  Button

  default - Default button
  button--shadow - Shadow button
  button--blue - Blue button
  button--orange - Orange button
  button--orange-gradient - Orange gradient button

  markup:
  <a href="#" class="button {$modifiers}">Button text</a>

  Styleguide 2.1
  */

.button
  background: $dark-grey
  border-radius: 5px
  color: $white
  display: block
  font-size: 18px
  line-height: 20px
  padding: 14px 10px
  position: relative
  text-align: center
  text-decoration: none

  &--shadow
    box-shadow: 1px 2px 4px $opacity-black-2

  &--blue
    background: $blue

  &--orange
    background: $orange

  &--orange-gradient
    background: $orange-gradient

/*
  Navigation

  markup: 
  <nav class="nav">Navigation</nav>

  sg-wrapper:
  <div class="parent-wrapper">
    <sg-wrapper-content/>
  </div>

  Styleguide 2.2
  */

.nav
  display: block
  background: $blue