cssとsassとmapを同じフォルダに置いた状態で、Chromeおよびfirefox(いずれも最新バージョン)で、HTML上にあるそれぞれの要素に対して要素の検証(F12メニュー)を行いました。
要素のスタイルが表示されている画面で、本来はcssの何行目かを表す部分がsassの何行目に変わっているところまでは良いのですが、どの要素であってもsassの行数が最終行になってしまいます。
(下記のサイトの場合だと、ulに対しても、liに対しても、pに対しても、「style.sass:10」と表示されてしまう)
要素検証でsassの正しい行数を表示させるためには、どうすれば良いのでしょうか?
なお、cssとmapの出力はBrackets SASSで行いました。
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<link rel="stylesheet" href="css/style.css" /> 7</head> 8<body> 9 10<ul> 11 <li>test</li> 12 <li>test</li> 13</ul> 14 15<p>hogehoge</p> 16 17</body> 18</html>
lang
1/* style.sass 全部で10行 */ 2ul 3 color: #f00 4 li:last-of-type 5 color: #00f 6p 7 font-size: 20px 8 9dl 10 width: 100px
lang
1ul { 2 color: #f00; } 3 ul li:last-of-type { 4 color: #00f; } 5 6p { 7 font-size: 20px; } 8 9dl { 10 width: 100px; } 11 12/*# sourceMappingURL=style.css.map */
lang
1{ 2 "version": 3, 3 "file": "style.css", 4 "sources": [ 5 "style.sass" 6 ], 7 "sourcesContent": [], 8 "mappings": "AAAA,AACC,AAAO,AAAR,AAAG,AAAE,AAEH,AAAO,AACT,AACC,AAAW,AAEZ,AACC,AAAO", 9 "names": [], 10 "sourceRoot": "" 11}
lang
1{ 2 "path": { 3 "css/*.sass": { 4 "sass.enabled": true, 5 "sass.options": { 6 "sourceComments": false 7 }, 8 "linting.collapsed": false 9 } 10 } 11}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。