Thursday, October 23, 2025
HomeLanguagesJavascriptSASS | Property Declaration

SASS | Property Declaration

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: 4s
  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;
}
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32361 POSTS0 COMMENTS
Milvus
88 POSTS0 COMMENTS
Nango Kala
6728 POSTS0 COMMENTS
Nicole Veronica
11892 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11954 POSTS0 COMMENTS
Shaida Kate Naidoo
6852 POSTS0 COMMENTS
Ted Musemwa
7113 POSTS0 COMMENTS
Thapelo Manthata
6805 POSTS0 COMMENTS
Umr Jansen
6801 POSTS0 COMMENTS