3. Finale of complete SASS 🤣(longer)

You can read last 2 post from here.
❤part1 - SASS one
❤part2 - SASS two
official sass playground❤

@extend

The @extend directive lets you share a set of CSS properties from one selector to another. The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

source:w3schools

SCSS

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

css

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

By using the @extend directive, you do not need to specify several classes for an element in your HTML code, like this: <button class="button-basic button-report">Report this</button>. You just need to specify .button-report to get both sets of styles.

note:This will keep your code DRY.

SASS String

quote and unquote

Just quote the string

@use "sass:string"
//string.quote(string)
//string.unquote(string)
@debug quote(.widget:hover)  // ".widget:hover"
@debug unquote(".widget:hover")  // .widget:hover

str-index

It return the first occurance with one base indexing.

@use "sass:string"
//string.quote(string,substring)
@debug str-index()

str-insert

Insert at specified index

@use "sass:string"
//str-insert(str,insert,index)
@debug str-insert("hello ","world",7) //hello world

str-length

find the length of the string

@use "sass:string"
//str-length(string)
@debug str-length("hello world!") //12

str-slice

slice works different in sass. It also includes last index.

@use "sass:string"
//str-slice(string,start,end)
@debug str-slice('hello',1,2) //he

to-lower-case and to-upper-case

@use "sass:string"
//to-lower-case(string)
@debug to-lower-case("HELLO") //hello
//to-upper-case(string)
@debug to-upper-case("hello") //HELLO

unique-id()

Returns a unique randomly generated unquoted string (guaranteed to be unique within the current sass session).

SASS Nuber

abs

It invert the values.

//abs(number)  
@debug abs(-15); //15

ceil and floor

Returns the uppermost and lowermost value respectively.

//ceil(number)
//floor(number)
@debug ceil(15.5); //16
@debug floor(15.2); //15

comparable

Checks whether units are same or not

//comparable(num1,num2)
@debug comparable(15px, 10%); //false
@debug comparable(20mm,10cm); //true

max and min

return the highest value among comma seperated

@debug max(1,2,3,4,5); //5
@debug min(-1,2,3,4); //-1

percentage

multiplies value with 100

@debug percentage(1.2); //120

random

It generates a random number. It has two version. With para and without parameter.

random()

//generate a random number btw 0(inclusive) to 1(exclusive)
@debug random(); //0.1234

random(number)

//generate a random number 0(inclusive) to number(exclusive)
@debug random(6); //0.1234

round

Round the number to the nearest integer.

//round(number)
@debug round(12.5); //13

List (datatype)

append function

append an item to end fo the list

//append(list,item,seperator)
//seperator auto,space,comma
@debug append((a, b, c),d,space); // a b c d
@debug append((a, b, c),d,comma); // a,b,c,d

index function

• Returns the index position for the value in list.
• returns null if not found

//index(list,item-to-find)
@debug index((a b c),b); //2
@debug index((a,b,c),b); //2

is-bracketed function

Checks whether the list has square brackets.

//is-bracketed(list)
@debug is-bracketed((1,2,3)); //false
@debug is-bracketed([1,2,3]); //true

join function

//join(list1,list2,seperator)
@debug join((a b c),(d e f), comma); // a,b,c,d,e,f

length function

returns the no of elements in a list

//length(list)
@debug length((a b c)); //3

list-seperator function

returns the list seperator (there are two seperator exists either comma or space)

//list-seperator(list)
@debug list-separator((a b c)); //space
@debug list-separator((a,b,c)); //comma

nth and set-nth function

returns the n-th element in the list.

//nth(list,n)
@debug nth((a b c), 2); //b
@debug nth((a,b,c), 2); //c
//set-nth(list,n,value)
@debug set-nth((a b c), 2 , x); //a x c

zip function

create a multidimensional list

@debug zip(1px 2px 3px,solid dashed dotted,red green orange);
//result:1px solid red,2px dashed green, 3px dotted orange
// it will ommit the list if parameter is missing
@debug zip(1px 2px, solid); //1px solid

map datatype

In Sass, the map data type represents one or more key/value pairs.

map-get

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small")
Result: 12px

map-has-key function

checks whether a key has same pair

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
map-has-key($font-sizes, "big");
//Result: false

map-keys function

returns a list of all keys in map.

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
@debug map-keys($font-sizes);
//Result: "small", "normal, "large"

map-merge function

merges map with othe map.(map1+map2)

//map-merge(map1,map2)
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$font-sizes2: ("x-large": 30px, "xx-large": 36px);
@debug map-merge($font-sizes, $font-sizes2);
// Result: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px

map-remove function

Removes the specified keys from map.

$font-size:("small":12px,"large":50px,"normal":20px);
@debug map-remove($font-sizes, "small", "large");
//Result: ("normal": 20px)

map-values function

returns all values from map.

colors

red,green and blue function

Returns the red value of color as a number between 0 and 255.

//red(color) return red value
@debug red(#fff); //255 🤷‍♀️🤷‍♀️
//green(color)
@debug green(#7fffd4); //255
@debug green(blue); //0
//blue(color) (homework)

opacity function

return alpha value of a color

@debug opacity(rgba(127,255,212,0.5)); //0.5

If you reached here (you are certified css developer)❤

source - w3school
❤ - linkedin follow if you want to