天天信息:浅析Angular项目中使用 SASS 样式的方法

时间:2022-11-11 18:50:56       来源:转载
Angular项目中怎么使用 SASS 样式?下面本篇文章给大家介绍一下Angular 中 SASS 样式的使用方法,希望对大家有所帮助!

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

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


(相关资料图)

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

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

.scss为后缀,语法用 {}修饰.sass为后缀,语法是缩紧方式

项目集成

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

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

angular中编写样式,可以分为组件样式和全局样式。【相关教程推荐:《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.
Jimmy
登录后复制

现在有样式如下:

#demo .inner .prefix {  color: red;  font-size: 11px;}#demo .inner .name {  font-size: 14px;}
登录后复制

那么我们可以使用嵌套写法,逻辑清晰,阅读方便:

#demo {  .inner{    .prefix {      color: red;      font-size: 11px;    }    .name {      font-size: 14px;    }  }}
登录后复制

3. 使用计算

sass提供了一系列的操作符,如 +、-、*、/、%,使用就像写 javascript变量运算一样,竟然还可以带单位:

width: 100px / 400px * 100%l;
登录后复制

除了这些基本的运算符之外,sass还提供了很多的方法,比如 String函数:

to-upper-case("italic"); // ITALIC
登录后复制

又例如更改颜色的透明度方法:

#demo {  background-color: transparentize($black, 0.5)}
登录后复制

4. 使用 mixin 混合器

在编写样式的时候,我们会出现在多个类中调用同一份的样式内容。比如:

.demo {  font-size: 12px;  color: red;}.another_demo {  font-size: 12px;  color: blue;}
登录后复制

我们使用 mixin改写:

@mixin common-style {  font-size: 12px;}.demo {  @include common-style;  color: red;}.another_demo {  @include common-style;  color: blue;}
登录后复制

使用 mixin提取公共的代码出来,方便我们更改,改一处多处更改。当然,extend即成也有这种效果。

5. 使用 extend 继承

比如,我们可以对上一个类的样式进行续写:

原骨架和样式:

Hello, Jimmy.
登录后复制
.prefix {  font-size: 12px;}.name {  color: red;}
登录后复制

改写后:

Hello, Jimmy.
登录后复制
.prefix { font-size: 12px;}.name {  @extend .prefix  color: red;}
登录后复制

在日常的开发中,掌握上面的这些技能,足够你从容应对样式编写~

【完】

更多编程相关知识,请访问:编程教学!!

以上就是浅析Angular项目中使用 SASS 样式的方法的详细内容,更多请关注php中文网其它相关文章!

关键词: 我们需要 相关文章