Skip to content

Instantly share code, notes, and snippets.

@martinDolan
Last active Oct 15, 2019
Embed
What would you like to do?
SASS Examples
h1 {
color: white;
background-color: blue;
}
h1:nth-of-type(2) {
background-color: #60609f;
}
h1:nth-of-type(3) {
background-color: #797986;
}
<div class="container">
<h1>Color Functions</h1>
<h1>Color Functions</h1>
<h1>Color Functions</h1>
</div>
$color: blue;
h1 {
color: white;
background-color: $color;
&:nth-of-type(2) {
background-color: scale-color($color, $saturation: -75%);
}
&:nth-of-type(3) {
background-color: scale-color($color, $saturation: -95%);
}
}
Line 2 CSS: 20%
Line 5 CSS: 51
Line 7 CSS: 20%
Line 8 CSS: false
/* Log lightness to console */
@debug lightness(#333);
/* Log red component to console */
@debug red(#333);
/* Log saturation component to console */
@debug saturation(#e1d7d2);
/* Evaluate expression to console */
@debug saturation(#e1d7d2) > 50;
h1 {
background-color: #f33;
color: white;
}
h1:nth-of-type(2) {
background-color: darkcyan;
color: white;
}
<div class="container">
<h1>Default color</h1>
<h1>Color passed in</h1>
</div>
@mixin alert-text($color: #f33) {
background-color: $color;
color: white;
}
h1 {
@include alert-text();
&:nth-of-type(2) {
@include alert-text(darkcyan);
}
}
.p-t-5 {
padding-top: 5px;
}
.p-t-10 {
padding-top: 10px;
}
.p-t-15 {
padding-top: 15px;
}
.p-t-20 {
padding-top: 20px;
}
.p-t-25 {
padding-top: 25px;
}
.p-t-30 {
padding-top: 30px;
}
.p-t-35 {
padding-top: 35px;
}
.p-t-40 {
padding-top: 40px;
}
.p-t-45 {
padding-top: 45px;
}
.p-t-50 {
padding-top: 50px;
}
.p-b-5 {
padding-bottom: 5px;
}
.p-b-10 {
padding-bottom: 10px;
}
.p-b-15 {
padding-bottom: 15px;
}
.p-b-20 {
padding-bottom: 20px;
}
.p-b-25 {
padding-bottom: 25px;
}
.p-b-30 {
padding-bottom: 30px;
}
.p-b-35 {
padding-bottom: 35px;
}
.p-b-40 {
padding-bottom: 40px;
}
.p-b-45 {
padding-bottom: 45px;
}
.p-b-50 {
padding-bottom: 50px;
}
/*A few basic styles for the text boxes */
.container {
display: flex;
flex-direction: column;
}
.container p {
background-color: cadetblue;
width: 300px;
text-align: center;
}
<div class="container">
<p class="p-t-5 p-b-5">top & bottom padding of 5px</p>
<p class="p-t-20 p-b-20">top & bottom padding of 20px</p>
<p class="p-t-50 p-b-50">top & bottom padding of 50px</p>
</div>
@for $i from 1 through 10 {
.p-t-#{$i * 5} {
padding-top: #{$i * 5}unquote(px);
}
}
@for $i from 1 through 10 {
.p-b-#{$i * 5} {
padding-bottom: #{$i * 5}unquote(px);
}
}
/*A few basic styles for the text boxes */
.container {
display: flex;
flex-direction: column;
p {
background-color: cadetblue;
width: 300px;
text-align: center;
}
}
h1 {
background-color: #ececec;
color: white;
color: black;
}
h1:nth-of-type(2) {
background-color: #333333;
color: white;
}
<div class="container">
<h1>Outcome 1</h1>
<h1>Outcome 2</h1>
</div>
@mixin contrast-set($color) {
background-color: $color;
color: white;
@if lightness($color) > 50 {
color: black;
}
}
h1 {
@include contrast-set(#ececec);
&:nth-of-type(2){
@include contrast-set(#333333);
}
}
h1 {
background-color: #333;
color: white;
}
h1:nth-of-type(2) {
background-color: #333;
color: white;
opacity: 0.75;
}
<div class="container">
<h1>No opacity passed in</h1>
<h1>Opacity amount passed in</h1>
</div>
@mixin example($opacity: null) {
background-color: #333;
color: white;
opacity: $opacity;
}
h1 {
@include example();
&:nth-of-type(2) {
@include example(0.75);
}
}
.container .text {
background-color: aquamarine;
}
<div class="container">
<p class="text">Sometimes it makes sense to target a parent </p>
</div>
.text {
.container & {
background-color: aquamarine;
}
}
.container {
background-color: cadetblue;
color: aliceblue;
}
.container.alt {
background-color: crimson;
color: coral;
}
<div class="container">
<h1>Oh hai.</h1>
</div>
<div class="container alt">
<h1>Oh hai.</h1>
</div>
%color-set-a {
background-color: cadetblue;
color: aliceblue;
}
%color-set-b {
background-color: crimson;
color: coral;
}
.container {
@extend %color-set-a;
}
.container {
&.alt{
@extend %color-set-b;
}
}
/**
Brand X Color Reference
Red is: #f94f4f
Dark Grey is: #3a3a3a
Dark Grey is: #c1c1c1
**/
$brand-red: #f94f4f;
$brand-dark-grey: #3a3a3a;
$brand-light-grey: #c1c1c1;
/**
Brand X Color Reference
Red is: #{$brand-red}
Dark Grey is: #{$brand-dark-grey}
Dark Grey is: #{$brand-light-grey}
**/
.container {
background-color: aquamarine;
}
.container-pink {
background-color: pink;
}
<div class="container">
<p class="text">Some text</p>
</div>
<div class="container-pink">
<p class="text">A bit more text</p>
</div>
.container {
background-color: aquamarine;
&-pink {
background-color: pink;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment