样式表的结构

与CSS一样,大多数Sass样式表主要由包含属性声明的样式规则组成。但是Sass样式表具有许多可以与这些样式一起存在的功能。

声明永久链接声明

Sass样式表由一系列语句组成,对这些语句进行评估以构建最终的CSS。某些语句可能具有使用和定义的,其中包含其他语句。例如,样式规则是带有块的语句。该块包含其他语句,例如属性声明。{}

SCSS中,语句用分号分隔(如果该语句使用块,则这些分号是可选的)。在缩进语法中,它们只是由换行符分隔。

通用声明永久链接通用声明

这些类型的语句可以在Sass样式表中的任何位置使用:

CSS语句永久链接 CSS 语句

这些语句产生CSS。它们可以在以下任何地方使用@function

顶级声明永久链接顶级声明

这些语句只能在样式表的顶层使用,或嵌套在CSS语句的顶层:

其他声明永久链接其他声明

  • 像这样的属性声明width: 100px  只能在样式规则和某些CSS  规则中使用。
  • @extend规则只能在样式规则中使用。

表达式永久链接表达式

一个表达式是任何的推移的特性或变量声明的右手侧。每个表达式产生一个。任何有效的CSS  属性值也是Sass表达式,但是Sass表达式比纯CSS值强大得多。它们作为参数传递给mixin  和函数,用于@if规则控制流,并使用算术进行操作。我们将Sass的表达式语法称为SassScript

文字固定链接文字

最简单的表达式仅表示静态值:

  • 数字,可能有也可能没有单位,例如12 或100px
  • 字符串,可以带或不带引号,例如"Helvetica Neue"或  bold
  • 颜色,可以用其十六进制表示形式或名称来表示,例如#c6538c或  blue
  • 布尔文字true或  false
  • 单身人士null
  • 值的列表,其可以由空格或逗号并且其可以被包含在方括号或没有括号可言,等进行分离1.5em 1em 0 2emHelvetica, Arial, sans-serif或  [col1-start]
  • 将值与键相关联的地图,例如("background": red, "foreground": pink)

运营永久运营

Sass为许多操作定义了语法:

  • ==!=用于检查两个值是否相同。
  • +-*/,并%有数字他们通常的数学含义,同时,对于在科学的数学使用单位的一致单位特殊行为。
  • <<=>,并>=检查是否两个数字都大于或小于另一个。
  • andornot具有通常的布尔行为。Sass认为除false 和之外的每个值都是“ true” null
  • +-/可用于连接字符串。
  • (并且)可以用来显式控制操作的优先顺序。

其他表达式永久链接其他表达式

  • 变量,例如  $var
  • 函数调用(例如nth($list, 1) 或var(--main-bg-color))可以调用Sass核心库函数或用户定义的函数,也可以直接编译为  CSS。
  • 特殊功能(例如calc(1px + 100%) 或url(http://myapp.com/assets/logo.png))具有自己独特的解析规则。
  • 父选择,  &
  • !important,被解析为无引号的字符串。