Angular项目中如何使用SASS样式

这篇文章主要讲解了“Angular项目中如何使用SASS样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Angular项目中如何使用SASS样式”吧！

成都网站建设、网站建设的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给成都创新互联公司一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

在 Angular 自定义指令 Tooltip 文章中，我们说会出一篇关于 sass 样式的文章，现在它来了。

前端三剑客之一，层叠样式表(Cascading Style Sheets，CSS），就是对 HTML 骨架的润色。但是我们通过原生编写的样式，会出现很多重复代码，而已逻辑不明确。

那么，我们可以通过 CSS 的扩展语言来进行编写维护。目前前端界比较流行的两个 CSS 扩展语言是 less 和 sass。本文讲解的是 sass。

less 也是差不多，sass 更加成熟

SASS 提供了两种编写的语法，一种是 .scss 为后缀，另一种是 .sass 为后缀。

• .scss 为后缀，语法用 {} 修饰

• .sass 为后缀，语法是缩紧方式

推荐使用 .scss

项目集成

angular 项目使用脚手架生成，在添加样式这一个步骤，会询问你编写样式的方式，让你选择：

选择 SCSS，然后确认即可，就是这么简单。

在 angular 中编写样式，可以分为组件样式和全局样式。

组件样式就是组件单独拥有，其他组件不会生效，比如，你通过 ng g compoent demo 生成组件：

- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts

其中 demo.compoent.scss 就是 deom 这个组件的样式表。

全局样式

angular 脚手架生成的项目，默认在 src/style.scss 文件存放全局的样式。在这个文件修改的样式，将对整个应用的样式产生影响。

Sass 重点语法

针对日常的开发工作，我们来介绍下比较重要的内容。

1. 使用变量

使用变量能够让你在多个页面或者页面中的多处进行调用。

// _varible.scss
// **** COLORS ****
$black: #000000;
$white: #ffffff;
$dark-green: #007f7f;
// **** usage ****
$primary-color: $dark-green;

我们将变量方式在一个文件中进行管理，当需要使用到它的使用，我们直接进行 @import 导入使用即可：

@import "path/to/varible.scss";

#demo {
  color: $primary-color; // 调用
}

2. 使用嵌套

在使用 css 样式的时候，我们需要对不同元素进行样式的编写，我们需要考虑到元素所在的层次，采用不同的权重对其进行修改。

现在有骨架如下：

  
    Mr.