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
nullif 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
Top comments (0)