Sass 用法

变量

在 Sass 中，你可以使用变量来存储一些重复使用的值。这不仅能够简化代码，还能提高代码的可维护性。

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

在上面的例子中，$primary-color 和 $font-stack 是两个变量，分别用于存储主颜色和字体堆栈。

混合器 (Mixins)

混合器是允许你定义一组 CSS 属性，并将其复用于多个地方的功能。它有助于减少代码重复。

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

.box { @include border-radius(10px); }

在这个例子中，border-radius 是一个混合器，可以接受一个参数 $radius。这个混合器被应用到 .box 类上。

函数 (Functions)

函数允许你创建自定义函数来执行特定的计算或操作。这些函数可以在你的样式表中多次调用。

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

.content { width: double(10px); }

这里定义了一个 double 函数，它接收一个参数 $n 并返回其两倍值。该函数被应用于 .content 类的宽度。

条件语句

条件语句让你可以根据某些条件来改变输出。这在处理不同屏幕尺寸的响应式设计时非常有用。

// www.javascriptcn.com code example
$size: 50px;

.item {
  @if $size > 60px {
    font-size: 2em;
  } @else if $size < 30px {
    font-size: 1em;
  } @else {
    font-size: 1.5em;
  }
}

在这个例子中，根据 $size 的值，.item 类的 font-size 将会有所不同。

循环

循环允许你重复执行一段代码。这在需要生成大量具有相同结构但不同值的 CSS 规则时特别有用。

For 循环

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

这段代码将为 .item-1, .item-2 和 .item-3 类生成 CSS 规则。

While 循环

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

在这个例子中，.item-6, .item-4 和 .item-2 类将会被生成，每次循环 $i 都会减少 2。

嵌套

嵌套是 Sass 的一个重要特性，它允许你将选择器嵌套在一起，从而使代码更加整洁和易于管理。

.nav {
  a {
    color: blue;
    &:hover {
      text-decoration: underline;
    }
  }
}

在这个例子中，.nav a 和 .nav a:hover 两个选择器被嵌套在一起。这样，当鼠标悬停在 .nav 下的链接上时，链接文本将会变为下划线。

导入

导入允许你将一个 SCSS 文件的内容包含到另一个文件中。这使得代码组织更加模块化，也便于重用。

// www.javascriptcn.com code example
// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// style.scss
@import 'reset';

body {
  font-family: Arial, sans-serif;
}

在这个例子中，_reset.scss 文件的内容被导入到 style.scss 文件中，从而实现了重置浏览器默认样式的功能。

特性查询

特性查询让你能够针对支持特定 CSS 特性的浏览器应用不同的样式规则。

// www.javascriptcn.com code example
.selector {
  @supports (display: grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  @supports not (display: grid) {
    display: block;
  }
}

在这个例子中，.selector 类下的 display 属性会根据浏览器是否支持 grid 布局而改变。

继承与父选择器引用 (&)

通过使用 & 符号，你可以在子选择器中引用父选择器，从而避免重复书写选择器名称。

.button {
  background-color: blue;
  color: white;

  &:hover {
    background-color: darken(blue, 10%);
  }
}

在这个例子中，:hover 状态下的 background-color 是基于 .button 的背景颜色进行调整的，而不是重复书写整个选择器。

以上就是 Sass 的基本用法，通过灵活运用这些特性，你可以写出更简洁、更高效、更易于维护的 CSS 代码。