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 online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
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)