Ошибка SASS, пользовательский ионный значок [ionic 3] - PullRequest
0 голосов
/ 06 июля 2018

так что в основном я пытаюсь создать собственную иконку в своем проекте ionic 3, я знаю, что ionic предоставил нам свою иконку для примера (например, ionicons) Тем не менее, я пытаюсь сделать мои собственные, чтобы соответствовать моему проекту. Из этой ссылки я следовал учебному пособию, чтобы создавать собственные для моих нужд. Проблема в том, что когда я пытаюсь построить свой проект, я получаю эту ошибку

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

любая помощь приветствуется, спасибо!

1 Ответ

0 голосов
/ 06 июля 2018

Удалить .icon из .icon@include makeIcon( ...

После создания mixin вы можете использовать его как объявление CSS, начинающееся с @include

Миксин позволяет создавать группы объявлений CSS, которые вы хотите использовать на своем сайте. Вы можете даже передать значения, чтобы сделать ваш миксин более гибким.

Итак, ваш .icon@include - это, по сути, синтаксическая ошибка.

Ссылка: Основы Sass

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...