文章目录

Sass 安装教程
- `npm` 安装
Sass 变量存储数据
Sass 嵌套 CSS
Mixins 创建可重用 CSS
@if 和 @else 为样式添加逻辑
@for 创建一个 Sass 循环
@each 遍历列表中的项目
@while 循环创建样式
Partials 将样式分成小块
将一组 CSS 样式扩展到另一个元素

Sass，英文全称为 “Syntactically Awesome StyleSheets”，是对 CSS 的扩展。它添加了一些基础 CSS 中不具有的新特性。 Sass 简化了 CSS，这让维护项目中的样式表变得更容易。

Sass 安装教程

`npm` 安装

我们可以使用 npm（NPM 使用介绍）来安装 Sass。

npm install -g sass

注： 国内 npm 建议使用淘宝镜像来安装，参考：npm 国内慢的问题解决

Sass 变量存储数据

Sass 不同于 CSS 的一个特点是它允许使用变量。可以在 Sass 中声明变量，并为它赋值，就像在 JavaScript 中一样。

在 JavaScript 和 TypeScript 中，变量是使用 let 和 const 关键字定义的。在 Sass 中，变量以 $ 开头的，后跟变量名。

这里有几个例子：

$main-fonts: Arial, sans-serif;
$headings-color: green;

并使用变量：

h1 {font-family: $main-fonts;color: $headings-color;
}

当需要把多个元素设置成相同颜色时，变量就会很有用。一旦需要更改颜色，只需要改变这个变量的值就好。

Sass 嵌套 CSS

Sass 允许 CSS 规则的嵌套，这在组织样式表的时候会很有用。

在 CSS 里，每个元素的样式都需要写在独立的代码块中，如下所示：

nav {background-color: red;
}nav ul {list-style: none;
}nav ul li {display: inline-block;
}

对于一个大型项目，CSS 规则会很复杂。这时，引入嵌套功能（即在对应的父元素中写子元素的样式）可以有效地简化代码：

nav {background-color: red;ul {list-style: none;li {display: inline-block;}}
}

Mixins 创建可重用 CSS

在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。

CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。考虑 box-shadow：

div {-webkit-box-shadow: 0px 0px 4px #fff;-moz-box-shadow: 0px 0px 4px #fff;-ms-box-shadow: 0px 0px 4px #fff;box-shadow: 0px 0px 4px #fff;
}

对于所有具有 box-shadow 属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。 Mixins 就像 CSS 的函数。以下是一个例子：

@mixin box-shadow($x, $y, $blur, $c){ -webkit-box-shadow: $x $y $blur $c;-moz-box-shadow: $x $y $blur $c;-ms-box-shadow: $x $y $blur $c;box-shadow: $x $y $blur $c;
}

定义以 @mixin 开头，后跟自定义名称。参数（$x，$y，$blur，以及上例中的 $c ）是可选的。现在在需要 box-shadow 规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 @include 指令调用。

div {@include box-shadow(0px, 0px, 4px, #fff);
}

@if 和 @else 为样式添加逻辑

Sass 中的 @if 指令对于测试特定情况非常有用 —— 它的工作方式与 JavaScript 和 TypeScript 中的 if 语句类似。

@mixin make-bold($bool) {@if $bool == true {font-weight: bold;}
}

类似 JavaScript 和 TypeScript，Sass 也可以使用 @else if 和 @else 测试更多条件：

@mixin text-effect($val) {@if $val == danger {color: red;}@else if $val == alert {color: yellow;}@else if $val == success {color: green;}@else {color: black;}
}

@for 创建一个 Sass 循环

可以在 Sass 中使用 @for 循环添加样式，它的用法和 JavaScript 中的 for 循环类似。

@for 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。主要区别在于 “开始 to 结束” 不包括 结束数字，而 “开始 through 结束” 包括结束号码。

这是一个开始 through 结束的示例：

@for $i from 1 through 12 {.col-#{$i} { width: 100%/12 * $i; }
}

#{$i} 部分是将变量（i）与文本组合成字符串的语法。当 Sass 文件转换为 CSS 时，它看起来像这样：

.col-1 {width: 8.33333%;
}.col-2 {width: 16.66667%;
}....col-12 {width: 100%;
}

@each 遍历列表中的项目

上一个挑战显示了 @for 指令如何通过起始值和结束值循环一定次数。 Sass 还提供 @each 指令，该指令循环遍历列表或映射中的每个项目。在每次迭代时，变量将从列表或映射分配给当前值。

@each $color in blue, red, green {.#{$color}-text {color: $color;}
}

map 的语法略有不同。这是一个示例：

$colors: (color1: blue, color2: red, color3: green);@each $key, $color in $colors {.#{$color}-text {color: $color;}
}

请注意，需要用 $key 变量来引用 map 中的键。否则，编译后的 CSS 将包含 color1，color2… 以上两个代码示例都转换为以下 CSS：

.blue-text {color: blue;
}.red-text {color: red;
}.green-text {color: green;
}

@while 循环创建样式

Sass 中的 @while 指令与 JavaScript 中的 while 类似。只要满足条件，它就会一直创建 CSS 代码。

使用 @for 创建的简单网格系统示例。

@for $i from 1 through 12 {.col-#{$i} { width: 100%/12 * $i; }
}

用 @while 也可以实现。

$x: 1;
@while $x < 13 {.col-#{$x} { width: 100%/12 * $x;}$x: $x + 1;
}

首先，定义变量 $x 并将其设置为 1。接下来，使用 @while 指令，while $x 小于 13 时创建网格系统。在设置 width 的 CSS 规则后，$x 增加 1 以避免无限循环。

Partials 将样式分成小块

Sass 中的 Partials 是包含 CSS 代码段的单独的文件。这些片段可以导入其它 Sass 文件使用。可以把类似代码放到模块中，以保持代码结构规整且易于管理。

partials 的名称以下划线（_）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。此外，Sass 文件以 .scss 文件扩展名结尾。要将 partial 中的代码放入另一个 Sass 文件中，使用 @import 指令。

例如，如果所有 mixins 都保存在名为 _mixins.scss 的 partial 中，并且在 main.scss 文件中需要它们，下面是使用方法：

@import 'mixins'

请注意，import 语句中不需要下划线 —— Sass 知道它是 partial。将 partial 导入文件后，可以使用所有变量、mixins 和其它代码。

将一组 CSS 样式扩展到另一个元素

Sass 有一个名为 extend 的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。

例如，下面的 CSS 规则块设置了 .panel class 的样式。它有 background-color，height 和 border。

.panel{background-color: red;height: 70px;border: 2px solid green;
}

现在需要另一个名为 .big-panel 的面板。它具有与 .panel 相同的基本属性，但还需要 width 和 font-size。可以从 .panel 复制并粘贴初始 CSS 规则，但是当添加更多类型的面板时，代码会变得重复。 extend 指令是一种重用为一个元素编写的规则的简单方法，可以为另一个元素重用并添加更多规则：

.big-panel{@extend .panel;width: 150px;font-size: 2em;
}

除了新样式之外，.big-panel 将具有与 .panel 相同的属性。

【Sass】全面的 Sass 教程及学习笔记相关推荐

26Play框架教程2学习笔记
Play框架教程2学习笔记文章目录 1 play框架01 1.1 概述 1.2 特性 1.2.1 无缝集成现有开发环境 1.2.2 热重载和修改Bug 1.2.3 简单的无状态MVC架构 1.2.4 ...
26Play框架教程1学习笔记
Play框架教程1学习笔记文章目录 1play教程第一课 1.1 play是什么 1.2 REST风格是什么 1.3 play的优点和缺点 2 play教程第二课 2.1 搭建开发环境 2.1. ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
这是最全面的R语言+统计学习的资源整理【系统全面】
开篇先感谢原文:coffeeCat[1] 转载于:Coffee学生物统计的地方[2] 1.个人主页.博客.社区.论坛北大李东风[3] 中科大张伟平[4]谢益辉(人称谢大大)[5]:统计之都论坛[ ...
零基础学前端之HTML全套基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 HTML全套基础教程[学习笔记] 1.系统结构 2.软件环境准备 3.HTML概述 4. 我的第一个HTML 5. HTML的基本标签 6.HTML的实体符号 7. ...
深度学习yolov3 裂痕检测和手势识别教程小白学习笔记
深度学习yolov3 手势识别教程小白学习笔记深度学习yolov3 裂痕检测和手势识别教程小白学习笔记这是本人在学习yolov3目标检测过程的一些记录,希望能够对大家有所帮助裂痕检测视频演示 ...
（尚硅谷java零基础教程）学习笔记day7/8-数组
1.数组的概述 1.1 定义数组(Array),是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理. 1.2 数组的相关概念数组名元素数组的索引 ...
python编程16章教程_Python学习笔记__16.2章 TCP编程
# 这是学习廖雪峰老师python教程的学习笔记 Socket是网络编程的一个抽象概念.通常我们用一个Socket表示"打开了一个网络链接",而打开一个Socket需要知道目标计算 ...
Node初学者入门，一本全面的NodeJS教程，微小的web框架，能实现文件上传功能以及数据解析功能...
Node初学者入门,一本全面的NodeJS教程转载于:https://www.cnblogs.com/hfultrastrong/p/8036672.html
Linux流量监控工具 - iftop (最全面的iftop教程)
Linux流量监控工具 - iftop (最全面的iftop教程) 2010年07月27日下午 | 作者:VPS侦探在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态 ...

【Sass】全面的 Sass 教程及学习笔记

文章目录

Sass 安装教程

`npm` 安装

Sass 变量存储数据

Sass 嵌套 CSS

Mixins 创建可重用 CSS

@if 和 @else 为样式添加逻辑

@for 创建一个 Sass 循环

@each 遍历列表中的项目

@while 循环创建样式

Partials 将样式分成小块

将一组 CSS 样式扩展到另一个元素

【Sass】全面的 Sass 教程及学习笔记相关推荐

最新文章

热门文章

【Sass】全面的 Sass 教程及学习笔记

文章目录

Sass 安装教程

npm 安装

Sass 变量存储数据

Sass 嵌套 CSS

Mixins 创建可重用 CSS

@if 和 @else 为样式添加逻辑

@for 创建一个 Sass 循环

@each 遍历列表中的项目

@while 循环创建样式

Partials 将样式分成小块

将一组 CSS 样式扩展到另一个元素

【Sass】全面的 Sass 教程及学习笔记相关推荐

最新文章

热门文章

`npm` 安装