Sass Basics

@import './other\_sass\_file';
@import '/code', 'lists';
// Plain CSS @imports
@import "theme.css";
@import url(theme);

The .sass or .sass extension is optional.

.button {
    Â·Â·Â·
}

.push-button {
    @extend .button;
}

.markdown-body {
    a {
      color: blue;
      &:hover {
        color: red;
      }
    }
}

text: {
    // like text-align: center
    align: center;          
    // like text-transform: uppercase
    transform: uppercase; 
}

@mixin heading-font {
    font-family: sans-serif;
    font-weight: bold;
}
h1 {
    @include heading-font;
}

/\*
 Block comments
 Block comments
 Block comments
\*/
// Line comments

$wk: -webkit-;
.rounded-box {
  #{$wk}border-radius: 4px;
}

$defaultLinkColor: #46EAC2;
a {
  color: $defaultLinkColor;
}

Comments