Sassy CSS Sassy Buttons 技术文档

2024-12-23 14:09:54作者：明树来

打造超炫CSS3按钮，Sassy Buttons为你提供简单易用的Compass框架。五种渐变风格——简约、磨砂、闪亮、玻璃和扁平，赋予按钮独特视觉效果。三种文本样式——内嵌、凸起和默认，让文字与按钮融为一体。预设可定制的SASS变量，轻松调整默认样式。附加的阴影效果让你的按钮更具立体感。立即体验，让按钮设计变得游刃有余！

项目地址：https://gitcode.com/gh_mirrors/sa/Sassy-Buttons

本文档将为您提供详细的安装指南、使用说明以及项目API使用文档，帮助您更好地理解和使用 Sassy Buttons。

1. 安装指南

安装 Sassy Buttons

首先，您需要通过命令行安装 Sassy Buttons：

(sudo) gem install sassy-buttons

接着，编辑项目的配置文件，添加以下代码：

require 'sassy-buttons'

然后，在命令行中执行以下命令：

compass install sassy-buttons

最后，在您的 sass/scss 文件中引入 Sassy Buttons：

@import "sassy-buttons";

在 Rails 3.1 上安装 Sassy Buttons

在您的项目 Gemfile 中，添加以下行到 :assets 组：
```
gem 'sassy-buttons'
```
编辑 application.css 或 .sass|.scss 文件，在 assets/stylesheets 文件夹中添加以下代码：
```
@import "sassy-buttons";
```
执行以下命令来绑定您的宝石，以便 compass 使用 Sassy Buttons 插件：
```
$ bundle install
```

安装 Sassy Buttons 资源：

$ bundle exec compass install sassy-buttons

2. 项目的使用说明

Sassy Buttons 提供了一个 mixin 来创建按钮，以下是使用该 mixin 的基本方法：

@include sassy-button; // 使用默认设置

您还可以使用可选参数来自定义按钮：

@include sassy-button("matte", 15px, 20px, rgba(11, 153, 194, 1)); // 自定义样式

完整的 Sassy Button mixin 语法如下：

@include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states);

3. 项目API使用文档

以下是 Sassy Buttons 提供的 mixin 和变量：

@include sassy-button: 主要 mixin，用于创建按钮。
@include sassy-button-style: 为按钮添加额外的样式。
@include sassy-button-structure: 用于按钮结构的 mixin。
@include sassy-button-gradient: 用于按钮渐变样式的 mixin。

Sassy Buttons 还提供了一组默认的 Sass 变量，这些变量用于创建按钮：

$sb-base-color: rgba(11, 153, 194, 1) !default;
$sb-second-color: false !default;
$sb-border-radius: 5px !default;
$sb-padding: 0.3em 1.5em !default;
$sb-font-size: 16px !default;
$sb-text-color: white !default;
$sb-text-style: "inset" !default;
$sb-gradient-style: "simple" !default;
$sb-pseudo-states: true !default;
$sb-ie-support: false !default;
$sb-line-height: 1.5 !default;