Sass 常用技巧

说明

Sass (SCSS) 是 CSS 的预处理器，提供了变量、嵌套、混合等强大功能，能显著提升开发效率。

变量与嵌套

变量 (Variables)

使用 $ 定义变量，方便统一管理颜色、字体等。

$primary-color: #1890ff;
$font-size-base: 14px;

.btn {
  color: $primary-color;
  font-size: $font-size-base;
}

嵌套 (Nesting)

减少重复代码，体现 HTML 结构关系。

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

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}

父选择器 (&)

引用父级选择器，常用于伪类或 BEM 命名。

.btn {
  background: #ccc;

  &:hover {
    background: #aaa;
  }

  &--primary {
    background: blue;
  }
}

Mixins (混合)

封装可重用的代码块。

常用 Mixin：媒体查询断点

$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}.";
  }
}

// 使用
.container {
  width: 100%;

  @include respond-to('md') {
    width: 750px;
  }
}

常用 Mixin：文本截断

@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
    overflow: hidden;
  }
}

// 使用
.title {
  @include text-ellipsis(1);
}

.desc {
  @include text-ellipsis(2);
}

内置函数

Sass 提供了丰富的内置函数，特别是颜色处理。

// 颜色变亮
$light-color: lighten(#000, 20%);

// 颜色变暗
$dark-color: darken(#fff, 20%);

// 调整透明度
$transparent-color: rgba(#000, 0.5);

// 混合颜色
$mixed-color: mix(#f00, #00f);