SASS 无效属性值

Question

我尝试在 Storybook 中使用字体，但我得到 Chrome 失败无效属性值。我对 sass 和故事书完全陌生。

主要 Sass 文件（代码缩短）：

@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

字体Sass文件（代码缩短）：

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

$font-normal: Verdana

这里是组件的HTML。

     <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>

如何使用这种字体？我做错了什么？

Answer 1

由于@font-face声明了字体系列，尝试使用font-family属性而不是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

Answer 2

font 是一种 shorthand 形式，它需要比 font-family

更多的值

来自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>

所以要么使用

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

或

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

SASS 无效属性值

SASS invalid property value

sass

angular

storybook

SASS 无效 属性 值

SASS invalid property value

sass

angular

storybook

SASS 无效属性值