我最近搬到了前端开发并引入SASS。我正尝试将以下属性应用于CSS类 - 链接，但组件未获取属性。任何输入是高度赞赏。scss类不适用

HTML：

<div _ngcontent-ype-26="" id="body"> 
    <svg width="1440" height="538"> 
    <g transform="translate(240,20)"> 
     <path class="link" d="M 180 114.92307692307692 
       C 90 114.92307692307692, 
        90 229.84615384615384, 
        0 229.84615384615384"> 
     </path> 
    </g> 
    </svg> 
</div>

SCSS文件：

.link path { 
fill: none; 
stroke: #ccc; 
stroke-width: 1px; 
}

来源

2017-03-03 Abhi

那里真的没有什么使用任何SCSS功能。你可以用普通的CSS轻松完成。您是否想要首先学习SCSS而不了解CSS？这可能不是一个好主意。 – Vince

SCSS已由某人在我的项目中实施。所以我必须尽快把它拿起来。我对CSS有了基本的了解。但即使是一个简单的CSS这是行不通的。任何投入？编辑：对不起，我不知道你是谁提供了第二个答案。 :) – Abhi

您对其中一个答案所述的评论*它是4级div - > svg - > g - >路径 - >链接*。如果这就是你的SVG的结构（*注：*有问题的代码不遵循这个结构），那么你不能根据'link'来设置'path'的样式，因为在CSS中没有父选择器（即使Sass/SCSS最终必须编译成CSS）。你只需要尝试'路径'或'g路径'或'div svg g路径'或任何适合你的东西。 – Harry

你可以尝试path.link代替。链路路径为您选择

来源

2017-03-03 03:00:19 pucky124

不，它仍然无法正常工作。它是4级div - > svg - > g - > path - >链接。我猜这是否有什么可以做的..任何想法如何处理这种情况？ – Abhi

你SCSS将适用于一个path元素是类link的元素的孩子。在你的情况下，你的path元素是元素与link类。所以，你的SCSS应该看起来像这样：

path.link { 
    fill: none; 
    stroke: #ccc; 
    stroke-width: 1px; 
}

来源

2017-03-03 03:17:42 Vince

还没有运气！ – Abhi

它似乎适用于我：http://codepen.io/VAggrippino/pen/mWPqpw – Vince

你知道如何使用浏览器的开发者工具来查看正在应用哪些样式？ – Vince

scss类不适用

HTML：

SCSS文件：

回答

相关问题