SASS | Property Declaration
Last Updated :
23 Jun, 2020
Property Declarations in SASS are used to define how the elements matching a selector need to be styled. Along with that SASS adds some extra features to property declarations in order to make them easier to write and to automate them.
Firstly, a declaration value can be any expression which can be evaluated and included in the result.
Example:
.rectangle
$side: 80px
width : $side / 2
length: $side
border-radius: $side / 4
|
This will give the following CSS output:
.circle {
width: 40px;
length: 80px;
border-radius: 20px;
}
Interpolation
A property declaration’s name may consist of interpolation. This allows SASS to dynamically generate properties according to our requirement. User can also interpolate the entire property name.
Example:
@mixin create($property, $value, $lhs)
@each $create in $lhs
-#{$create}-#{$property}: $value
#{$property}: $value
.gfg
@include create(font, times new roman, moz webkit)
|
This will give the following CSS output:
.gfg {
-moz-font: times new roman;
-webkit-font: times new roman;
font: times new roman;
}
Nesting
Various CSS properties start with the same prefix. For example- margin-bottom, margin-top, margin-left, margin-right. SASS with the help of nesting. SASS makes it easier and less redundant. The outer property names are automatically added to the inner ones, separated with the help of “-“.
Example:
.fonts
transition-duration: 4 s
font :
size : 4px
family: times new roman
color : green
&:hover
font :
size : 36px
color : black
|
This will give the following CSS output:
.fonts {
transition-duration: 4s;
font-size: 4px;
font-family: times new roman;
font-color: green;
}
.fonts:hover {
font-size: 36px;
font-color: black;
}
Some of these CSS properties have shorthand versions that use the namespace as the property name. For these, you can write both the shorthand value and the more explicit nested versions.
Example:
.gfg
margin : auto
left : 5px
right : 5px
bottom : 10px
top : 2px
|
This will give the following CSS output:
.gfg {
margin: auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
margin-top: 2px;
}
Hidden Declarations
In cases when you need to implement a property only in some conditions i.e only when certain properties follow, you can use the hidden declarations of SASS.
Example:
$times_new_roman: true
$ arial : false
.gfg
font-size : 5px
color : if($times_new_roman, green , null)
color : if($ arial , black , null)
|
This will give the following CSS output:
.gfg {
font-size: 5px;
color: green;
}
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...