问题

Question

问题

如何在使用Stylus预处理器的CSS中修复此问题？

背景

我的css目前正在现有项目中使用。但我正在将项目从Sinatra迁移到NodeJS。部分原因是我在节点项目中使用手写笔。我将代码复制并粘贴到http://beautifytools.com/css-to-stylus-converter.php

的转换器中

错误

代码

*, *:before, *:after
    -moz-box-sizing border-box
    -webkit-box-sizing border-box
    box-sizing border-box

body
    font-family Helvetica, sans-serif

body,
div
    background-color #222
    border 0 none
    margin 0
    padding 0

@media only screen and (min-width: 35em)
    .ir
        border 0
        font 0/0 a
        text-shadow none
        color transparent
        background-color transparent
    .hidden
        display none !important
        visibility hidden
    .visuallyhidden
        border 0
        clip rect(0 0 0 0)
        height 1px
        margin -1px
        overflow hidden
        padding 0
        position absolute
        width 1px
    .invisible
        visibility hidden
    .clearfix
        *zoom 1
        &:after
            clear both

@media only screen and (min-width: 35em)     .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus
    clip auto
    height auto
    margin 0
    overflow visible
    position static
    width auto

@media only screen and (min-width: 35em)     .clearfix:before, .clearfix:after
    content ""
    display table

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
header
    background-color #111
    height 90px
    margin-bottom 30px
    position relative
    z-index 1

header, header a
    color #fff

header
    a
        text-decoration none
    div
        text-align center
    .title
        height 90px
        width 100%
        margin 0 auto
        line-height 1
        position relative
        z-index 10
        h1
            font-family "Montserrat", Arial, Helvetica, sans-serif
            font-size 60px
            margin 0
            padding-top 15px
            vertical-align middle

.back
    font-size 72px
    width 60px
    position fixed
    z-index 20
    a
        display block

html,
body,
.container,
.mainimg,
.sidebar
    height 100%
    min-height 100%

.container
    background-color #444
    margin 0
    padding 0
    height 100%
    min-height 100%
    width 100%

.mainimg
    background-image url('http://ripsportchalet.com/_assets/img/_main.jpg')
    background-repeat no-repeat
    background-size cover
    display inline-block
    width 75%
    height 100%
    min-height 100%
    img
        max-width 100%

.sidebar
    background-color #000
    display inline-block
    float right
    width 25%
    p
        color #fff
        text-align center
    ul
        list-style-type none
        padding-left 0
        li
            font-family "Montserrat", Arial, Helvetica, sans-serif
            font-size 30px
            text-align center
            width 100%
            a
                background #999
                color #ffffff
                display block
                max-width 300px
                margin 0 auto 15px
                padding 0 10px
                text-decoration none

@media (max-width: 767px)
    .container
        height auto
    .mainimg
        background-size contain
        display block
        width 100%
        max-width 100%
        height 1px
        margin 0 auto
        padding-bottom 66.666666%
    .sidebar
        display block
        float none
        width 100%
        overflow hidden

.map-container
    max-height 400px
    overflow hidden
    max-width 100%

.mapimg
    height 1px
    padding-bottom 66.666%
    background-image url('http://ripsportchalet.com/_assets/img/map.png')
    background-size contain
    background-repeat no-repeat
    width 600px
    margin 0 auto

ul#thumbnails
    background-color #F9F9FA
    width 300px
    max-width 90%
    margin 0 auto 100px
    padding-left 10px
    li
        list-style-type none
        line-height 66px
        padding-top 3px
        vertical-align middle
        img
            border-radius 5px
            cursor pointer
            transition 0.3s
            float right
            margin-right 10px
            &:hover
                opacity 0.7
        &:not(:last-of-type)
            border-bottom 1px dashed #777
        div
            background-color #F9F9FA
            line-height 60px
            display inline-block
            vertical-align middle

.modal
    display none
    position fixed
    z-index 1
    padding-top 100px
    left 0
    top 0
    width 100%
    height 100%
    overflow auto
    background-color rgb(0,0,0)
    background-color rgba(0,0,0,0.9)

.modal-content
    margin auto
    display block
    width 80%
    max-width 720px

#caption
    margin auto
    display block
    width 80%
    max-width 700px
    text-align center
    color #ccc
    padding 10px 0
    height 150px

.modal-content, #caption
    -webkit-animation-name zoom
    -webkit-animation-duration 0.6s
    animation-name zoom
    animation-duration 0.6s

@-webkit-keyframes
    zoom
        from {-webkit-transform scale(0)

to
    -webkit-transform scale(1)
    transform scale(1)

}
    @keyframes
        zoom
            from {transform scale(0)
    .close
        position absolute
        top 15px
        right 35px
        color #f1f1f1
        font-size 40px
        font-weight bold
        transition 0.3s

.close:hover,
.close:focus
    color #bbb
    text-decoration none
    cursor pointer

@media only screen and (max-width: 700px)
    .modal-content
        width 100%

.wrapper
    width 100%
    margin 0

#gallery-content
    width auto
    margin 0 auto
    & > div
        display block
        float left
        width 300px
        margin 0 20px 20px 0
        -webkit-transition left .4s ease-in-out, top .4s ease-in-out .4s
        -moz-transition left .4s ease-in-out, top .4s ease-in-out .4s
        -ms-transition left .4s ease-in-out, top .4s ease-in-out .4s
        -o-transition left .4s ease-in-out, top .4s ease-in-out .4s
        transition left .4s ease-in-out, top .4s ease-in-out .4s

.item
    img
        width 300px
        height auto
        min-height 200px

Answer 1

您应该在失败的行上添加换行符。 @media查询与第一个选择器位于同一行;

@media only screen and (min-width: 35em)    .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus

应注明为;

@media only screen and (min-width: 35em)
    .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus

这样预处理器就知道visuallyhidden选择器是媒体查询的一部分。这也发生在下一个@media查询（几行向下）

keyframes规则也可能会失败;

 @-webkit-keyframes
     zoom
         from {-webkit-transform scale(0)

 to
     -webkit-transform scale(1)
     transform scale(1)

 }

这应格式如下：

 @-webkit-keyframes
      zoom
           from 
                -webkit-transform scale(0)
           to
                -webkit-transform scale(1)
                transform scale(1)

在预期的＆＃34;缩进＆＃34;，得到＆＃34 ;.＆＃34;？的Node.js项目中，手写笔的错误是什么？

问题

背景

错误

代码

1 个答案: