/* SCSS */
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2; margin: $margin / 2;
}
/* SASS */
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
SASS
Compiler
CSS
/* CSS EXAMPLE */
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 EXAMPLE */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
/* CSS EXAMPLE */
body {
background-color: #fff;
font-size: 12px;
}
div {
color: #fff;
background-color: #333;
margin: 20px auto;
width: 50%;
}
p {
margin: 5px;
padding: 5px;
color: #333;
line-height: 21px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
margin: 5px 0 0 10px;
text-decoration: underline;
}
/* SCSS EXAMPLE */
$primary-color: #fff;
$secondary-color: #333;
$margin: 5px;
$padding: $margin;
body {
background-color: $primary-color;
font-size: 12px;
}
div {
color: $primary-color;
background-color: $secondary-color;
margin: 20px auto;
width: 50%;
}
p {
margin: $margin;
padding: $margin * 1.5;
color: $secondary-color;
line-height: 21px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
margin: $margin 0 0 10px;
text-decoration: underline;
}
/* SCSS - Using Mixins */
@mixin corners {
border-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}
@mixin yellow_links {
a {
color: yellow;
&:hover {
color: orange;
}
}
h2 {
color: green;
}
}
.block1 {
@include corners;
@include yellow_links;
}
.block2 {
@include corners;
background: #ccc;
}
/* OUTPUT */
.block1 {
border-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.block1 a {
color: yellow;
}
.block1 a:hover {
color: orange;
}
.block1 h2 {
color: green;
}
.block2 {
border-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
background: #ccc;
}
Clone:
git@gitlab.competa.com:training/basic-sass.git
or
https://gitlab.competa.com/training/basic-sass.git
And read the README.md