Syntactically Awesome Style Sheets
File partitioning
Mixins
Extending/Inheritance
Syntactically Awesome Style Sheets
Easier to maintain
Sassy CSS
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
body {
font: 100% Helvetica, sans-serif;;
color: #333;
}
Sass:
Scss:
Css:
$brand-color: #fc9533;
a {
color: $brand-color;
}
nav {
background-color: $brand-color;
}
li:hover,
li:focus,
li:active {
color: $brand-color;
}
table {
border: 1px solid $brand-color;
}
Scss:
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
h1,
h2,
h3 {
font-family: $helvetica;
}
a {
font-family: $helvetica;
}
.some-block .some-object .modificator {
font-family: $helvetica;
}
Scss:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Scss:
Css:
and Partials
pulls files in before compilation
many files - one HTTP request
partials ( _myFile.scss )
// _reset.scss
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
ol {
color: #a7a7a7;
}
ul {
color: #efefef;
}
ul, ol {
margin: 0;
padding: 0;
}
ol {
color: #a7a7a7;
}
ul {
color: #efefef;
}
Scss:
Css:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
.button {
@include border-radius(4px);
}
.filter .button {
background-color: #4abad3;
@include border-radius(2px);
}
Scss:
Css:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
.filter .button {
background-color: #4abad3;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Scss:
Css:
+ - * / %
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
Scss:
Css:
Compass (Helpers, Layout, Typography, Grid Layout and Sprite images)
nesting properties
border: {
style: solid;
left: {
width: 4px;
color: #333333;
}
right: {
width: 2px;
color: #000000;
}
}
}
mixins and inheritance
.circle {
border: 1px solid #ccc;
border-radius: 50px;
overflow: hidden;
}
.avatar {
@extend .circle;
}
more comprehensive documentation
better at operations
$margin: 10px;
div {
margin: $margin - 10%; /* Syntax error: Incompatible units: '%' and 'px' */
}
Less:
@margin: 10px;
div {
margin: @margin - 10%; /* = 0px */
}
Scss:
examples
arbitrary placement
re-use
re-use
optional