Sass

Sass
( Syntactically Awesome Style Sheets )
Scss
(SCSS is called Sassy CSS)
( Sassy Cascading Style Sheets)

// Sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
// Scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Final Output css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Syntax

#plain-text {
content: "I'm 1 + 2 years old";
}
#interpolated {
content: "I'm #{1 + 3} years old";
}
1 + 1 //2 (addition)
1 - 1 //0 (subtraction)
2 * 3 //6 (multiplication)
(6 / 3) //2 (division, see below for an explanation of the parentheses)
5 % 2 //5 (modulus)
Final Output
#plain-text {
}
#interpolated {
content: "I'm 4 years old";
}
Scss – Basic Arithmetic

$width: 800px;
.container-1 {
width: $width;
}
.column-2 {
width: $width / 2;
}
.column-3 {
width: $width / 5;
}
Final Output
.container-1 {
width: 800px;
}
.column-2 {
width: 400px;
}
.column-3 {
width: 160px;
}
Scss – Basic Arithmetic

#plain-text {
}
#interpolated {
content: "I'm #{1 + 3} years old";
}
5 < 3 //false (less than)
5 > 3 //true (greater than)
3 <= 3 //true (less than or equal to)
5 >= 3 //true (greater than or equal to)
Final Output
#plain-text {
}
#interpolated {
content: "I'm 4 years old";
}
Scss – Comparison Operators

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
h1.title {
font: $title-font;
color: $cool-red;
}
div.container {
color: $cool-red;
background: #fff;
width: 100%;
box-shadow: $box-shadow-bottom-only;
}
Final Output
h1.title {
font: normal 24px/1.5 "Open Sans", sans-serif;
color: #F44336;
}
div.container {
color: #F44336;
background: #fff;
width: 100%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}
Scss - Variables

Sass @-Rules and Directives
@import
@media
@extend
@include

@Import
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
background-color: #efefef;
}
Final Output
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
background-color: #efefef;
}

@Media
$size: 100px;
.box {
width:$size;
@media (min-width: 800px) {
width:$size + 50;
@media (max-width: 1200px) {
width:$size * 2;
}
}
}
Final Output
.box {
width: 100px;
}
@media (min-width: 800px) {
.box {
width: 150px;
}
}
@media (min-width: 800px) and (max-width: 1200px) {
.box {
width: 200px;
}
}

@Nesting
ul {
list-style: none;
li {
padding: 15px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #444;
}
}
}
Final Output
ul {
list-style: none;
}
ul li {
padding: 15px;
display: inline-block;
}
ul li a {
text-decoration: none;
font-size: 16px;
color: #444;
}

@Extend
.dialog-button {
box-sizing: border-box;
color: #ffffff;
padding: 12px 40px;
cursor: pointer;
}
.confirm {
@extend .dialog-button;
background-color: #87bae1;
float: left;
}
.cancel {
@extend .dialog-button;
background-color: #e4749e;
float: right;
}
Final Output
.dialog-button, .confirm, .cancel {
box-sizing: border-box;
color: #fff;
padding: 12px 40px;
cursor: pointer;
}
.confirm {
background-color: #87bae1;
float: left;
}
.cancel {
background-color: #e4749e;
float: right;
}

@for
@for $i from 1 to 5 {
.padding-#{$i} {
padding: $i;
}
}
Final Output
.padding-1 {
padding: 1;
}
.padding-2 {
padding: 2;
}
.padding-3 {
padding: 3;
}
.padding-4 {
padding: 4;
}
@for $i from 1 through 5 {
.padding-#{$i}{ padding: $i;}
}
Final Output
.padding-1 {
padding: 1;
}
.padding-2 {
padding: 2;
}
.padding-3 {
padding: 3;
}
.padding-4 {
padding: 4;
}
.padding-5 {
padding: 5;
}

@for
$color: "blue", "green", "orange", "red",
"pink", "grey", "black";
@for $i from 1 through length($color){
.color-#{ nth($color, $i) }
{
color: #{ nth($color, $i)
}
}
}
Final Output
.color-blue {
color: blue;
}
.color-green {
color: green;
}
.color-orange {
color: orange;
}
.color-red {
color: red;
}
.color-pink {
color: pink;
}
.color-grey {
color: grey;
}

@while
$i: 1;
@while $i <= 5 {
wd-#{$i}{
width: #{$i};
}
$i: $i + 1;
}
Final Output
wd-1 {
width: 1;
}
wd-2 {
width: 2;
}
wd-3 {
width: 3;
}
wd-4 {
width: 4;
}
wd-5 {
width: 5;
}

@Each
$colour: (
red: #00ff00,
green: #ff0000,
blue: #0000ff,
lightgreen: #ff00ff,
lightblue: #ffff00);
@each $labelname, $colouritem in $colour {
.#{$labelname} {
color: $colouritem;
}
}
Final Output
.red {
color: #00ff00;
}
.green {
color: #ff0000;
}
.blue {
color: #0000ff;
}
.lightgreen {
color: #ff00ff;
}
.lightblue {
color: #ffff00;
}

@Each
$headings: h1, h2, h3, h4, h5;
$size: 10px, 20px, 30px, 40px, 50px;
$head-size: zip($headings, $size);
@each $a in $head-size {
.display-#{nth($a, 1)} {
font-size: nth($a, 2);
}
}
Final Output
.display-h1 {
font-size: 10px;
}
.display-h2 {
font-size: 20px;
}
.display-h3 {
font-size: 30px;
}
.display-h4 {
font-size: 40px;
}
.display-h5 {
font-size: 50px;
}

@mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.my-other-element {
@include border-radius(5px);
}
Final Output
.my-other-element {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

@mixin
@mixin transform-tilt() {
$tilt: rotate(15deg);
-webkit-transform: $tilt;
-ms-transform: $tilt;
transform: $tilt;
}
.frame {
@include transform-tilt;
}
Final Output
.frame {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}

@mixin square($size, $color) {
width: $size;
height: $size;
background-color: $color;
}
.small-blue-square {
@include square(20px, rgb(0,0,255));
}
.big-red-square {
@include square(300px, rgb(255,0,0));
}
@mixin
Final Output
.small-blue-square {
width: 20px;
height: 20px;
background-color: #00f;
}
.big-red-square {
width: 300px;
height: 300px;
background-color: #f00;
}

Sass

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Sass

Semelhante a Sass (20)

Último

Último (20)

Sass