Read more

Multiline comments in indented Sass syntax

Henning Koch
March 17, 2015Software engineer at makandra GmbH

Write a // and indent every subsequent line by two spaces.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

This is great for documenting BEM blocks!

//
  An action button
  ================
  
  Basic usage
  -----------
  
      <a href="/path" class="action">New booking</a>
      <button class="action">Save</a>
      <input type="submit" class="action">Save</a>
  
  Colors
  -------
  
      <a href="/path" class="action is-red">Primary</a>
      <a href="/path" class="action is-grey">Secondary</a>
  
  Small inline buttons
  --------------------
  
      <p>
        Record 123 <a href="/path" class="action is-inline">Delete</a>
      </p>

@import environment

=tint($color)
  background-color: $color
  +hover
    background-color: $color + 10
    //box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2)

.action
  +default-font
  display: inline-block
  padding: 7px 13px
  color: white
  border-radius: 3px
  +font-size(16px)
  vertical-align: middle
  box-shadow: inset 0 20px 20px rgba(255, 255, 255, 0.1)
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
  border: 0
  cursor: pointer
  min-width: 70px
  text-align: center
  font-weight: bold
  +uppercase
  +tint($color-red)
  margin-right: 0.15em
  
  &:active
    border: 0
    outline: 0
  
  &.is-gray
    +tint(#666)
    
  &.is-inline
    padding: 4px 10px
    min-width: 0
    +font-size(12px)
//
  An action button
  ================
  
  Basic usage
  -----------
  
      <a href="/path" class="action">New booking</a>
      <button class="action">Save</a>
      <input type="submit" class="action">Save</a>
  
  Colors
  -------
  
      <a href="/path" class="action is-red">Primary</a>
      <a href="/path" class="action is-grey">Secondary</a>
  
  Small inline buttons
  --------------------
  
      <p>
        Record 123 <a href="/path" class="action is-inline">Delete</a>
      </p>

@import environment

=tint($color)
  background-color: $color
  +hover
    background-color: $color + 10
    //box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2)

.action
  +default-font
  display: inline-block
  padding: 7px 13px
  color: white
  border-radius: 3px
  +font-size(16px)
  vertical-align: middle
  box-shadow: inset 0 20px 20px rgba(255, 255, 255, 0.1)
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
  border: 0
  cursor: pointer
  min-width: 70px
  text-align: center
  font-weight: bold
  +uppercase
  +tint($color-red)
  margin-right: 0.15em
  
  &:active
    border: 0
    outline: 0
  
  &.is-gray
    +tint(#666)
    
  &.is-inline
    padding: 4px 10px
    min-width: 0
    +font-size(12px)
Henning Koch
March 17, 2015Software engineer at makandra GmbH
Posted by Henning Koch to makandra dev (2015-03-17 08:51)