Par @Leimina pour les Human Talks Angers janvier 2013, fait avec reveal.js.
+ - / * %
if else
for while each
gem install sass
Sass n'intervient que sur votre machine durant le développement
sass --watch style.scss:style.css
@import 'mixins';
@import 'base';
@import 'layout';
Sass
$main-color: black;
$main-width: 960px;
#contenu {
color: $main-color;
width: $main-width;
}
#osef {
color: invert($main-color);
background: $main-color;
position: absolute;
width: $main-width * 0.6;
}
CSS généré
#contenu {
color: black;
width: 960px; }
#osef {
color: white;
background: black;
position: absolute;
width: 576px; }
Sass
#contenu {
padding: 10px;
a {
text-decoration: underline;
color: pink;
&:hover, &:focus {
text-decoration: none;
}
}
}
CSS généré
#contenu {
padding: 10px;
}
#contenu a {
text-decoration: underline;
color: pink;
}
#contenu a:hover, #contenu a:focus {
text-decoration: none;
}
Sass
@mixin simple-shadow($color: #5A1ADE, $size: 10px, $prefix: false) {
box-shadow: 0 0 $size $color;
@if $prefix == true {
-webkit-box-shadow: 0 0 $size $color;
}
}
.shadow {
@include simple-shadow();
}
.big-shadow {
@include simple-shadow(#666, 25px, true);
}
CSS généré
.shadow {
box-shadow: 0 0 10px #5A1ADE;
}
.big-shadow {
box-shadow: 0 0 25px #666666;
-webkit-box-shadow: 0 0 25px #666666;
}
Sass
$main-color: #F1A5C0;
.main { color: $main-color; }
.important {
color: complement($main-color);
}
.light {
color: lighten($main-color, 20%);
}
.dark {
color: darken($main-color, 20%);
}
.transparent {
color: rgba(#C0FFEE, 0.8);
}
CSS généré
.main {
color: #f1a5c0; }
.important {
color: #a5f1d6; }
.light {
color: #fffdfe; }
.dark {
color: #e34d82; }
.transparent {
color: rgba(192, 255, 238, 0.8); }
Sass
.super-boite {
border-radius: 10px;
padding: 10px;
@include simple-shadow;
}
.super-boite-importante {
@extend .super-boite;
color: red;
text-transform: uppercase;
}
CSS généré
.super-boite, .super-boite-importante {
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px #5A1ADE;
}
.super-boite-importante {
color: red;
text-transform: uppercase;
}
Sass
@for $i from 1 through 6 {
.tree-level-#{$i} {
margin-left: 10px*$i;
}
}
CSS généré
.tree-level-1 {
margin-left: 10px;
}
.tree-level-2 {
margin-left: 20px;
}
.tree-level-3 {
margin-left: 30px;
}
.tree-level-4 {
margin-left: 40px;
}
.tree-level-5 {
margin-left: 50px;
}
.tree-level-6 {
margin-left: 60px;
}
gem install compass
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :compact # :expanded or :nested or :compact or :compressed
relative_assets = true
line_comments = false
compass watch
#contenu {
@include background-image(linear-gradient(white, #aaaaaa));
}
#contenu {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
background-image: -o-linear-gradient(#ffffff, #aaaaaa);
background-image: linear-gradient(#ffffff, #aaaaaa);
}
@import "icons/*.png";
.icons-sprite {
background: url('../img/icons-s299f578685.png') no-repeat;
}
Compass a généré une image réunissant toutes les autres (le sprite) à la volée
Sass
@include all-icons-sprites;
CSS généré
.icons-sprite, .icons-smartmap-icon, .icons-star, .icons-twitter, .icons-yata-icon {
background: url('../img/icons-s299f578685.png') no-repeat;
}
.icons-smartmap-icon {
background-position: 0 0;
}
.icons-star {
background-position: 0 -119px;
}
.icons-twitter {
background-position: 0 -103px;
}
.icons-yata-icon {
background-position: 0 -55px;
}
Et n'oubliez pas : arrêter de déprimer, il y a un site pour ça.