Sass 基本语法

Sass提供了比CSS更强大的语法功能，使样式表编写更加灵活和高效。本章将详细介绍Sass的基本语法。

变量 (Variables)

Sass使用$符号定义变量，可以存储颜色、字体、尺寸等值。

基本变量定义

scss

// 颜色变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;

// 尺寸变量
$font-size-base: 16px;
$border-radius: 4px;
$spacing-unit: 8px;

// 字体变量
$font-family-primary: 'Helvetica Neue', Arial, sans-serif;
$font-family-secondary: 'Georgia', serif;

// 使用变量
.header {
  background-color: $primary-color;
  color: $text-color;
  font-family: $font-family-primary;
  font-size: $font-size-base;
  border-radius: $border-radius;
}

变量作用域

scss

$global-var: red;

.component {
  $local-var: blue; // 局部变量
  color: $global-var; // 使用全局变量
  border-color: $local-var; // 使用局部变量
  
  .nested {
    color: $global-var; // 可以访问全局变量
    // border-color: $local-var; // 错误：无法访问父级的局部变量
  }
}

!default 标志

使用!default为变量设置默认值：

scss

// _variables.scss
$primary-color: #3498db !default;
$font-size: 16px !default;

// main.scss
$primary-color: #e74c3c; // 会覆盖默认值
$font-size: 18px !default; // 不会覆盖，因为$font-size已经定义

.element {
  color: $primary-color; // #e74c3c
  font-size: $font-size; // 16px (默认值)
}

嵌套 (Nesting)

Sass允许在选择器中嵌套其他选择器，使代码结构更清晰。

基本嵌套

scss

.navbar {
  background-color: #333;
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
    
    a {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      color: white;
      
      &:hover {
        background-color: #555;
      }
    }
  }
}

父选择器引用 (&)

使用&引用父选择器：

scss

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  
  // 伪类
  &:hover {
    background-color: #0056b3;
  }
  
  &:focus {
    outline: 2px solid #007bff;
  }
  
  // 状态类
  &.active {
    background-color: #28a745;
  }
  
  &.disabled {
    background-color: #6c757d;
    cursor: not-allowed;
  }
  
  // 位置选择器
  .sidebar & {
    margin: 10px 0;
  }
  
  // 组合选择器
  & + & {
    margin-left: 10px;
  }
}

注释

Sass支持两种注释：

scss

/* 这种注释会出现在编译后的CSS中 */
// 这种注释不会出现在编译后的CSS中

.element {
  color: red; // 这行注释不会出现在CSS中
  /* 这行注释会出现在CSS中 */
  background-color: blue;
}

导入 (Import)

使用@import导入其他Sass文件：

scss

// _variables.scss
$primary-color: #3498db;

// _mixins.scss
@mixin button-style {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

// main.scss
@import 'variables';
@import 'mixins';

.button {
  @include button-style;
  background-color: $primary-color;
}

混合宏 (Mixins)

混合宏允许您定义可重用的样式块。

基本混合宏

scss

// 定义混合宏
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 使用混合宏
.box {
  @include border-radius(10px);
}

带默认值的参数

scss

@mixin button-style($bg-color: #007bff, $text-color: white, $padding: 10px 20px) {
  background-color: $bg-color;
  color: $text-color;
  padding: $padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// 使用默认值
.default-btn {
  @include button-style;
}

// 覆盖部分默认值
.custom-btn {
  @include button-style(#28a745, #fff);
}

多参数混合宏

scss

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

.card {
  @include box-shadow(2px, 2px, 10px, rgba(0,0,0,0.1));
}

@content 指令

允许在混合宏中插入额外内容：

scss

@mixin media-query($device) {
  @if $device == mobile {
    @media screen and (max-width: 768px) { @content; }
  }
  @else if $device == tablet {
    @media screen and (min-width: 769px) and (max-width: 1024px) { @content; }
  }
  @else if $device == desktop {
    @media screen and (min-width: 1025px) { @content; }
  }
}

.header {
  width: 100%;
  
  @include media-query(mobile) {
    font-size: 14px;
  }
  
  @include media-query(desktop) {
    font-size: 18px;
  }
}

继承 (Extend/Inheritance)

使用@extend使一个选择器继承另一个选择器的样式：

scss

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

.success {
  @extend .message;
  border-color: #28a745;
  background-color: #d4edda;
  color: #155724;
}

.error {
  @extend .message;
  border-color: #dc3545;
  background-color: #f8d7da;
  color: #721c24;
}

// 编译后的CSS会优化选择器
// .message, .success, .error { ... }

控制指令

@if, @else if, @else

条件判断：

scss

@mixin theme-color($theme) {
  @if $theme == primary {
    background-color: #007bff;
    color: white;
  }
  @else if $theme == secondary {
    background-color: #6c757d;
    color: white;
  }
  @else if $theme == success {
    background-color: #28a745;
    color: white;
  }
  @else {
    background-color: #f8f9fa;
    color: #212529;
  }
}

.btn-primary {
  @include theme-color(primary);
}

.btn-secondary {
  @include theme-color(secondary);
}

@for 循环

scss

// 从1到5
@for $i from 1 through 5 {
  .col-#{$i} {
    width: $i * 20%;
  }
}

// 从0到4
@for $i from 0 to 5 {
  .item-#{$i} {
    margin-left: $i * 10px;
  }
}

@each 循环

遍历列表或映射：

scss

// 遍历列表
$colors: red, blue, green;

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

// 遍历映射
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745
);

@each $name, $color in $theme-colors {
  .btn-#{$name} {
    background-color: $color;
    border-color: $color;
    
    &:hover {
      background-color: darken($color, 10%);
      border-color: darken($color, 10%);
    }
  }
}

@while 循环

scss

$i: 1;
@while $i <= 5 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}

插值 (Interpolation)

使用#{}在选择器、属性或值中插入变量：

scss

$name: foo;
$attr: border;

// 选择器插值
p.#{$name} {
  #{$attr}-color: blue;
}

// 属性插值
$side: left;
$radius: 10px;

.box {
  border-#{$side}-radius: $radius;
}

// URL插值
$image-name: 'logo';
.icon {
  background-image: url('/images/#{$image-name}.png');
}

列表操作

scss

// 定义列表
$font-stack: helvetica, arial, sans-serif;
$primary-colors: (red, blue, green);

// 使用nth函数获取列表元素
$first-color: nth($primary-colors, 1); // red

// 使用length函数获取列表长度
$list-length: length($font-stack); // 3

// 遍历列表
@each $color in $primary-colors {
  .bg-#{$color} {
    background-color: $color;
  }
}

映射操作

scss

// 定义映射
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "danger": #dc3545
);

// 使用map-get函数获取值
$primary: map-get($theme-colors, "primary");

// 遍历映射
@each $name, $color in $theme-colors {
  .text-#{$name} {
    color: $color;
  }
}

这些基本语法构成了Sass的核心功能，掌握它们将使您能够编写更加灵活和可维护的样式代码。

Sass 基本语法 #

变量 (Variables) #

基本变量定义 #

变量作用域 #

!default 标志 #

嵌套 (Nesting) #

基本嵌套 #

父选择器引用 (&) #

注释 #

导入 (Import) #

混合宏 (Mixins) #

基本混合宏 #

带默认值的参数 #

多参数混合宏 #

@content 指令 #

继承 (Extend/Inheritance) #

控制指令 #

@if, @else if, @else #

@for 循环 #

@each 循环 #

@while 循环 #

插值 (Interpolation) #

列表操作 #

映射操作 #

Sass 基本语法

变量 (Variables)

基本变量定义

变量作用域

!default 标志

嵌套 (Nesting)

基本嵌套

父选择器引用 (&)

注释

导入 (Import)

混合宏 (Mixins)

基本混合宏

带默认值的参数

多参数混合宏

@content 指令

继承 (Extend/Inheritance)

控制指令

@if, @else if, @else

@for 循环

@each 循环

@while 循环

插值 (Interpolation)

列表操作

映射操作