简介
thorazine-sass 是一个基于 Sass 的 CSS 框架，提供一系列样式，可快速构建响应式网站。它的名称来源于一种镇静剂，暗示着稳定的、可靠的风格。
安装
在安装之前，你需要先安装 node.js 和 npm，可以从官方网站下载并安装。
安装 thorazine-sass 很简单，只需要在终端中执行以下命令即可：
npm install thorazine-sass --save
如果你只想在开发环境使用该包，可以用以下命令安装：
npm install thorazine-sass --save-dev
使用
在下载并安装 thorazine-sass 后，你需要将样式引入你的 CSS 文件中，有两种引入方式：
第一种：直接引入样式文件
你可以在你的 SCSS 中直接引入 thorazine-sass 的样式文件：
@import "node_modules/thorazine-sass/scss/thorazine";
这样就能直接使用 thorazine-sass 的所有样式了。
第二种：启动项目使用
如果你是通过搭建项目的方式来使用 thorazine-sass，你可以在你的 webpack.config.js 中进行如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------
---- ---------------- ------------- ---------------
-------- ------------------------ -------------------------------------
--
--
--
--然后在你的 SCSS 中引入样式，例如：
@import 'thorazine';
这样就能启动你的项目并使用 thorazine-sass 的所有样式了。
开始使用
引入 thorazine-sass 后，你就可以使用它提供的所有样式了。下面是一些常用的样式：
响应式网格系统
thorazine-sass 的响应式网格系统是其最重要的特性之一，你可以使用以下类来创建网格：
.container: 创建一个容器，为其赋予内边距，并在移动设备上最大宽度为100%。.column: 创建一个网格列，可以指定不同的长度，例如.column-4表示 4 格大小。.row: 创建一个网格行，包含多个网格列。
<div class="container">
<div class="row">
<div class="column column-4">Column 1</div>
<div class="column column-4">Column 2</div>
<div class="column column-4">Column 3</div>
</div>
</div>颜色
thorazine-sass 提供了一些预设颜色名称和对应的颜色代码，例如：
-- -------------------- ---- ------- -- ------ ------- -------- ------- -------- ------ -------- ----- -------- ------- -------- ------ -------- -------- -------- -------- -------- -------- -------- ------ --------
你可以在你的样式表中直接使用这些颜色来指定颜色属性：
body {
background-color: $gray;
color: $white;
}
a {
color: $red;
}Typography
thorazine-sass 提供了一些预设的字体及字号名称和对应的属性，例如：
// Typography $font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-size-base: 16px; $font-weight-normal: normal; $font-weight-bold: bold; $line-height-base: 1.6;
你可以在你的样式表中使用这些属性来指定字体和字号：
-- -------------------- ---- ------- -- - ---------- ----- ------------ ------------------ - - - ---------- ------- ------------ ------------------ -
边框
thorazine-sass 提供了一些预设的边框名称和对应的属性，例如：
// Borders $border-radius: 3px; $border-width: 1px; $border-color: $gray;
你可以在你的样式表中使用这些属性来指定边框属性，例如：
button {
border-radius: $border-radius;
border: $border-width solid $border-color;
}总结
thorazine-sass 提供了强大而丰富的 CSS 样式库，可用于快速构建响应式网站。通过本文的介绍，你已经知道如何使用 thorazine-sass 的主要特性，可以在项目中应用和定制它的样式，使你的网站变得更具表现力和可操作性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ed81e8991b448e09f1