SASS error, custom ionic icon [ionic 3]

Question

so basically, I'm trying to create a custom icon in my ionic 3 project, i know that ionic has provided us with their sample icon (e.g : ionicons) however, I'm trying to made my custom ones to fit my project. I've been following the tutorial from this link to created the custom ones for my needs. The problem is when i try to build my project, i got this error

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

here's my complete scss code :

> @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');

any kind of help is appreciated, thanks!

solved! thanks mate, can you enlighten me? why should i remove that part? — Indra Palijama

Mystery Mystery · Accepted Answer · 2018-07-06T04:48:13

Remove .icon from .icon@include makeIcon( ...

After creating your mixin, you can use it as a CSS declaration starting with @include

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

So your .icon@include is, basically, a syntax error.

Reference: Sass Basics

SASS error, custom ionic icon [ionic 3]

1 Answers