Search code examples
angularsassstorybook

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?

Solution

  • 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