SASSMAS
sass-lang.com
DEC13 - @bennyschudel
Installation
ruby
$ gem install sass
node.js (uses libsass - faster)
$ npm install node-sass
Interactive Shell
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
BASICS
- Import / Partials
- Comments
- Data Types
- Variables
- Nesting
-
Mixins
- Extend/Inheritance
- Operators
- Functions
- Control Directives
- Specials
Import / Partials
Imports
@import 'site';
Partials
@import '_partial';
Partials are not compiled individually.
Comments
/* This comment
is preserved. */
body {
color : black;
}
/* This comment
is preserved. */
body {
color: black;
}
// This is not.
body {
color : black;
}
body {
color: black;
}
Data Types
- Numbers
1.2, 13, 10px
- Strings (with and without quotes)
"foo", 'bar', baz
- Colors
blue, #04a3f9, rgba(255, 0, 0, 0.5)
- Booleans / Null
true, false, null
- Lists (separated by spaces or commas)
1.5em 1em 0 2em
Helvetica, Arial, sans-serif
VarIABLEs
$font-serif : Georgia, serif;
$font-color : blue;
body {
font-family : $font-stack;
color : $font-color;
}
body {
font-family : Georgia, serif;
color : blue;
}
Default value
$font-color : red !default;
body {
color : $font-color;
}
body {
color : red;
}
String Interpolation
$name : 'Fanny';
p {
&:before {
content : "Hi #{$name}!"
}
}
p:before {
content: "Hi Fanny!";
}
Interpolated strings are unquoted ;)
$selector : 'error';
p {
&.#{$selector} {
color : red;
}
}
p.error {
color: red;
}
nesting
nav {
ul {
margin : 0;
padding : 0;
list-style : none;
li {
display : inline-block;
}
}
a {
display : block;
padding : 0.5rem 1rem;
text-decoration : none;
}
}
nav ul {
margin : 0;
padding : 0;
list-style : none;
}
nav ul li {
display : inline-block;
}
nav a {
display : block;
padding : 0.5rem 1rem;
text-decoration : none;
}
Mixins
@mixin border-radius($radius : 1rem) {
-webkit-border-radius : $radius;
-moz-border-radius : $radius;
-ms-border-radius : $radius;
-o-border-radius : $radius;
border-radius : $radius;
}
.box {
@include border-radius(10px);
}
.box {
-webkit-border-radius : 10px;
-moz-border-radius : 10px;
-ms-border-radius : 10px;
-o-border-radius : 10px;
border-radius : 10px;
}
}
Extend/Inheritance
%message {
border-style : solid;
border-width : 1px;
padding : 1rem;
}
.success-message {
@extend %message;
border-color : green;
color : darkgreen;
}
.error-message {
@extend %message;
border-color : red;
color : darkred;
}
.success-message, .error-message {
border-style : solid;
border-width : 1px;
padding : 1rem;
}
.success-message {
border-color : green;
color : darkgreen;
}
.error-message {
border-color : red;
color : darkred;
}
Operators
+ , - , * , / , %
.container {
width : 100%;
}
article {
float : left;
width : 600px / 960px * 100%;
}
aside {
float : right;
width : 300px / 960px * 100%;
}
.container {
width : 100%;
}
article {
float : left;
width : 62.5%;
}
aside {
float : right;
width : 31.25%;
}
Functions
p {
color : rgba(red, 0.5);
}
p {
color : rgba(255, 0, 0, 0.5);
}
Arguments
@mixin border($color, $width)
@mixin border($color : red, $width : 1px) // keyword arguments
@mixin border($args...) // variable arguments
Custom Functions
$grid-width : 40px;
$gutter-width : 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {
width : grid-width(5);
}
#sidebar {
width : 240px;
}
Control Directives
- @if / @else if
- @for
-
@while
- @each
@if / @else if
$type : second;
p {
@if $type == first {
color : blue;
}
@else if $type == second {
color : red;
}
@else {
color : black;
}
}
p {
color : red;
}
@for
@for $i from 1 through 3 {
.item-#{$i} {
width: 2rem * $i;
}
}
.item-1 {
width: 2rem;
}
.item-2 {
width: 4rem;
}
.item-3 {
width: 6rem;
}
@while
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2rem * $i;
}
$i: $i - 2;
}
.item-6 {
width: 12rem;
}
.item-4 {
width: 8rem;
}
.item-2 {
width: 4rem;
}
@each
@each $animal in puma, deer, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
.puma-icon {
background-image: url('/images/puma.png');
}
.deer-icon {
background-image: url('/images/deer.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}
Specials
Combine selector ( &... )
p {
&.swiss {
color : red;
}
}
p.swiss {
color : red;
}
Parent selector ( ... & )
p {
&.swiss {
color : red;
.europe & {
color : blue;
}
}
}
p.swiss {
color: red;
}
.europe p.swiss {
color: blue;
}
@content
@mixin ie6 {
* html {
@content;
}
}
@include ie6 {
#logo {
background : url(logo.png);
}
}
* html #logo {
background : url(logo.png);
}
$color: white;
@mixin colors($color : blue) {
@content;
border-color : $color;
}
.colors {
@include colors {
color : $color;
}
}
.colors {
color : white;
border-color : blue;
}
@debug
@debug 10em + 12em;
Line 1 DEBUG: 22em
@warn
@mixin adjust-location($x) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x : 1px * $x;
}
position : relative;
left : $x;
}
ADVICE / PITFALLS
- avoid deep nesting » complex selectors
- always check generated css code
- use source map support
- make heavy use of @extend
- prefix global variables
- write readable code (not always easy ;)
- use libsass (faster - if possible)
- define mixins whenever you can
- maybe write custom functions
NEXTSTEPS
RTFM
LEARN
COMMUNITY
DEMOTIME
Questions?
THANKYOU
+
MERRY SASSMAS
SASSMAS
By Benny Schudel
SASSMAS
- 887