Question

我需要在输入字段的左侧使用放大镜图标，问题是所有图标都是在单独的SCSS文件中导入的。如何在搜索栏中使用这些图标？

icons.scss文件的开头：

@font-face {
  font-family: "app";
  src:url("../fonts/app.eot");
  src:url("../fonts/app.eot?#iefix") format("embedded-opentype"),
  url("../fonts/app.woff2") format("woff2"),
  url("../fonts/app.woff") format("woff"),
  url("../fonts/app.ttf") format("truetype"),
  url("../fonts/app.svg#app") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "app" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "app" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我要使用的文件中的图标：

.icon-search:before{
  content: "\43";
}

我想在下面使用图标的搜索SCSS：

.search-div{
  padding: 8px 5px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
  .ato-search-bar{
    //Code here for the background icon
  }
}

我已将图标scss导入到我的其他文件中，但不确定从那里开始。

Answer 1

您需要使用@extend指令。这意味着您将使用其他一些选择器属性扩展您的选择器。扩展类将具有原始类的所有属性。 @extend指令将alsi扩展所有已定义的伪选择器。

// In your icons.scss file
.icon-search:before{
    content: "\43";
}

// Later in you css (remember to import icons.scss using: @import "icons";
.search-div{
    padding: 8px 5px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
   .ato-search-bar{
       @extend .icon-search; // Extends the icon class
   }
}

将编译成：

.icon-search:before, 
.search-div .ato-search-bar:before {
    content: "\43";
}

.search-div {
    padding: 8px 5px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

希望它有所帮助。

使用在单独的SCSS文件

1 个答案: