CODEWITHSUNDEEP
angularsassstorybook
yoyo
yoyo

Reputation: 111

SASS invalid property value

I try to use a Font in Storybook, but i get in Chrome the failure invalid property value. Im totally new to sass and storybook.

Error-Img: https://ibb.co/HqFLJ5H

Main Sass File (code shortened):

@import './src/assets/sass/color.sass'
@import './src/assets/sass/font.sass'

.flex-container
  display: -webkit-flex
  display: flex
  -webkit-flex-flow: row wrap
  flex-flow: row wrap
  padding: $cube

.flex-item
  -webkit-flex: 1 0 auto
  flex: 1 0 auto

p
  font: $font-normal
  size: $font-size-large

Font Sass File (code shortened): 

@font-face
    font-family: 'Verdana'
    src: url('src/assets/font/Verdana.ttf')

$font-normal: Verdana

Here the HTML of the component.

     <div class="flex-item">
    <h1>Letter</h1>
    <p>abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <div class="flex-item">
        <p>1234567890</p>
    </div>
    <div class="flex-item">
    <p>!"§$%&/()=?"</p>
    </div>

How can I use this font? What am i doing wrong?

Upvotes: 0

Views: 2177

Answers (2)

yunzen
yunzen

Reputation: 33439

font is a shorthand form which requires more values than only the font-family

From CSS - font | MDN:

If font is specified as a shorthand for several font-related properties, then:

it must include values for:

  • <font-size>
  • <font-family>

So either use

p
  font: $font-size-large $font-normal

or

p
  font-family: $font-normal
  font-size: $font-size-large

Upvotes: 1

Ken Bekov
Ken Bekov

Reputation: 14015

Since @font-face declares font family, try to use font-family property instead of font

@font-face
  font-family: 'Verdana'
  src: url('src/assets/font/Verdana.ttf')

$font-normal: 'Verdana'

p
 font-family: $font-normal, serif
 size: $font-size-large

Upvotes: 1

Related Questions