Angular中SASS样式的详细使用教程

 更新时间:2022年05月30日 10:25:48   作者:梅花十三儿  
对于一个Sass用户,只需要理解Sass扩展部分如何工作的,就能完全理解SCSS,下面这篇文章主要给大家介绍了关于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 样式的时候,我们需要对不同元素进行样式的编写,我们需要考虑到元素所在的层次,采用不同的权重对其进行修改。

现在有骨架如下:

<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('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 继承

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

原骨架和样式:

<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样式详细使用的文章就介绍到这了,更多相关Angular SASS样式使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • AngularJs ng-route路由详解及实例代码

    AngularJs ng-route路由详解及实例代码

    这篇文章主要介绍了AngularJs ng-route路由,这里整理相关资料及简单实例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS压缩JS技巧分析

    AngularJS压缩JS技巧分析

    这篇文章主要介绍了AngularJS压缩JS的操作技巧,分析了AngularJS进行压缩(minify)之后出现的问题与相应的解决方法,需要的朋友可以参考下
    2016-11-11
  • Angular2库初探

    Angular2库初探

    本文将侧重点放到npm上来,看看npm平台给ng2带来的酷炫的帮助。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • Angular ElementRef简介及其使用

    Angular ElementRef简介及其使用

    这篇文章主要介绍了Angular ElementRef简介及其使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 详解webpack+es6+angular1.x项目构建

    详解webpack+es6+angular1.x项目构建

    这篇文章主要介绍了详解webpack+es6+angular1.x项目构建, 小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    这篇文章主要介绍了浅谈Angular路由守卫,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 详解Angular 4 表单快速入门

    详解Angular 4 表单快速入门

    本篇文章主要介绍了详解Angular 4 表单快速入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angularjs渲染的 using 指令的星级评分系统示例

    Angularjs渲染的 using 指令的星级评分系统示例

    本篇文章主要介绍了Angularjs渲染的 using 指令的星级评分系统示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • angularjs实现天气预报功能

    angularjs实现天气预报功能

    这篇文章主要为大家详细介绍了angularjs实现天气预报功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果,本文通过示例代码详细介绍了实现过程,对大家学习AngularJS具有一定参考借鉴价值,有需要的朋友们可以参考借鉴。
    2016-09-09

最新评论