Posted over 4 years ago. Visible to the public.

Multiline comments in indented Sass syntax

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

This is great for documenting BEM blocks!

Copy
// 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)
Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Henning Koch
Last edit:
over 4 years ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more