3. Finale of complete SASS 🤣(longer)
Tags: css, tailwindcss, scss, sass
Published: 2024-07-06 12:55:15

You can read last 2 post from here.
[❤part1 - SASS one](https://dev.to/aryan015/scss-complete-guide-part-one-4d03)
[❤part2 - SASS two](https://dev.to/aryan015/aryans-scss-complete-guide-part-2-1p1i)
[official sass playground❤](https://sass-lang.com/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](https://www.w3schools.com/sass/sass_extend.php)  
`SCSS`
```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`
```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
```scss
@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.
```scss
@use "sass:string"
//string.quote(string,substring)
@debug str-index()
```
### `str-insert`
Insert at specified index
```scss
@use "sass:string"
//str-insert(str,insert,index)
@debug str-insert("hello ","world",7) //hello world
```
### `str-length`
find the length of the string
```scss
@use "sass:string"
//str-length(string)
@debug str-length("hello world!") //12
```
### `str-slice`
slice works different in sass. It also includes last index.
```scss
@use "sass:string"
//str-slice(string,start,end)
@debug str-slice('hello',1,2) //he
```
### `to-lower-case` and `to-upper-case`
```scss
@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.
```scss
//abs(number)  
@debug abs(-15); //15
```
### `ceil` and `floor`
Returns the uppermost and lowermost value respectively.
```scss
//ceil(number)
//floor(number)
@debug ceil(15.5); //16
@debug floor(15.2); //15
```
### `comparable`
Checks whether units are same or not
```scss
//comparable(num1,num2)
@debug comparable(15px, 10%); //false
@debug comparable(20mm,10cm); //true
```
### `max` and `min`
return the highest value among comma seperated
```scss
@debug max(1,2,3,4,5); //5
@debug min(-1,2,3,4); //-1
```

### `percentage`
multiplies value with 100
```scss
@debug percentage(1.2); //120
```
### random
It generates a random number. It has two version. With para and without parameter.
#### `random()`
```scss
//generate a random number btw 0(inclusive) to 1(exclusive)
@debug random(); //0.1234
```
#### `random(number)`
```scss
//generate a random number 0(inclusive) to number(exclusive)
@debug random(6); //0.1234
```
### `round`
Round the number to the nearest integer.
```scss
//round(number)
@debug round(12.5); //13
```
## List (datatype)
### `append` function
append an item to end fo the list
```scss
//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
```scss
//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.
```scss
//is-bracketed(list)
@debug is-bracketed((1,2,3)); //false
@debug is-bracketed([1,2,3]); //true
```

### `join` function
```scss
//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
```scss
//length(list)
@debug length((a b c)); //3
```

### `list-seperator` function
returns the list seperator (there are two seperator exists either comma or space)
```scss
//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.
```scss
//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
```scss
@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`
```scss
$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
```scss
$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.
```scss
$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)
```scss
//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.
```scss
$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.
```scss
//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
```scss
@debug opacity(rgba(127,255,212,0.5)); //0.5
```
## If you reached here (you are certified css developer)❤
[source - w3school](https://www.w3schools.com/sass/default.php)
[❤ - linkedin](https://www.linkedin.com/in/aryan-khandelwal-779b5723a/) follow if you want to