Writing Modern Sass

Current releases

Installing Sass

npm install sass
npm install -g sass

.sass versus .scss files

  1. the original style, called indented syntax, uses a syntax similar to Haml, with indentation to separate code blocks and newline characters to separate rules. Sass follows strict indentation. Files implementing the original syntax have the .sass extension.
  2. the newer syntax, SCSS (standing for Sassy CSS), uses block formatting much like that of CSS, using braces to demarcate code blocks and semicolons to separate rules within a block. Scss does not require strict indentation, but semicolons and braces are mandatory. SCSS is a nested metalanguage, as any valid CSS is valid SCSS with the same semantics. Files using the Sassy CSS syntax are given the .scss file extension.

Using variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #7C7E7F;

.myClass {
font: 100% $font-stack;
color: $primary-color;
}
.otherClass{
color: $primary-color;
}
$font-stack:    Helvetica, sans-serif
$primary-color: #7C7E7F

.myClass
font: 100% $font-stack
color: $primary-color
.otherClass
color: $primary-color

Nesting

nav ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid black;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid black;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
&:hover: {
text-decoration: underline;
}
}
}

Partials

A note on the @import rule

Modules

Inheritance

.error {
border: 1px #f00;
background-color: #fdd;
}

.error--serious {
border-width: 3px;
}
.error {
border: 1px #f00;
background-color: #fdd;

&--serious {
@extend .error;
border-width: 3px;
}
}

More at-rules

@error

@warn

@debug

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store