Sass使用手册（第一章）

### 前言

**!!! 编码：sass文件的编码格式、sass文件第一行首先要声明的配置,通常是UTF-8 !!!**

### 一、语法

####  1. 引用

Sass和css一样不强制使用引号包裹字符串，但是为了避免错误的可能，还是建议在Sass中始终使用单引号`''`包裹,如颜色属性不包裹时，会被解析为颜值。

#### 2. 数字

在 Sass 中，数字类型包括了长度、持续时间、频率、角度以及无单位数值等等。Sass 允许在运行中计算这些度量值。

##### 2.1 零值

`0`只有在标识长度属性时才可以忽略单位，如`0px`。但比如transition-delay的时间属性等,可能在浏览器之间存在解析差异。

##### 2.2 小数

当数字小于 1 时，应该在小数点前写出 0. 永远不要显示小数尾部的 0。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">.text{ 
         padding: 0.5em,
         font-size: 20px,
       }</code></pre></div>

##### 2.3 urls

引用的链接，应该使用单引号包裹，如`url('../img/bg.jpg')`。

##### 2.4 计算

数值的运算，高优先级应该使用括号括起来，如`(1 + 2) * 3`。

#### 3. 颜色

Sass建议优先使用以下颜色类型：HSL,RGB,16进制(尽可能简写)。

##### 3.1 常见颜色模型

HSL,即Hue(色相)，Saturation(饱和度)，Lightness(亮度)。可以将该色彩模型看作一个**圆柱体**，圆柱体的底面圆心为中心建立三维直角坐标。HSL把颜色描述为在圆柱坐标系内的点，这个圆柱的中心轴底部为黑色，顶部为白色，而它们中间是灰色渐变，绕这个轴的角度对应于“色相”(Hue)，到这个轴的距离对应于“饱和度”(Saturation)，取0-100%的数值。而沿着这个轴的高度对应于“亮度”(Lightness)，取0-100%的数值。
具体可看下图:

下面时Sass推荐的几种颜色表示方法：

<div class="code-toolbar"><pre class="language-none line-numbers"><code class="language-none">//使用hsl或者rgb通常在`,`后加一个空格
// Yep
.foo {
  color: hsl(0, 100%, 50%);
}

// Also yep
.foo {
  color: rgb(255, 0, 0);
}

// Meh
.foo {
  color: #f00;
}</code></pre></div>

##### 3.2 颜色和变量

**声明**：当某个颜色被多个地方同时使用时，可以使用变量来声明、但对于主题项目来说，可以使用另一个变量来标识颜色变量。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">$primary-color:hsl(240, 30%, 45%);

$main-parimary-color: $primary-color;</code></pre></div>

**颜色变暗、变量**：已有的`lighten`和`darken`函数可以变亮或者变暗，但变化比较僵硬。通过`mix`函数混入white或者black来实现渐变地变亮或变暗，以下是mix函数的基本语法：

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">/*
* 	@params:$color1:要混合的颜色1、$color2:要混合的颜色2、$weight:混入颜色$color1所占的比例
*	@method:以何种颜色模型混合hsl, hwb, lch, oklch
*/

$color.mix($color1, $color2, $weight, $method: null) => color;</code></pre></div>

通过定义简易函数并返回mix后的color：

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">//入参数说明
/**
*@params:$color需要混合的颜色，$percentage:white或这black在混入中所占的比例
**/

//明亮混入
@function tint($color, $percentage){
    return mix(white, $color, $percentage)
}

//变暗混入
@function shade($color, $percentage){
    return mix(black, $color, $percentage)
}</code></pre></div>

#### 4. 列表

列表就是 Sass 的数组。列表是一个一维的数据结构（不同于 [maps](https://sass-guidelin.es/zh/#maps)），用于保存任意类型的数值（包括列表，从而产生嵌套列表）。列表需要遵守以下规范：

- 除非列表太长不能写在 80 字符宽度的单行中，否则应该始终单行显示；
- 除非适用于 CSS，否则应该始终使用逗号作为分隔符；
- 要么使用内联形式，要么使用多行形式；
- 始终使用括号包裹；
- 始终不要添加尾部的逗号。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">// 正确格式
$font-stack: ('Helvetica', 'Arial', sans-serif);

$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
);

//错误格式
$font-stack: 'Helvetica' 'Arial' sans-serif;

$font-stack: 'Helvetica', 'Arial', sans-serif;

$font-stack: ('Helvetica', 'Arial', sans-serif,);

//使用专有API向列表中添加元素

$shadows: (0 42px 13.37px hotpink);

$shadows: append($shadows, $shadow, comma);</code></pre></div>

#### 5. Maps

在 Sass 中，样式开发者可以使用 map 这种数据结构 —— Sass 团队使 map 可以映射关联数组、哈希表甚至是 JavaScript 对象。map 是一种映射任何类型的键值对，包括内嵌类型的 map，但是我不建议使用 map 存储复杂数据类型。

map 的使用应该遵循下述规范：

- 冒号(`:`)之后添加空格；
- 左开括号(`(`)要和冒号 (`:`)写在同一行；
  - 如果键是字符串（99% 都是字符串），则**使用 `‘’` 包裹起来**。
- 每一个键值对单独一行；
- 每一个键值对以逗号(`,`)结尾；
- 为最后一个键值对添加**尾部逗号** (`,`)，方便添加新键值对、删除和重排已有键值对；
- 单独一行书写右闭括号 (`)`)；
- 右闭括号 (`)`)和分号(`;`)之间不使用空格和换行。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );</code></pre></div>

#### 6. CSS规则集

- 相关联的选择器写在同一行；不相关联选择器分行书写；
- 最后一个选择器和左开大括号(`{`)中间书写一个空格；
- 每个声明单独一行；
- 冒号(`:`)后添加空格；
- 所有声明的尾部都添加一个分号 (`;`)；
- 右闭大括号(`}`)单独一行；
- 右闭大括号(`}`)添加空行。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}</code></pre></div>

#### 7.  选择嵌套器

Sass推荐使用不超过三层嵌套、在最外层选择器中嵌套伪类和伪元素是推荐的，此外还有`最近选择器引用(&)`来实现高级嵌套。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">//基础嵌套
.foo {
    .bar {
        &:hover {
            color:red;
        }
    }
}
//生成的css代码
.foo .bar:hover{
    color:red;
}

//高级嵌套
.foo {
    &-bar {
        color:red;
    }
}

//生成的css代码
.food-bar {
    color:red;
}</code></pre></div>

### 二、命名约定

良好的命名对保持整体代码的一致性和可读性非常重要，在 Sass 中可以命名的有：`变量`、`函数`、`混合宏`，格式上采用**小写连字符分隔**。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">$vertical-rhythm-baseline: 1.5rem;

@mixin size($width, $height: $width) {
  // …
}

@function opposite-direction($direction) {
  // …
}</code></pre></div>

#### 1. 常量

如果你正在使用的某个变量几乎不需要更新，那么它近似于常量。Sass中不存在相关关键字来声明，因此通过严格约束命名来约束常量。Sass使用全大写字母与小写连接符`_`组合来标识这一特征。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">$CSS_POSITIONS: (top, right, bottom, left, center);</code></pre></div>

#### 2. 命名空间

当一个Sass文件被另一个Sass文件引用时，很难不发生样式冲突的情况，为了避免样式冲突，使用命名空间给所有的成员都添加某个前缀：

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">$su-configuration: ( … );

@function su-rainbow($unicorn) {
  // …
}

//私有成员:给成员添加-前缀，使其在其他引用中无法访问,避免样式冲突
$-radius: 3px;</code></pre></div>

此外还有引用的命名空间，通常时文件路径不包含后缀的最后（如：src/corners => corners ）:

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

// style.scss,默认命名空间
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

// style.scss,指定命名空间
@use "src/corners" as x;

.button {
  @include x.rounded;
  padding: 5px + x.$radius;
}</code></pre></div>

### 三、注释

简洁地注释任何代码无疑对提升代码可读性十分重要。Sass文件主要有以下两类注释：标识注释、文档注释。

#### 1. 标识注释

任何CSS 规则集之前都应该使用 C 风格注释来解释 CSS 块的核心。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">/**
 * Helper class to truncate and add ellipsis to a string too long for it to fit
 * on a single line.
 * 1. Prevent content from wrapping, forcing it on a single line.
 * 2. Add ellipsis at the end of the line.
 */
.ellipsis {
  white-space: nowrap; /* 1 */
  text-overflow: ellipsis; /* 2 */
  overflow: hidden;
}</code></pre></div>

当注释某一特定部分时，应该使用 Sass 单行注释而不是 C 风格的注释块，这么做将不会输出注释。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">// Add current module to the list of imported modules.
// `!global` flag is required so it actually updates the global variable.
$imported-modules: append($imported-modules, $module) !global;</code></pre></div>

#### 2. 文档注释

每一个旨在代码库中复用的变量、函数、混合宏和占位符，都应该使用 [SassDoc](http://sassdoc.com/) 记录下来作为全部 API 的一部分。文档注释的作用：

- 作为公有或私有 API 的一部分，在所有的地方使用一个注释系统强制标准化注释。
- 通过使用任意的 SassDoc 终端(CLI tool, Grunt, Gulp, Broccoli, Node…)，能够生成 API 文档的 HTML 版本。

### 四、结构

#### 1. 组件、组件结构

#### 2. 7-1模式

**7-1 模式**的结构：7 个文件夹，1 个文件。基本上，你需要将所有的部件放进 7 个不同的文件夹和一个位于根目录的文件（通常命名为 `main.scss`）中——这个文件编译时会引用所有文件夹而形成一个 CSS 样式表。

为了保持可读性，主文件 `mian.scss` 应遵守如下准则：

- 每个 `@import`引用一个文件；
- 每个 `@import`单独一行；
- 从相同文件夹中引入的文件之间不用空行；
- 从不同文件夹中引入的文件之间用空行分隔；
- 忽略文件扩展名和下划线前缀。

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";

@import "vendors/bootstrap";
@import "vendors/jquery-ui";

@import "base/reset";
@import "base/typography";

@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";

@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "components/dropdown";

@import "pages/home";
@import "pages/contact";

@import "themes/theme";
@import "themes/admin";</code></pre></div>

#### 3. Globbing

在 Sass 中，可以在入口文件中通过通配符 `*` 扩展的形式导入其他文件，导入后的入口文件类似如下所示：

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">@import "abstracts/*";
@import "vendors/*";
@import "base/*";
@import "layout/*";
@import "components/*";
@import "pages/*";
@import "themes/*";</code></pre></div>

#### 4. shame文件

所有不推荐的行为整合到一个shame.scss文件中，比如强制覆盖某些已有的样式等...

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">/**
 * Nav specificity fix.
 *
 * Someone used an ID in the header code (`#header a {}`) which trumps the
 * nav selectors (`.site-nav a {}`). Use !important to override it until I
 * have time to refactor the header stuff.
 */
.site-nav a {
  color: #bada55 !important;
}</code></pre></div>

### 五、响应式设计与断点

#### 1. 断点命名

断点名称通常使用具有范围性概念的词语，而应当避免使用某类宽泛设备如 `table`、`phone`、`tv`：

<div class="code-toolbar"><pre class="language-scss line-numbers"><code class="language-scss">// Yep
$breakpoints: (
  "medium": (
    min-width: 800px
  ),
  "large": (
    min-width: 1000px
  ),
  "huge": (
    min-width: 1200px
  )
);

// Nope
$breakpoints: (
  "tablet": (
    min-width: 800px
  ),
  "computer": (
    min-width: 1000px
  ),
  "tv": (
    min-width: 1200px
  )
);</code></pre></div>

#### 2. 断点管理器

在实际使用断点名称的过程中，需要一个断点管理器去匹配

#### 3. 媒体查询的使用

本文由 yuin 创作，
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。