Angular SCSS样式问题_Angular 2 SCSS样式设置_TS中的Angular get scss样式 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 组件样式

ngClass 通常情况下，要为某个元素添加指定样式，我们可以直接这样做：提交但某些时候我们需要根据不同的条件，为指定元素应用不同的样式...接下来让我们来分别看一下具体的使用示例：传递样式数组提交 Angular 将会接收传递给 ngClass...指令的样式数组，然后把对应的样式应用到指定的元素上。...，即用于表示是否应用对应的样式类。...，将生成以下样式： ....

1.9K3 0

Angular 中 SASS 样式的使用

在 Angular 自定义指令 Tooltip 文章中，我们说会出一篇关于 sass 样式的文章，现在它来了。....scss 为后缀，语法用 {} 修饰 .sass 为后缀，语法是缩紧方式推荐使用 .scss 项目集成 angular 项目使用脚手架生成，在添加样式这一个步骤，会询问你编写样式的方式，让你选择...在 angular 中编写样式，可以分为组件样式和全局样式。...- demo.component.scss - deom.component.spec.ts 其中 demo.compoent.scss 就是 deom 这个组件的样式表。...全局样式 angular 脚手架生成的项目，默认在 src/style.scss 文件存放全局的样式。在这个文件修改的样式，将对整个应用的样式产生影响。

4.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

scss实现样式复用: 继承、占位符、混合宏

v3.5.6 和 ruby v2.4.4) 继承在 scss 中，一个样式类，可以被其他样式类直接继承，从而减少重复代码的编写。...代码语义更强：.btn是基础样式类，.btn--primary和.btn--info是扩展样式类。...@extend %btn; } .btn--info { color: gray; @extend %btn; } 编译后的 css 代码，并没有占位符%test-btn的样式代码...思考：编程语言特性 & 预处理除了文中所述的 3 种样式复用的手段，scss 更引入了变量声明、循环、条件判断、函数（混合宏）、模块等编程语言才有的概念，使得开发者在编写样式代码的时候也可以编写复杂逻辑...因此，不光要利用 scss 的编程语言特性来简化样式代码，还要考虑编译后的 css 文件的大小。毕竟网络传输开销辣么大！

7.2K4 0

用tailwindcss的思想+scss手撸公有样式

所以下边用scss来完成这一目标分析看一下tailwindcss提供的这些类，持续往下翻我们就可以轻易明确外边距功能类的编写特点 m-1对应margin:0.25rem -m-1对应margin...; } } 效果保存，然后最终会生成一个压缩过的min.css文件我们尝试一下，首先这是原本的效果 icon和文字挨太紧了明显不行，我们给icon加一个mr-3 生效，证明前边思路莫得问题...css框架有一定好感的话，不妨动手试试，tailwindcss的@apply可以组合原子类让我们使用的时候的自定义程度明显提高，这才符合我的代码审美（不要被示例中大量组合类给吓到，那看起来确实很像内联样式

7024 0

Angular 样式使用注意事项

预处理器如果是用angular-cli生成的项目，可以在angular.json中配置样式预处理器 "schematics": { "@schematics/angular...:component": { // 指定组件生成的默认前缀 "prefix": "fx", // 定义样式预处理器，可选值 css, scss..., less 或 stylus, 无需安装其他依赖 "styleext": "scss" } }, :host 如果需要指定组件宿主元素的样式，可以使用:...image.png ::ng-deep 在Angular中，对组件的样式规则进行了内部封装，即为组件定义的样式规则都只在组件内部才能生效，不进不出，所以组件样式通常只会作用于组件自身的 HTML.../fx-button.component.scss'] }) 什么是Shadow DOM，如何使用?

2.1K0 1

【Angular6+】属性及样式绑定

Angular6_属性及样式绑定 Angular 通过 [] 来绑定数值、变量或者表达式，这种绑定是单向数据绑定。...class on/off with a property --> The class binding is special 样式绑定...样式绑定的语法与属性绑定类似。...但方括号中的部分不是元素的属性名，而由 style 前缀，一个点 (.)和 CSS 样式的属性名组成。形如：[style.style-property]。

9654 0

使用Angular CLI生成 Angular 5项目

--style: 可以设定样式的类型, 默认是css, 例如可以改成scss. 也可以通过--inline-style把样式的写法设为行内样式, 这个默认是false的....下面我来生成一个使用scss样式的项目: ? 可以看到生成的是styles.scss, app.component.scss文件, angular cli不仅会生成scss文件, 而且也会编译它们....查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....就拿当前这个项目来说, 它的默认样式文件类型是scss: ? 如果我在该项目目录执行: ng set defaults.styleExt css 那么该项目的设置就会改变: ?...没有问题. 然后我故意弄出来几处错误/不规范的写法: ? 然后再执行ng lint: ? 可以看到这些错误都被详细的列了出来. 把格式化的参数加进去: ?

1.9K3 0

Angular 项目中导入 styles 文件到 Component 中的一些技巧

通常情况下，也存在另一种可能性，即可能需要在组件中包含全局(global)样式文件（尤其是变量文件，即 variable files）。...如果您的项目是使用 Angular CLI 生成的，您可以在 .angular.cli.json 文件中添加配置 stylePreprocessorOptions > includePaths。...它告诉 Angular CLI 在处理每个组件样式文件之前，在上述路径中查找样式文件。例如，在我们的例子中，让我们在路径中添加 ./stylings。.../stylings" ] } }] } 复制代码注意，在高版本的 Angular 项目里，上述配置位于文件 angular.json 内： "stylePreprocessorOptions...事实证明，如果有多个同名文件，Angular CLI 将只选择第一个匹配名称的文件。在这种情况下，它将选择 ./stylings 文件夹下的 _variables.scss 文件。

1K2 0

ionic3使用带图标带事件的toast

/animations --save 添加样式 Github文档是通过修改angular-cli.json文件来导入样式的，而对于ionic来说，该类似文件封装在源码里面，不应该修改，所以改为在index.html...; } } 防止污染ionic自带的toast样式 ngx-toastr的样式刚好和ionic都用到了.toast-container的class，所以会影响，此时，把toastr.min.css中的...，但是在打--prod编译时，还是会检测toastr-bs4-alert.scss里面的样式，爆出： @include border-radius($alert-border-radius);中$alert-border-radius...处理这个有两种方式：清空或者删除toastr-bs4-alert.scss文件。..."~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; ?

2.9K2 0

AngularDart Material Design 卡片顶

自述 Material Card 材料卡是由Google材料团队（也称为mdc-web）提供的卡片样式。这是一个允许在AngularDart应用程序中使用样式的包装器。...有关如何使用这些样式的文档，请参阅mdc文档。可以在这里找到示例。建立样式由包提供:angular_components/css/mdc_web/card/mdc-card.scss.css。...要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。我们建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。...selector: 'my-component', templateUrl: 'my_component.html', styleUrls: [ 'package:angular_components.../css/mdc_web/card/mdc-card.scss.css', 'my_component.scss.css']) class MyComponent {} MaterialCardExample

6884 0

angular2 路由问题

URL Segment: 'main' 这个问题的处理很简单,是路由的路径写错了, import { NgModule } from '@angular/core'; import { Routes,...RouterModule } from '@angular/router'; import {loginComponent} from '....RouterModule.forRoot(routes)], exports: [RouterModule], }) export class MyRoutingModule { } 我的情况是在父组件中调用子路由的时候,出现这个问题的...,大家只需要更改一个地方, {path:'',redirectTo:'main',pathMatch:'full'} 把main 前的斜杠去了就好了,我想问题的原因是因为调用的是子路由,不用出现斜杠吧,...反正问题是解决了解决了

1.1K5 0

Ionic3学习笔记（十）实现夜间模式功能

创建主题样式在 ./src/theme 文件夹下创建 theme.light.scss、theme.dark.scss 2个文件，分别用于日间模式、夜间模式的设置。...theme.light.scss: .light-theme { ion-content { background-color: #f4f4f4; } .item {...background-color: #f8f8f8; } .tab-button { background-color: #f8f8f8; } } theme.dark.scss...toolbar-background { background-color: #444; } .tab-button { background-color: #444; } } 这是我的2个主题样式...导入 variables.scss @import "theme.light"; @import "theme.dark"; 3.

7803 0

Angular CLI 简介

--style: 可以设定样式的类型, 默认是css, 例如可以改成scss. 也可以通过--inline-style把样式的写法设为行内样式, 这个默认是false的....下面我来生成一个使用scss样式的项目: 可以看到生成的是styles.scss, app.component.scss文件, angular cli不仅会生成scss文件, 而且也会编译它们....查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件: 这样, 以后生成的component的默认样式文件就是scss了....就拿当前这个项目来说, 它的默认样式文件类型是scss: 如果我在该项目目录执行: ng set defaults.styleExt css 那么该项目的设置就会改变: 如果使用参数 -g(--global..., 但是测试还是出现了问题: router-outlet is not an angular component.

6K11 0

Angular 从入坑到挖坑 - 组件食用指南

一、Overview angular 入坑记录的笔记第二篇，介绍组件中的相关概念，以及如何在 angular 中通过使用组件来完成系统功能的实现对应官方文档地址：显示数据模板语法用户输入组件之间的交互...管道生命周期钩子配套代码地址：angular-practice/src/components-guide 二、Contents Angular 从入坑到弃坑 - Angular 使用入门 Angular...：组件对应的页面 HTML 模板，用来呈现组件的功能 product-list.component.scss：只针对当前组件的样式 product-list.component.spec.ts：当前组件的单元测试文件...，如果只设置一个内联样式，应该使用模板绑定语法中的样式绑定 NgStyle 属性指令 import { Component, OnInit...，完成对于页面元素样式的批量设置 NgModel：双向数据绑定 ?

15.8K3 0

Angular-内存溢出的问题

本项目用的是angular6搭建，用动态组件的形式来显示页面，之前遇到过因为内存溢出而导致无法aot的问题， Angular4以上的该方法都适用解决方法：手动改写内存上限修改目录: my-project...暂时还不清楚只能先用设置内存上限的方法来解决，有大神的话望不吝指教；还有一个问题就是用动态组件的方式，组件都在根目录下，会导致首次加载的时间过长。..."@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular...": "^1.0.0", "angular-safeguard": "^2.0.1", "angular-sortablejs": "^2.7.0", "angular2-fontawesome.../build-angular": "^0.8.9", "@angular/cli": "^6.2.7", "@angular/compiler-cli": "^6.1.0", "

2.3K2 0

前端开发工程化之angular打造spa应用

,gem,scss,compass） yeoman : google开发的项目构造器，项目打造神器 node.js : 是服务器端Javascript运行环境(runtime), npm :是NodeJS...包管理和分发工具 bower: 是js/css的包管理和分发工具 grunt/gulp: 前端项目构建工具（压缩js图片，打包项目） ruby :脚本语言 gem :ruby的包管理和分发工具 scss...:css预处理器，丰富css的语法 compass :ruby的一个包，scss的预处理需要这个组件支持 2.工作环境搭建（1）安装node 下载安装（2）安装yeoman （ npm...4.分析yeoman生成的骨架，四个重要的点（1）app目录我们的工程业务文件目录,下面有四个文件夹，images(图片资源目录),scripts（脚本资源目录）,styles（样式目录...://github.com/angular-ui 其中 http://angular-ui.github.io/bootstrap/ 项目基本能解决90%以上的问题

1414 0

Ng-Matero V10 正式发布！

Angular v10 在六月下旬就悄无声息的发布了，虽然 v9 的发布延期了两个月，但是 v10 并没有受影响，仍然如期而至。...其实 v10 版本除了将 Angular 和 Angular Material 升级之外，主要是调整了 schematics ng add 的兼容问题，其它代码和 v9 最新版是一样的。...，通过 _app-theme.scss 文件整合所有和应用相关的主题样式。...ng-matero/extensions/theming'; @import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss...，比如侧边栏的主题样式。

1.4K1 0

Ionic3 开发流程

简单介绍自己使用Ionic3开发的过程，涉及到的知识点如下： Angular Ionic Cordova ES6 TypeScript Scss 环境搭建引用插件调试 Android...打包 Android签名 IOS打包 Angular Angular4，资源整理：https://angular.cn/ 模块使用 @NgModule 注解声明一个模块，模块中可以包含一些组件、...资源整理：http://www.tslang.cn/docs/home.html Scss 花几分钟简单了解一下基本用法。其实主要就是css，不过这里推荐学医一下 flex 布局。...ionic cordova plugin add https://github.com/yanxiaojun617/com.kit.cordova.amaplocation --save 调试样式问题...目前的做法是远程打包，不过目前有一个问题：现在那台机器上的证书好像失效了/ku。

1.9K3 0

怎么组织 Angular 项目｜Top 5 技巧

single responsibility principle 能阻止这些问题。单一职责原则意味着组件有且仅有一个功能。...为了确保你的代码能够满足这种要求，你可以问自己一个问题：这代码是干什么的？如果自己的回答包含 and 这个关键字，那么你需要将你的代码重构为单一职责的代码。...组织 SCSS 文件如果不遵循通用结构，样式文件很快就会变得杂乱无章。...为包含该特定文件夹所有代入的在每个文件夹中新建一个 all.scss 文件。...解决这个问题的，我们可以在 tsconfig.json 文件中配置路径的别名。在这个文件中，有个名为 compilerOptions 的数组。这个是你在应用程序中配置路径别名。

1.3K1 0

Angular 自定义指令 Tooltip

Yeah，关注我的读者应该知道，上一篇文章了解 Angular 开发的内容，我们已经概览了 Angular 的相关内容。...Angular 是 Angular.js 的升版 So，本文，我们就以 Tooltip 来讲解下自定义指令的内容。...tooltip 组件 │ ├── user-list.component.html // 页面骨架 │ ├── user-list.component.scss....scss 中，有： $black: #000000; $white: #ffffff; $caret-size: 6px; $tooltip-bg: transparentize($black, 0.25.../tooltip.component.scss'] // 本组件的私有样式 }) export class TooltipComponent implements OnInit { public

1.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭