SASS |财产申报

SASS 中的属性声明用于定义匹配选择器的元素需要如何设置样式。除此之外，SASS 还为属性声明添加了一些额外的功能，以使其更易于编写和自动化。
首先，声明值可以是任何可以计算并包含在结果中的表达式。
例子：

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

这将给出以下 CSS 输出：

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

插值
属性声明的名称可能包含插值。这允许 SASS 根据我们的要求动态生成属性。用户还可以插入整个属性名称。
例子：

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

这将给出以下 CSS 输出：

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

嵌套
各种 CSS 属性以相同的前缀开头。例如-下边距、上边距、左边距、右边距。 SASS 在嵌套的帮助下。 SASS 使它变得更容易并且更少冗余。外部属性名称会自动添加到内部属性名称中，并在“-”的帮助下分隔。
例子：

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

这将给出以下 CSS 输出：

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

其中一些 CSS 属性具有使用命名空间作为属性名称的简写版本。对于这些，您可以编写速记值和更明确的嵌套版本。
例子：

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

这将给出以下 CSS 输出：

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

隐藏声明
如果您只需要在某些条件下实现某个属性，即仅当某些属性出现时，您可以使用 SASS 的隐藏声明。
例子：

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

这将给出以下 CSS 输出：

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