SASS 错误，自定义离子图标 [离子 3]答案

【问题标题】：SASS error, custom ionic icon [ionic 3]SASS 错误，自定义离子图标 [离子 3]
【发布时间】：2018-07-06 12:48:13
【问题描述】：

所以基本上，我正在尝试在我的 ionic 3 项目中创建一个自定义图标，我知道 ionic 为我们提供了他们的示例图标（例如：ionicons）但是，我正在尝试制作适合我的项目的自定义项。我一直在遵循link 中的教程来创建满足我需要的自定义教程。问题是当我尝试构建我的项目时，我收到了这个错误

> Sass Error Invalid CSS after "}": expected 1 selector or at-rule, was
> ".icon@include makeI"

这是我完整的 scss 代码：

> @font-face {
>   font-family: 'icomoon';     src: 
> url('../assets/fonts/icomoon.eot?ai7wni');    src: 
> url('../assets/fonts/icomoon.eot?ai7wni#iefix')
> format('embedded-opentype'),
>   url('../assets/fonts/icomoon.ttf?ai7wni') format('truetype'),
>   url('../assets/fonts/icomoon.woff?ai7wni') format('woff'),
>   url('../assets/fonts/icomoon.svg?ai7wni#icomoon') format('svg');
>   font-weight: normal;    font-style: normal; }
> 
> [class^="icon-"], [class*=" icon-"] {     /* use !important to prevent
> issues with browser extensions that change fonts */   font-family:
> 'icomoon' !important;     speak: none;    font-style: normal;     font-weight:
> normal;   font-variant: normal;   text-transform: none;   line-height: 1;
> 
>   /* Better Font Rendering =========== */     -webkit-font-smoothing:
> antialiased;  -moz-osx-font-smoothing: grayscale; }
> 
> // ../assets/
> 
> 
> @mixin makeIcon($arg, $val) {   .ai-#{$arg}:before ,  
> .ion-ios-sm-#{$arg}:before ,   .ion-ios-sm-#{$arg}-outline:before ,  
> .ion-md-sm-#{$arg}:before ,   .ion-md-sm-#{$arg}-outline:before  {
>     content: $val;
>     font-size: 26px;   } }
> 
> 
> .icon@include makeIcon(home,'\e900'); .icon@include makeIcon(pipeline,
> '\e901'); .icon@include makeIcon(leave, '\e902'); .icon@include
> makeIcon(meeting-room, '\e903'); .icon@include makeIcon(logout,
> '\e904');

感谢任何形式的帮助，谢谢！

【问题讨论】：

从.icon@include makeIcon( ...中删除.icon
解决了！谢谢大佬，能指教一下吗？我为什么要删除那部分？

标签： ionic-framework sass ionic3

【解决方案1】：

从.icon@include makeIcon( ... 中删除.icon

创建mixin 后，您可以将其用作以@include 开头的CSS 声明

mixin 让您可以创建一组您希望在整个网站中重复使用的 CSS 声明。您甚至可以传入值以使您的 mixin 更加灵活。

所以你的.icon@include 基本上是一个语法错误。

参考：Sass Basics

【讨论】：