SASS脚本介绍

SASS（Syntactically Awesome Style Sheets）是一种样式表预处理器语言，它可扩展 CSS，增加了许多功能和优点，并使 CSS 更容易维护和扩展。

SASS 脚本在编译过程中被转化为普通的 CSS 代码，所以你可以在你的任何一个项目中使用它，并且无需更改浏览器或者服务器的设置。

SASS的优点

• SASS 支持变量，以及嵌套、混合和继承等高级css规则的使用
• SASS 可以将样式表的一个部分应用到一些标签或元素中，而不是整个的CSS文件
• SASS 是基于Ruby编写的，扩展性很强，而且可与其他已经使用 Ruby 的工具集成起来
• SASS 可以使用函数、操作符和语句，轻松地对颜色和数学运算进行操作

SASS的基本语法

变量

在 SASS 中，内置了一个变量功能，它可以让你在样式表中定义变量并且让这些变量随时使用。

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

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

嵌套规则

SASS 允许你使用嵌套规则，以一种更加直观的方式组织样式表，并且可以避免重复的选择器。

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

  li { display: inline-block; }

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

属性继承

SASS 支持使用属性继承，将一个选择器的所有属性继承到另一个选择器中。

.button {
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 16px;
}

.button-primary {
  @extend .button;
  background-color: #428bca;
  color: #fff;
}

混合

SASS 还支持使用混合（mixins），它们允许你定义一组属性集并在样式表中的其他地方重复使用。

@mixin cool-border {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 5px #ccc;
}

.panel {
  @include cool-border;
  padding: 10px;
  background-color: #fff;
}

运算符

SASS 提供了运算符的支持，使得你可以对数字和颜色进行数学运算。

.container {
  width: 100% / 2; /* 50% */
  background-color: #428bca + #333; /* #75a2cc */
  color: #fff - #222; /* #ddd */
}

SASS安装

一般来说，您无需安装 SASS。只需使用命令行编译 SASS 即可。在命令行中运行以下命令即可安装 Sass：

gem install sass

结论

通过使用 SASS，您可以轻松地组织和维护网站样式表，并且可以轻松地进行颜色、数学等多种操作。SASS 可扩展性极强，它可以帮助您创建最流行的 CSS 框架，并将您的工作和其他工具无缝集成。