This content originally appeared on DEV Community and was authored by aryan015
You can read last 2 post from here.
❤part1 - SASS one
❤part2 - SASS two
@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
to be continue...
This content originally appeared on DEV Community and was authored by aryan015
aryan015 | Sciencx (2024-07-06T12:55:15+00:00) 3. Finale of complete SASS 🤣(longer). Retrieved from https://www.scien.cx/2024/07/06/3-finale-of-complete-sass-%f0%9f%a4%a3longer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.