如何将css3添加到项目mvc web应用程序visual studio 2015_Css_Asp.net Mvc 4_Css Selectors

如何将css3添加到项目mvc web应用程序visual studio 2015

css asp.net-mvc-4

如何将css3添加到项目mvc web应用程序visual studio 2015,css,asp.net-mvc-4,css-selectors,Css,Asp.net Mvc 4,Css Selectors,问题无法将导航菜单添加到我的项目中，因为css3不需要定义原因？它在所有css文件中显示为绿线为什么如何解决这个问题？我的代码 <head> <link href="~/Content/menu.css" rel="stylesheet" /> </head> <div class="grid"> <div class="grid__item"> <nav class

问题

无法将导航菜单添加到我的项目中，因为css3不需要定义原因？

它在所有css文件中显示为绿线为什么

如何解决这个问题？

我的代码

<head>

    <link href="~/Content/menu.css" rel="stylesheet" />

</head>
 <div class="grid">
        <div class="grid__item">
            <nav class="header">

                <a href="#" class="menu-icon1">&#9776; menu</a>

                <ul>

                    <li><a href="#" class="current">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>

                </ul>

            </nav>
        </div>
    </div>

想象一下我的问题

您有一个普通的css文件。我想你想用指南针和sass。这需要一个编译器，即php+css。你正试图发明一种新的语言概念。我想是吧。删除美元符号并使用实际参数。好的，我要做什么来编译它？在系统上安装compass并让compass监视您的scss文件。compass将创建css文件。谢谢你，问题解决了

@import "compass/css3";

$base-font-size:    16px!default;
$base-line-height:  24px!default;
$base-spacing-unit: $base-line-height!default;

body {
    background: grey;
    color: #555;
}

.header {

    width: 100%;
    background-color: #4C8FEC;
    height: $base-line-height * 2;
    margin-top: $base-line-height;
}
a {

    color: black;
    text-decoration: none;
    font-weight: bold;
    &:hover {
    color: white;

}

}

.current {

    color: white;

}

.menu-icon1 {

    display:inline-block;
    width: 100%;
    height: $base-line-height * 2;
    color: black;
    line-height: $base-line-height * 2;
    text-align: center;;

    }


    nav ul, nav:active ul {

        display: none;
        position: relative;
        padding: 0 $base-spacing-unit;
        background: #4C8FEC;
        width: 100%;
        list-style: none;

    }

    nav li {

        text-align: left;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

    nav:hover ul {

        display: block;
    }


/*MEDIA QUERY*/

// @include media-query(desk){


@media screen and (min-width: 600px) {

nav {

    float: left;


    .menu-icon1 {
        display: none;
    }   
}

nav ul, nav:active ul {

        display: inline;
        padding: 0;
        width: 100%;

    }

    nav li {

        display: inline-block;
        width: auto;
        padding: 0 $base-spacing-unit;
        line-height: $base-line-height * 2;

    }


}