Gulp выдает ошибку с кодом Sass

315
09 марта 2018, 13:18

Привет!Я решил попробовать поверстать с препроцесором Sass но при компицяции кода я получаю вот такую ошибку 

[09:59:00] gulp-notify: [Error running Gulp] app\sass\_vars.sass
Error: Invalid CSS after "$white:#ffffff": expected 1 selector or at-rule, was "{}"
        on line 1 of app/sass/_vars.sass
>> $white:#ffffff {}
   --------------^

Я посмотрел вроде как правильно задал переменные,почему же выдает ошибку и как ее исправить?

$white: #ffffff
$bg-gray: #292b3b
$green: #4ecb8c
$very-dark: #000000
$dark: #333333
$text-gray: #444444

$PoiretOne: 'PoiretOne'
$CabinBold: 'CabinBold'
$CabinRegular: 'CabinRegular'
$LatoBold: 'LatoBold'
$LatoLight: 'LatoLight'
$LatoRegular: 'LatoRegular'
$MontserratRegular: 'MontserratRegular'
// Customization Bootstrap  vars from "app/libs/bootstrap/scss/_variables.scss"
$grid-gutter-width: 30px
$grid-columns: 12
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px)
$gutter: $grid-gutter-width
Answer 1

в sass нельзя использовать символы {}. Нельзя использовать ; и "" при импорте файлов также. И нужно следить за табуляцией или пробелами. То есть если вы используете пробелы, то везде должны быть пробелы. Если их два, то везде должно быть два. Иначе будет ошибка.

Валидный sass код, касательно переменных

$text: #000
$link: #2c5a22
$border: #e2d9d6
$buttonBg: #f500
$yellow: #fff200
$black: #000
$dark_green: #b7d1b1
$light_green: #d4e3d0

Пример import файлов

@import compass
@import compass/typography
@import compass/css3
@import utils/variables

Пример подключения шрифтов

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

Пример стилизации селекторов

header
  height: 120px
  width: 100%
  flex: 0 0 auto
  &
    @include breakpoint($mobile)
      margin-top: 40px
READ ALSO
Как удалить записи wordpress через mysql команду
MySQL

Как удалить записи wordpress через mysql команду

На сайте необходимо удалить все записи, где автор не админКак это сделать? Пробовал так:

 223
Перенос данных с MS SQL Server в mySQL (из бекапа)
MySQL

Перенос данных с MS SQL Server в mySQL (из бекапа)

Подскажите пожалуйста, возможно ли как то портировать базу данных с MS SQL Server 2016 на MySQL (последнюю версию)В базе данных 10 таблиц, 15 stored procedures,...

 187
Где ошибка синтаксиса в запросе mysql
MySQL

Где ошибка синтаксиса в запросе mysql

Здравствуйте друзьяПишу так

 238
C#. Как правильно разобрать JSON?
c#

C#. Как правильно разобрать JSON?

Добрый день! Пытаюсь разобрать Json ответ от API на классы итдКлассы сгенерировал на jsonutils

 286