scss-guides
List of all scss guides - tips and tricks.
Use SassMeister - The live Sass Playground.
sass-lang - Official Sass doc site
Table of Contents
- Variables
- Utilities
- Inheritance
- Mixins
- Import
- List Functions
- Maps
- Math Operators and Functions
- If Directives
- Loops
- Function Directives
- Additional resources for readings
Variables
scss
// Numbers
$width: 200px;
$float: 1.5;
$int: 20;
// Strings
$string: "images/hello.png";
$stringTwo: no-repeat;
$stringSelector: p;
// Colors
$color: gray;
$colorTwo: #ccc;
$colorThree: rgb(230, 230, 230);
// Special cases
$list: 1px 1px 1px black,
3px 3px 3px red;
$map: (
"key1": "value1",
"color": blue
);
$bool: true;
$null: null;
/////////////// USAGE ///////////////
div {
width: $width;
background: url($string) $stringTwo;
box-shadow: $list;
}
div #{$stringSelector} {
color: $color;
background: $colorThree;
padding: $width / $int;
}
css
div {
width: 200px;
background: url("images/hello.png") no-repeat;
box-shadow: 1px 1px 1px black, 3px 3px 3px red;
}
div p {
color: gray;
background: #e6e6e6;
padding: 10px;
}
Utilities
- @degug
Sometimes it’s useful to see the value of a variable or expression while you’re developing your stylesheet. That’s what the @debug rule is for: it’s written @debug , and it prints the value of that expression in the console, along with the filename and line number.
scss
$length: 2;
@debug "length here is #{$length}";
Inheritance
- With descendent selectors
scss
#parent {
background: green;
#child-one {
background: yellow;
font-size: 4px;
}
&.child-two {
padding: 10px;
}
#child-three, .child-four {
border: 1px solid red;
}
button {
background: red;
&:hover {
background: green;
}
}
}
css
#parent {
background: green;
}
#parent #child-one {
background: yellow;
font-size: 4px;
}
#parent.child-two {
padding: 10px;
}
#parent #child-three, #parent .child-four {
border: 1px solid red;
}
#parent button {
background: red;
}
#parent button:hover {
background: green;
}
- With
@extend
keyword
scss
$selectors-list: h1,h2,h3,h4,h5,h6;
%shared-one{
font-size: 2rem;
}
%shared-two{
box-sizing: border-box;
}
%headers{
color: tomato;
}
.para{
@extend %shared-one;
}
.class-three {
padding: 10px;
@extend %shared-one;
}
.class-one, .class-two {
@extend %shared-two;
}
#{$selectors-list}{
@extend %headers;
}
css
.class-three, .para {
font-size: 2rem;
}
.class-one, .class-two {
box-sizing: border-box;
}
.class-three {
padding: 10px;
}
h1, h2, h3, h4, h5, h6 {
color: tomato;
}
Mixins
- Without any arguments
scss
@mixin flex-box {
display: flex;
}
.container {
@include flex-box();
}
css
.container {
display: flex;
}
- With argument
scss
@mixin flex-box($direction) {
display: flex;
flex-direction: $direction;
}
.container {
@include flex-box(row);
}
css
.container {
display: flex;
flex-direction: row;
}
- With arguments and has default value
scss
@mixin flex-box($direction: column) {
display: flex;
flex-direction: $direction;
}
.container {
@include flex-box();
}
css
.container {
display: flex;
flex-direction: column;
}
- With multiple arguments
scss
$width: 100px;
@mixin box($x, $y) {
width: $x;
height: $y;
}
.container {
@include box($width, 50px);
}
css
.container {
width: 100px;
height: 50px;
}
- With
@content
directive
scss
@mixin customKeyframes($name){
@keyframes #{$name}{
@content;
}
}
@include customKeyframes(toast){
0%{
opacity: 0;
}
100% {
opacity: 100%;
}
}
css
@keyframes toast {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
Import
- Importing css file
scss
@import 'base.css';
css
@import url(base.css);
- Importing scss partial file
scss
/* _main.scss file - partial file */
$bgColor: white;
@mixin flex-box(){
display: flex;
}
div {
padding: 20px;
}
/* base.scss */
@import '_main.scss';
p {
background-color: red;
@include flex-box();
color: $bgColor;
}
css
/* base.css */
div {
padding: 20px;
}
p {
background-color: red;
display: flex;
color: white;
}
List Functions
list types
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
- length
Returns the length of $list.
syntax
length($list) //=> number
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
html {
font-size: length($list1);
font-size: length($list2);
font-size: length($list3);
font-size: length($list4);
}
css
html {
font-size: 1;
font-size: 3;
font-size: 3;
font-size: 3;
}
Reference - Official docs for length
- nth
Returns the element of $list at index $n.
If $n is negative, it counts from the end of $list. Throws an error if there is no element at index $n.
syntax
nth($list, $n)
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
html {
font-size: nth($list1, 1);
font-size: nth($list2, 2);
font-size: nth($list3, 3);
font-size: nth($list4, 1);
}
css
html {
font-size: 100px;
font-size: 200px;
font-size: sans-serif;
font-size: 1px 1px 3px black;
}
Reference - Official docs for nth
- set-nth
Returns a copy of $list with the element at index $n replaced with $value.
If $n is negative, it counts from the end of $list. Throws an error if there is no existing element at index $n.
syntax
set-nth($list, $n, $value) //=> list
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
html {
font-size: set-nth($list1, 1, 200px);
font-size: set-nth($list2, 2, 10px);
font-size: set-nth($list3, 3, open-sans);
font-size: set-nth($list4, 1, 3px 2px 1px red);
}
css
html {
font-size: 200px;
font-size: 100px 10px 300px;
font-size: Helvetica, Arial, open-sans;
font-size: 3px 2px 1px red, 3px 1px 3px black, 1px 1px 3px black;
}
Reference - Official docs for set-nth
- list-separator
Returns the name of the separator used by $list, either space, comma, or slash.
If $list doesn’t have a separator, returns space.
syntax
list-separator($list) //=> unquoted string
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
html {
font-size: list-separator($list1);
font-size: list-separator($list2);
font-size: list-separator($list3);
font-size: list-separator($list4);
}
css
html {
font-size: space;
font-size: space;
font-size: comma;
font-size: comma;
}
Reference - Official docs for list-separator
- join
Returns a new list containing the elements of $list1 followed by the elements of $list2.
If $separator is comma, space, or slash, the returned list is comma-separated, space-separated, or slash-separated, respectively. If it’s auto (the default), the returned list will use the same separator as $list1 if it has a separator, or else $list2 if it has a separator, or else space. Other values aren’t allowed.
If $bracketed is auto (the default), the returned list will be bracketed if $list1 is. Otherwise, the returned list will have square brackets if $bracketed is truthy and no brackets if $bracketed is falsey.
syntax
join($list1, $list2, $separator: auto, $bracketed: auto) //=> list
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
$list_with_comma_at_end: 100px 200px 300px,;
html {
font-size: join($list1, $list2, comma);
font-size: join($list2, $list3, space);
font-size: join($list2, $list4);
font-size: join($list_with_comma_at_end, $list4);
}
css
html {
font-size: 100px, 100px, 200px, 300px;
font-size: 100px 200px 300px Helvetica Arial sans-serif;
font-size: 100px 200px 300px 1px 1px 3px black 3px 1px 3px black 1px 1px 3px black;
font-size: 100px 200px 300px, 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
}
Reference - Official docs for join
- append
Returns a copy of $list with $val added to the end.
If $separator is comma, space, or slash, the returned list is comma-separated, space-separated, or slash-separated, respectively. If it’s auto (the default), the returned list will use the same separator as $list (or space if $list doesn’t have a separator). Other values aren’t allowed.
Note that unlike list.join(), if $val is a list it’s nested within the returned list rather than having all its elements added to the returned list.
syntax
append($list, $val, $separator: auto) //=> list
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
html {
font-size: append($list1, $list2);
font-size: append($list2, black);
font-size: append($list3, open-sans, space);
font-size: append($list3, open-sans);
}
css
html {
font-size: 100px 100px 200px 300px;
font-size: 100px 200px 300px black;
font-size: Helvetica Arial sans-serif open-sans;
font-size: Helvetica, Arial, sans-serif, open-sans;
}
Reference - Official docs for append
- index
Returns the index of $value in $list.
If $value doesn’t appear in $list, this returns null. If $value appears multiple times in $list, this returns the index of its first appearance.
syntax
index($list, $value) //=> number | null
scss
$list1: 100px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 1px 1px 3px black, 3px 1px 3px black, 1px 1px 3px black;
html {
font-size: index($list2, 200px);
font-size: index($list2, $list1);
font-size: index($list3, Arial);
font-size: index($list4, 1px 1px 3px black);
font-size: index($list4, 0px); // null will be returned
}
css
html {
font-size: 2;
font-size: 1;
font-size: 2;
font-size: 1;
}
Reference - Official docs for index
- zip
Combines every list in $lists into a single list of sub-lists.
Each element in the returned list contains all the elements at that position in $lists. The returned list is as long as the shortest list in $lists.
The returned list is always comma-separated and the sub-lists are always space-separated.
syntax
zip($lists...) //=> list
scss
$list1: 500px;
$list2: 100px 200px 300px;
$list3: Helvetica, Arial, sans-serif;
$list4: 10px 50px 100px;
$list5: short mid long;
$list6: a b;
$list7: 1 2;
html {
font-size: zip($list4, $list5);
font-size: zip($list6, $list7);
font-size: zip($list2, $list1);
font-size: zip($list3, open-sans);
}
css
html {
font-size: 10px short, 50px mid, 100px long;
font-size: a 1, b 2;
font-size: 100px 500px;
font-size: Helvetica open-sans;
}
Reference - Official docs for zip
Maps
map types
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
- map-keys
Returns a comma-separated list of all the keys in $map.
syntax
map-keys($map) //=> list
scss
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
html {
list: map-keys($map1);
list: map-keys($map2);
list: map-keys($map3);
}
css
html {
list: "key1", "key2", "key3";
list: "color1", "color2";
list: "stringKey", "numberKey", "list", "nestedMap";
}
Reference - Official docs for map-keys
- map-values
Returns a comma-separated list of all the values in $map.
syntax
map-values($map) //=> list
scss
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
html {
list: map-values($map1);
list: map-values($map2);
list: map-values($map3); // won't work for nested maps
}
css
html {
list: "value1", "value2", "value3";
list: red, green;
}
Reference - Official docs for map-values
- map-has-key
If $keys is empty, returns whether $map contains a value associated with $key.
syntax
map-has-key($map, $key, $keys...) //=> boolean
scss
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
html {
boolean: map-has-key($map1, 'key1');
boolean: map-has-key($map2, 'color1');
boolean: map-has-key($map3, 'color');
boolean: map-has-key($map3, 'nestedMap', 'color');
}
css
html {
boolean: true;
boolean: true;
boolean: false;
boolean: true;
}
Reference - Official docs for map-has-key
- map-get
If $keys is empty, returns the value in $map associated with $key.
If $map doesn’t have a value associated with $key, returns null.
syntax
map-get($map, $key, $keys...)
scss
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
html {
value: map-get($map1, 'key1');
value: map-get($map2, 'color1');
value: map-get($map3, 'list');
value: map-get($map3, 'nestedMap', 'url');
}
css
html {
value: "value1";
value: red;
value: 100px, 200px;
value: "image/photo.png";
}
Reference - Official docs for map-get
- map-merge
If no $keys are passed, returns a new map with all the keys and values from both $map1 and $map2.
If both $map1 and $map2 have the same key, $map2‘s value takes precedence.
All keys in the returned map that also appear in $map1 have the same order as in $map1. New keys from $map2 appear at the end of the map.
syntax
map-merge($map1, $map2)
map-merge($map1, $keys..., $map2) //=> map
scss
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
$mergedMap1: map-merge($map1, $map2);
$mergedMap2: map-merge($map2, $map3);
html {
keys: map-keys($mergedMap1);
value: map-values($mergedMap1);
}
div {
keys: map-keys($mergedMap2); // no nested keys will be returned
values: map-values($mergedMap2); // does not work for nested maps
}
css
html {
keys: "key1", "key2", "key3", "color1", "color2";
value: "value1", "value2", "value3", red, green;
}
div {
keys: "color1", "color2", "stringKey", "numberKey", "list", "nestedMap";
}
Reference - Official docs for map-merge
- map-remove
Returns a copy of $map without any values associated with $keys.
If a key in $keys doesn’t have an associated value in $map, it’s ignored.
syntax
map-remove($map, $keys...) //=> map
scss
$map1: (
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
);
$map2: ( 'color1': red, 'color2': green);
$map3: (
'stringKey': 'stringValue',
'numberKey': 20,
'list': (100px, 200px),
'nestedMap': (
'color': red,
'url': 'image/photo.png'
)
);
$removedMap1: map-remove($map2, 'color1');
$removedMap2: map-remove($map1, 'key1', 'key2');
$removedMap3: map-remove($map3, 'nestedMap', 'color'); // does not work for nested maps
html {
keys: map-keys($removedMap1);
value: map-values($removedMap1);
}
div {
keys: map-keys($removedMap2);
value: map-values($removedMap2);
}
p {
keys: map-keys($removedMap3);
}
css
html {
keys: "color2";
value: green;
}
div {
keys: "key3";
value: "value3";
}
p {
keys: "stringKey", "numberKey", "list";
}
Reference - Official docs for map-remove
Math Operators and Functions
math operators types
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
// Addition
div {
width: $a + $b;
width: #{($a + $b)}px;
width: $x + $y;
width: $a + $x;
width: $a + 50;
}
// Subtraction
div {
width: $b - $a;
width: #{($b - $a)}px;
width: $y - $x;
width: $x - $y;
width: $x - $a;
width: $z - 50;
}
// Multiplication
div {
width: $b * $a;
width: #{($b * $a)}px;
width: $z * 50;
width: $x * $a;
//width: $y * $x; // invalid
}
// Division
div {
width: $b / $a;
width: #{($b / $a)}px;
width: $z / 50;
width: $x / $a;
width: $y / $x; // px will be stripped
}
// Combined
div {
width: $b * $a + $x;
width: $b * $a + $x * $c / $z; // px will be stripped due to division
width: $a + $b + ($x * $c); // bracket will be calculated first, then rest will proceed
}
css
// Addition
div {
width: 30;
width: 30px;
width: 170px;
width: 90px;
width: 60;
}
// Subtraction
div {
width: 10;
width: 10px;
width: 10px;
width: -10px;
width: 70px;
width: 50px;
}
// Multiplication
div {
width: 200;
width: 200px;
width: 5000px;
width: 800px;
}
// Division
div {
width: 2;
width: 2px;
width: 2px;
width: 8px;
width: 1.125;
}
// Combined
div {
width: 280px;
width: 224;
width: 2430px;
}
- round
Rounds $number to the nearest whole number.
syntax
round($number) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: round($eq1);
width: round($eq2);
}
css
div {
width: 2;
width: 3px;
}
Reference - Official docs for round
- floor
Rounds $number down to the next lowest whole number.
syntax
floor($number) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: floor($eq1);
width: floor($eq2);
}
css
div {
width: 1;
width: 2px;
}
Reference - Official docs for floor
- ceil
Rounds $number up to the next highest whole number.
syntax
ceil($number) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: ceil($eq1);
width: ceil($eq2);
}
css
div {
width: 2;
width: 3px;
}
Reference - Official docs for ceil
- percentage
Converts a unitless $number (usually a decimal between 0 and 1) to a percentage.
syntax
percentage($number) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: percentage($eq1);
width: percentage(0.4);
width: percentage($c);
width: percentage($b / $a);
//width: percentage($eq2); // invalid
}
css
div {
width: 150%;
width: 40%;
width: 3000%;
width: 200%;
}
Reference - Official docs for percentage
- abs
Returns the absolute value of $number. If $number is negative, this returns -$number, and if $number is positive, it returns $number as-is.
syntax
abs($number) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: abs($eq1);
width: abs(-4px);
width: abs($c - $x);
width: abs($eq2);
}
css
div {
width: 1.5;
width: 4px;
width: 50px;
width: 2.6666666667px;
}
Reference - Official docs for abs
- min
Returns the lowest of one or more numbers.
syntax
min($number...) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: min($eq1, $a, $b);
width: min($x, $y, $z);
width: min($x, $y, $b, $c);
}
css
div {
width: 1.5;
width: 80px;
width: 20;
}
Reference - Official docs for min
- max
Returns the lowest of one or more numbers.
syntax
max($number...) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: max($eq1, $a, $b);
width: max($x, $y, $z);
width: max($x, $y, $b, $c);
}
css
div {
width: 20;
width: 100px;
width: 90px;
}
Reference - Official docs for max
- random
If $limit is null, returns a random decimal number between 0 and 1.
syntax
random($limit: null) //=> number
scss
$a: 10;
$b: 20;
$c: 30;
$x: 80px;
$y: 90px;
$z: 100px;
$eq1: $c / $b; // 1.5
$eq2: $x / $c; // 2.6666666667px
div {
width: random();
width: random(5);
width: random(4);
}
css
div {
width: 0.1495831532;
width: 5;
width: 1;
}
Reference - Official docs for random
If Directives
- @if
scss
$element: h1;
$number: 10;
$sum: 10 + 2;
html {
@if ($number == 10){
width: #{$number}px;
}
}
@if ($element == h1){
#{$element}{
padding: 10px;
}
}
css
html {
width: 10px;
}
h1 {
padding: 10px;
}
- @else
scss
$element: h1;
$number: 10;
$sum: 10 + 2;
html {
@if ($number != 10){
width: #{$number}px;
}
@else {
width: 12px;
}
}
@if ($element != h1){
#{$element}{
padding: 10px;
}
}
@else {
h3{
padding: 15px;
}
}
css
html {
width: 12px;
}
h3 {
padding: 15px;
}
- @else if
scss
$element: h1;
$number: 10;
$sum: 10 + 2;
html {
@if ($number != 10){
width: #{$number}px;
}
@else if ($number == 11) {
width: 11px;
}
@else if ($sum != 12) {
width: 12px;
}
@else if ($number + 2 == 13) {
width: 13px;
}
@else {
width: 14px;
}
}
css
html {
width: 14px;
}
Loops
- @for
scss
$headers: h1,h2,h3;
$fontSize: 55,60,65;
// Example 1
@for $i from 1 through 3{
h#{$i}{
font-size: #{5+$i}px;
}
}
// Example 2
@for $i from 1 through length($headers){
#{nth($headers,$i)}{
font-size: #{nth($fontSize,$i)}px;
}
}
css
// Example 1
h1 {
font-size: 6px;
}
h2 {
font-size: 7px;
}
h3 {
font-size: 8px;
}
// Example 2
h1 {
font-size: 55px;
}
h2 {
font-size: 60px;
}
h3 {
font-size: 65px;
}
- @each
scss
$headers: h1,h2,h3;
$fontSize: 55,60,65;
$headersMap: (
h1: 55,
h2: 60
);
// Example 1
@each $head in $headers {
#{$head}{
font-size: 5px;
}
}
// Example 2
@each $head, $font in $headersMap {
#{$head}{
font-size: #{$font}px;
}
}
css
// Example 1
h1 {
font-size: 5px;
}
h2 {
font-size: 5px;
}
h3 {
font-size: 5px;
}
// Example 2
h1 {
font-size: 55px;
}
h2 {
font-size: 60px;
}
- @while
scss
$headers: h1,h2,h3;
$fontSize: 55,60,65;
$index: 1;
// Example 1
@while $index < length($headers){
#{nth($headers, $index)}{
font-size: #{nth($fontSize, $index)}px;
}
$index: $index + 1; // increment the index here
}
// Example 2
@while $index <= length($headers){
#{nth($headers, $index)}{
font-size: #{nth($fontSize, $index)}px;
}
$index: $index + 1; // increment the index here
}
css
// Example 1
h1 {
font-size: 55px;
}
h2 {
font-size: 60px;
}
// Example 2
h1 {
font-size: 55px;
}
h2 {
font-size: 60px;
}
h3 {
font-size: 65px;
}
Function Directives
scss
$fontSize: 55,60,65;
@function get-head($fonts, $num) {
$font: nth($fonts, $num);
@return #{$font}px;
}
h1 {
font-size: get-head($fontSize, 3);
}
css
h1 {
font-size: 65px;
}