質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3208閲覧

SourceMapを利用した要素の検証で、sassの行数がおかしい

muro

総合スコア99

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2014/11/27 03:55

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

すみません、解決しました。
現在のChromeの最新バージョン41.0.2272.89 mで改めて要素の検証を確認したところ、正常にsassの行数が表示されるようになっていました。
おそらくこの質問を書いた時点のバージョンでは、拡張子sassに正式に対応していなかったのかと…。

行数表示をcssからsassに変える方法を書き忘れていたので、念のため書いておこうと思います。
0. 要素の検証(F12)で右上にある歯車アイコンをクリックし、settingを開く
0. Generalタブ
0. Sources
0. Enable CSS source mapsにチェックを入れる

投稿2015/03/19 04:04

muro

総合スコア99

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問