SASS/SCSS 示例

SASS/SCSS 简介

SASS（Syntactically Awesome Style Sheets）是一种 CSS 的预处理器，它可以让编写 CSS 更加简单、直观。使用 SASS 可以在 CSS 中使用类似编程语言的语法，包括变量、函数、条件语句、循环等。

SCSS（Sassy CSS）是 SASS 3 引入的新语法，它是一种严格的语法规则，与 CSS 更加相似，更易于学习和使用。

安装和配置

在使用 SASS/SCSS 之前，需要先安装 Sass 命令行工具。可以通过 RubyGems 包管理器进行安装，命令如下：

gem install sass

安装完成之后，可以通过以下命令检查是否安装成功：

sass --version

如果输出了版本号，则说明安装成功。

基本语法

变量

可以使用变量存储颜色、字体、大小等常用属性值：

$primary-color: #009688;
$font-size: 14px;

然后可以在样式中使用这些变量：

body {
  background-color: $primary-color;
  font-size: $font-size;
}

嵌套

使用 SASS/SCSS 可以嵌套选择器，使得样式更加清晰：

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

    li { display: inline-block; }

    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
}

混合

混合可以把一些常用的样式定义封装起来，用来重复使用：

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

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

继承

使用继承可以避免重复的样式：

.button {
  padding: 6px 12px;
  border-radius: 4px;
}

.button-primary {
  @extend .button;
  background-color: #009688;
  color: white;
}

条件语句和循环

使用条件语句和循环可以动态生成样式：

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

$directions: top, right, bottom, left;

@mixin margin-directions($values) {
  @each $dir in $directions {
    margin-#{$dir}: nth($values, index($directions, $dir));
  }
}

.box {
  @include margin-directions(10px 20px 30px 40px);
}

编译和使用

使用 Sass 编写的样式文件需要编译成 CSS 文件才能在浏览器中使用，可以使用命令行工具进行编译：

sass input.scss output.css

也可以使用特定的工具进行编译，例如 Gulp、Grunt 等。

在 HTML 中引用编译后的 CSS 文件即可：

<link rel="stylesheet" href="output.css">

总结

SASS/SCSS 可以帮助开发者更加便捷地编写 CSS 样式文件，提高了代码的复用性和可维护性。以上介绍了 SASS/SCSS 的基本语法和使用方法，了解了这些内容之后，可以开始享受 SASS/SCSS 带来的便利了！