Sass使用手册（第一章）

前言

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

一、语法

1. 引用

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

2. 数字

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

2.1 零值

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

2.2 小数

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

      .text{ 
         padding: 0.5em,
         font-size: 20px,
       }

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推荐的几种颜色表示方法：

//使用hsl或者rgb通常在`,`后加一个空格
// Yep
.foo {
  color: hsl(0, 100%, 50%);
}

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

// Meh
.foo {
  color: #f00;
}

3.2 颜色和变量

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

$primary-color:hsl(240, 30%, 45%);

$main-parimary-color: $primary-color;

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

/*
*     @params:$color1:要混合的颜色1、$color2:要混合的颜色2、$weight:混入颜色$color1所占的比例
*    @method:以何种颜色模型混合hsl, hwb, lch, oklch
*/

$color.mix($color1, $color2, $weight, $method: null) => color;

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

//入参数说明
/**
*@params:$color需要混合的颜色，$percentage:white或这black在混入中所占的比例
**/

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

//变暗混入
@function shade($color, $percentage){
    return mix(black, $color, $percentage)
}

4. 列表

列表就是 Sass 的数组。列表是一个一维的数据结构（不同于 maps），用于保存任意类型的数值（包括列表，从而产生嵌套列表）。列表需要遵守以下规范：

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

// 正确格式
$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);

5. Maps

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

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

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

// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

6. CSS规则集

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

.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

7. 选择嵌套器

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

//基础嵌套
.foo {
    .bar {
        &:hover {
            color:red;
        }
    }
}
//生成的css代码
.foo .bar:hover{
    color:red;
}


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

//生成的css代码
.food-bar {
    color:red;
}

二、命名约定

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

$vertical-rhythm-baseline: 1.5rem;

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

@function opposite-direction($direction) {
  // …
}

1. 常量

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

$CSS_POSITIONS: (top, right, bottom, left, center);

2. 命名空间

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

$su-configuration: ( … );

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

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

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

// 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;
}

三、注释

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

1. 标识注释

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

/**
 * 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;
}

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

// 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;

2. 文档注释

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

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

四、结构

1. 组件、组件结构

2. 7-1模式

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

sass/
|整个项目中使用到的 Sass 辅助工具，这里存放着每一个全局变量、函数、混合宏和占位符。
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|重置文件、排版规范文件或者一个样式表——定义一些 HTML 元素公认的标准样式
|– base/
|    |- _base.scss
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|包含各类具体模块，基本上是所有的独立模块，比如一个滑块、一个加载块、一个部件……由于整个网站或应用程序主要由微型模块构成，
|components/ 中往往有大量文件。
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|存放构建网站或者应用程序使用到的布局部分
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|页面除公共样式外的特定样式
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|主题管理文件夹
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|存放所有外部库和框架（Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……）的 CSS 文件
|– vendors/    
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
|入口文件、整个代码库中唯一开头不用下划线命名的 Sass 文件。除 @import 和注释外，该文件不应该包含任何其他代码。
`– main.scss              # Main Sass file

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

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

@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";

3. Globbing

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

@import "abstracts/*";
@import "vendors/*";
@import "base/*";
@import "layout/*";
@import "components/*";
@import "pages/*";
@import "themes/*";

4. shame文件

所有不推荐的行为整合到一个shame.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;
}

五、响应式设计与断点

1. 断点命名

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

// 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
  )
);

2. 断点管理器

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

3. 媒体查询的使用

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