登录  /  注册
首页 > web前端 > js教程 > 正文

Angular项目中怎么使用 SASS 样式

青灯夜游
发布: 2022-05-09 10:51:08
转载
2122人浏览过

angular项目中怎么使用 sass 样式?下面本篇文章给大家介绍一下angular 中 sass 样式的使用方法,希望对大家有所帮助!

Angular项目中怎么使用 SASS 样式

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

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

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

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

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

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

推荐使用 .scss

项目集成

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

1.png

选择 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 样式的时候,我们需要对不同元素进行样式的编写,我们需要考虑到元素所在的层次,采用不同的权重对其进行修改。

现在有骨架如下:

<div id="demo">
  <div class="inner">
    <span class="prefix">Mr.</span>
  </div>
  <div class="inner">
    <span class="name">Jimmy<span>
  </div>
</div>
登录后复制

现在有样式如下:

#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(&#39;italic&#39;); // 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 继承

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

原骨架和样式:

<span class="prefix name">Hello, Jimmy.</span>
登录后复制
.prefix {
  font-size: 12px;
}
.name {
  color: red;
}
登录后复制

改写后:

<span class="name">Hello, Jimmy.</span>
登录后复制
.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}
登录后复制

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

【完】

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

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号