# @doabit/semantic-ui-sass 中文文档

规范地址：https://npmcn.com/package/%40doabit/semantic-ui-sass/

版本：2\.4\.5
npm 元数据更新时间：2022-04-05T05:01:40.306Z
中文译文更新时间：2026-11-12T13:34:43.108Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40doabit/semantic-ui-sass
原文对照：https://npmcn.com/package/%40doabit/semantic-ui-sass/?lang=original
项目主页：https://github.com/doabit/semantic-ui-sass#readme
源码仓库：https://github.com/doabit/semantic-ui-sass

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.5 MB，102 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2021-06-18T19:37:22.142Z
- 最新版本发布：2021-06-20T16:43:41.900Z
- 近 30 天下载量：3786（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

语义- ui- sass npm 软件包

## 安装

```sh
npm install @doabit/semantic-ui-sass
```

也可以使用：`pnpm add @doabit/semantic-ui-sass`、`yarn add @doabit/semantic-ui-sass`、`bun add @doabit/semantic-ui-sass`

## README

# Sass 语义UI

`semantic-ui-sass` 是 Sass 驱动的版本 [语义UI](https://github.com/Semantic-Org/Semantic-UI) 准备降落 进入铁道,指南针,或螺旋桨.

[![Build Status](https://travis-ci.org/doabit/semantic-ui-sass.svg?branch=master)](https://travis-ci.org/doabit/semantic-ui-sass)

## 页:1

宝石只有默认主题 .

## 安装和使用

```ruby
gem 'semantic-ui-sass'
```

`bundle install` 并重新启动您的服务器,以便通过 输油管.

# 带有铁道或螺旋桨的语义- ui- sass

## 支助科

在 SCSS 文件中导入语义( 例如, ), `application.css.scss`获得一切 语义的风格

```css
@import 'semantic-ui';
```

也可以包括模块

```css
@import 'semantic-ui/collections/menu';
```

## 自定义字体

```css
$font-url: 'http://fonts.useso.com/css?family=Lato:400,700,400italic,700italic&subset=latin';
@import 'semantic-ui';
```

## 跳过字体加载

```css
$import-google-fonts: false;
@import 'semantic-ui';
```

## 自定义字体家族

```css
$font-family: 'custom-font-family';
@import 'semantic-ui';
```

### 跳过自定义滚动条的使用

```css
$use-custom-scrollbars: false;
@import 'semantic-ui';
```

## 所有变量,你可以自定义其中任何

字体 :

```css
$font-name: 'Lato' !default;
$font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
$import-google-fonts: true !default;
```

滚动栏 :

```css
$use-custom-scrollbars: true !default;
```

断点 :

```css
$mobile-breakpoint: 320px !default;
$tablet-breakpoint: 768px !default;
$computer-breakpoint: 992px !default;
$large-monitor-breakpoint: 1200px !default;
$widescreen-monitor-breakpoint: 1920px !default;
```

## 爪哇脚本

### Ruby on Rails 版本 5

我们有个帮手 包括所有语义的Javascript。 把这个放进你的 Javascript 运算符( 通常在 `application.js`改为:

```js
// Loads all Semantic javascripts
//= require semantic-ui
```

也可以装入单个模块,条件是您还需要任何 依赖性.

```js
//= require semantic-ui/modal
//= require semantic-ui/dropdown
```

### Ruby on Rails 版本 6+ 有网络包装器

用纱线添加包 :

```console
yarn add jquery popper.js @doabit/semantic-ui-sass
```

在配置/网包/环境.js中,增加以下内容:

```js
const webpack = require('webpack')

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
```

在app/javascript/packs/applications.js中,增加以下内容:

```js
import '@doabit/semantic-ui-sass'
```

如果您使用 `webpakcer` 要导入样式表,请添加

```js
import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'
```

# 语义学 - ui - ass with Copass

## 新项目

安装宝石并使用宝石创建新工程.

```console
gem install semantic-ui-sass
compass create compass-project -r semantic-ui-sass --using semantic-ui
```

这会解决一些问题:

-   你会有一个开始 `styles.scss`
-   您将获得一个编译的样式表, 并准备降入您的 应用程序
-   我们还会把语义的javascripts和图像与字体复制到他们的 各个文件夹

## 现有项目

安装宝石, 在配置上方添加所需语句 文件,并安装扩展名.

```console
gem install semantic-ui-sass
```

```ruby
# In config.rb
require 'semantic-ui-sass'
```

```console
compass install semantic-ui
```

### 页:1

当使用指南针时,您应该访问本地服务器中的文件, eg `http://localhost:3000/index.html`,而不是 `file:///Users/doabit/demo/index.html`

# 铁路辅助人员

## 面包屑帮助器

添加面包屑帮助器 `<%= semantic_breadcrumbs %>` 到您的布局.

```ruby
class ApplicationController
  semantic_breadcrumb :index, :root_path
end
```

```ruby
class ExamplesController < ApplicationController
  semantic_breadcrumb :index, :examples_path

  def index
  end

  def show
    @example = Example.find params[:id]
    semantic_breadcrumb @example.name, example_path(@example)
    # semantic_breadcrumb :show, example_path(@example)
  end
end
```

## 闪光助手

添加闪存帮助 `<%= semantic_flash %>` 到您的布局

## 图标助手

```ruby
semantic_icon('add')
# => <i class="add icon"></i>
semantic_icon(:add)
# => <i class="add icon"></i>
semantic_icon('add sign')
# => <i class="add sign icon"></i>
semantic_icon('add', 'sign')
# => <i class="add sign icon"></i>
semantic_icon(:add, :sign)
# => <i class="add sign icon"></i>
semantic_icon('add', id: 'id')
# => <i class="add icon" id="id"></i>
```

## 开始

-   添加全局变量
-   添加栏杆帮助器 `render_flash`? 吗?

## 捐款

1.  叉开它
2.  创建您的特性分支( E)`git checkout -b my-new-feature`(中文(简体) )
3.  提交更改( E)`git commit -am 'Add some feature'`(中文(简体) )
4.  推向分行(`git push origin my-new-feature`(中文(简体) )
5.  创建新的拉请求

## 常见问题

### @doabit/semantic-ui-sass 是什么？

语义- ui- sass npm 软件包

### 如何安装 @doabit/semantic-ui-sass？

在项目目录运行 npm install @doabit/semantic-ui-sass，或使用 pnpm add / yarn add / bun add。

### @doabit/semantic-ui-sass 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/doabit\_\_semantic-ui-sass 是否存在。

### @doabit/semantic-ui-sass 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @doabit/semantic-ui-sass 可以商用吗？

@doabit/semantic-ui-sass 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @doabit/semantic-ui-sass 的下载量有多少？

根据 npm 官方下载统计，@doabit/semantic-ui-sass 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,786 次，日均约 126 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @doabit/semantic-ui-sass 还在维护吗？

最新版本 2\.4\.5 发布于 2021/06/21（5 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/06/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。