SASS | Declaración de Propiedad

Las declaraciones de propiedad en SASS se utilizan para definir cómo deben diseñarse los elementos que coinciden con un selector. Junto con eso, SASS agrega algunas características adicionales a las declaraciones de propiedades para que sean más fáciles de escribir y automatizarlas.
En primer lugar, un valor de declaración puede ser cualquier expresión que pueda evaluarse e incluirse en el resultado.
Ejemplo:

.rectangle
  $side: 80px
  width: $side / 2
  length: $side
  border-radius: $side / 4

Esto dará la siguiente salida CSS:

.circle {
  width: 40px;
  length: 80px;
  border-radius: 20px;
}

Interpolación
El nombre de una declaración de propiedad puede consistir en interpolación . Esto permite que SASS genere propiedades dinámicamente de acuerdo con nuestros requisitos. El usuario también puede interpolar el nombre completo de la propiedad.
Ejemplo:

@mixin create($property, $value, $lhs) 
  @each $create in $lhs 
    -#{$create}-#{$property}: $value
  #{$property}: $value
  
.gfg 
  @include create(font, times new roman, moz webkit)

Esto dará la siguiente salida CSS:

.gfg {
  -moz-font: times new roman;
  -webkit-font: times new roman;
  font: times new roman;
}

Anidamiento
Varias propiedades CSS comienzan con el mismo prefijo. Por ejemplo, margen inferior, margen superior, margen izquierdo, margen derecho. SASS con la ayuda de la anidación . SASS lo hace más fácil y menos redundante. Los nombres de propiedad externos se agregan automáticamente a los internos, separados con la ayuda de «-«.
Ejemplo:

.fonts 
  transition-duration: 4s
  font: 
    size: 4px
    family: times new roman
    color: green
    
  
  &:hover  
    font: 
      size: 36px
      color: black

Esto dará la siguiente salida CSS:

.fonts {
  transition-duration: 4s;
  font-size: 4px;
  font-family: times new roman;
  font-color: green;
}
.fonts:hover {
  font-size: 36px;
  font-color: black;
}

Algunas de estas propiedades CSS tienen versiones abreviadas que utilizan el espacio de nombres como nombre de la propiedad. Para estos, puede escribir tanto el valor abreviado como las versiones anidadas más explícitas.
Ejemplo:

.gfg
  margin: auto
    left: 5px
    right: 5px
    bottom: 10px
    top: 2px

Esto dará la siguiente salida CSS:

.gfg {
  margin: auto;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-top: 2px;
}

Declaraciones ocultas
En los casos en que necesite implementar una propiedad solo en algunas condiciones, es decir, solo cuando siguen ciertas propiedades, puede usar las declaraciones ocultas de SASS.
Ejemplo:

$times_new_roman: true
$arial: false
  
.gfg 
  font-size: 5px
  color: if($times_new_roman, green, null)
  color: if($arial, black, null)

Esto dará la siguiente salida CSS:

.gfg {
  font-size: 5px;
  color: green;
}