Sass的基本语法

Sass是一种CSS预处理器，扩展了CSS的功能，提供了变量、嵌套、混合等特性，让样式表更易维护和扩展。下面详细介绍Sass的基本语法和常见用法。

变量

Sass使用$符号定义变量，方便复用值。变量可以存储颜色、字体、尺寸等任何CSS属性值。

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$base-padding: 10px;

body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $base-padding;
}

编译后的CSS：

body {
  font-family: Helvetica, sans-serif;
  color: #3498db;
  padding: 10px;
}

变量也支持运算：

$base-margin: 20px;
$double-margin: $base-margin * 2;

嵌套

Sass允许嵌套CSS规则，使结构更清晰。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    &:hover {
      color: red;
    }
  }
}

编译后的CSS：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
}
nav a:hover {
  color: red;
}

&符号表示父选择器，常用于伪类和伪元素。

混合（Mixins）

混合允许定义可重用的样式块，支持参数传递。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

编译后的CSS：

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

混合也可以设置默认值：

@mixin box-shadow($x: 0, $y: 0, $blur: 5px, $color: #000) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow($y: 10px);
}

继承

使用@extend可以共享一组CSS属性。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

编译后的CSS：

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

运算

Sass支持基本的数学运算，包括加减乘除和取模。

.container {
  width: 100% - 20px;
  height: 300px / 960px * 100%;
  font-size: 12px + 2px;
}

颜色也可以运算：

$primary-color: #036;

.header {
  background-color: $primary-color + #333;
}

控制指令

Sass提供@if、@for、@each和@while等控制指令。

@if

$theme: dark;

body {
  @if $theme == dark {
    background: black;
    color: white;
  } @else {
    background: white;
    color: black;
  }
}

@for

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 50px * $i;
  }
}

编译后的CSS：

.item-1 {
  width: 50px;
}
.item-2 {
  width: 100px;
}
.item-3 {
  width: 150px;
}

@each

$colors: red, green, blue;

@each $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i - 2;
}

函数

Sass内置了许多有用的函数，也可以自定义函数。

@function double($n) {
  @return $n * 2;
}

.sidebar {
  width: double(100px);
}

颜色函数示例：

$primary-color: #036;

.button {
  background-color: lighten($primary-color, 20%);
  color: darken($primary-color, 10%);
}

导入

Sass支持@import指令，可以将多个Sass文件合并为一个。

// _variables.scss
$primary-color: #333;

// styles.scss
@import 'variables';

body {
  color: $primary-color;
}

导入的文件如果以下划线开头（如_variables.scss），则不会单独编译为CSS文件。

注释

Sass支持单行注释//和多行注释/* */。单行注释不会出现在编译后的CSS中。

// 这是单行注释，不会出现在CSS中
/* 这是多行注释，会出现在CSS中 */

占位符选择器

占位符选择器以%开头，只有在被@extend引用时才会生成CSS。

%button-style {
  padding: 10px;
  border-radius: 5px;
}

.submit-button {
  @extend %button-style;
  background: blue;
}

.cancel-button {
  @extend %button-style;
  background: red;
}

数据类型

Sass支持多种数据类型：

• 数字：1, 2.5, 10px
• 字符串："foo", 'bar', baz
• 颜色：#fff, rgba(0,0,0,0.5)
• 布尔值：true, false
• 空值：null
• 列表：1px 2px 3px, Helvetica, Arial, sans-serif
• 映射：(key1: value1, key2: value2)

$font-sizes: (small: 12px, medium: 16px, large: 20px);

.heading {
  font-size: map-get($font-sizes, large);
}