如何在 Ionic 中使用 SASS 更改活动按钮的文本颜色？ [关闭]答案

【问题标题】：How to change the colour of the text of an active button using SASS in Ionic? [closed]如何在 Ionic 中使用 SASS 更改活动按钮的文本颜色？ [关闭]
【发布时间】：2015-06-30 10:05:59
【问题描述】：

我正在使用 SASS 方法来设置 Ionic 应用程序的样式。

On可以通过修改sass/_variables.sass中存储的变量来实现。

对于特定按钮，我现在想在激活时（点击时）更改文本颜色。但是，在默认设置下，只有在 Ionic Setup 中单击时才能更改按钮的背景颜色。例如，您会发现：

$button-light-bg:                 $light !default;
$button-light-text:               #fff !default;
$button-light-border:             rgba(255,255,255, 0) !default;
$button-light-active-bg:          $light !default;
$button-light-active-border:      $light !default;

如何在 Ionic 中添加一个附加变量以将文本颜色更改为黑色？例如：

$button-light-active-text:        #000 !default; // does not work

现在，这个按钮需要在某个地方使用吗？我可以在 Ionic 库的哪个位置进行修改？

【问题讨论】：

你明白什么是变量，对吧？除非您使用变量，否则变量不会做任何事情。
是的，我明白了，但我在哪里使用这些变量？我在哪里可以找到 button-light:active 和普通 CSS 一样
为什么我的问题被标记为不清楚？我现在已经修改了，是不是更好？在我看来，这是一个有效的问题，因为在 ionic 中使用 SASS 是甚至在他们的论坛/博客上讨论的主题。 learn.ionicframework.com/formulas/working-with-sass
不清楚，因为不清楚你不明白什么。您似乎意识到您正在使用 CSS 和 Sass，所以您尝试过什么吗？或者尝试了解如何使用这些技术中的任何一种来做任何事情？我的意思是，除了声明一个不做任何事情的变量之外，还有什么其他？
是的，这就是我的观点：我可以在 Ionic 框架的什么地方使用该变量？在 CSS 中，您可以使用 button:active {} 来处理按下按钮时按钮的外观。但是，由于 Ionic 框架的样式是通过 SASS 完成的，所以我看不到在按下时如何更改文本的样式。正如从教程中看到的那样，唯一可以编辑它的地方是 _variables.scss 但是没有变量可以在活动时处理文本。我当然可以把它放在一个 .css 文件中并声明 button:active{}，但这不是我想要的

标签： css sass ionic-framework

【解决方案1】：

您可以添加一个额外的 button.scss 文件，并在 ionic.app.scss 文件中使用 @import "pathTo/button.scss" 链接该文件

现在在你的 button.scss 中你可以写：

.button.button-light.active, .button.button-light.activated {
  color : #000
}

或使用变量：

.button.button-light.active, .button.button-light.activated {
  color : $button-light-active-text
}

并将其添加到 ionic.app.scss $button-light-active-text #000

!deafult 不是必需的。它仅表示：如果之前没有为属性设置值，则使用此值

【讨论】：