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

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

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

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

HTML

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

Q&A

解決済

2回答

1415閲覧

Sassで入れ子構造を試したけど反映されない

退会済みユーザー

退会済みユーザー

総合スコア0

Sass

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

HTML

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

0グッド

0クリップ

投稿2019/07/03 07:50

編集2019/07/03 07:51

前提・実現したいこと

HTMLとSassを用いてホームページ作成の練習をしています。
Cssをより簡単に記述できるSassという言語を知り、早速試そうと思いコーディングをしていました。

発生している問題・エラーメッセージ

Sassの「入れ子構造」と呼ばれる構造を使ってSassを記述するも反映されない。
以下にHTMLコードとSassコードを貼ります。
htmlのtop-wrapper内にあるh1タグを透過させたいです。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <title>練習</title> 7 <link rel="stylesheet" href="dot.scss"> 8</head> 9 10<body> 11 <header> 12 13 </header> 14 <div class="top-wrapper"> 15 <div class="container"> 16 <h1>あいうえお</h1> 17 </div> 18 19 </div> 20 <div class="lesson-wrapper"> 21 22 </div> 23 <div class="message-wrapper"> 24 25 </div> 26 <footer> 27 28 </footer> 29 30</body> 31 32</html>

Sass

1body { 2 margin: 0; 3 font-family: "Hiragino Kaku Gothic ProN"; 4} 5 6a { 7 text-decoration: none; 8} 9 10 11.top-wrapper { 12 padding: 180px 0 100px 0; 13 background-image: url(https://prog-8.com/images/html/advanced/top.png); 14 background-size: cover; 15 color: white; 16 h1{ 17 opacity: 0.7; 18 } 19 20 21} 22 23 24 25.container { 26 width: 1170px; 27 padding: 0 15px; 28 margin: 0 auto; 29} 30

試したこと

Css形式でかくと反映されるようでした。

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

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

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

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

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

guest

回答2

0

ベストアンサー

「sass コンパイル」で検索すると便利ツールが出てきます。
とりあえず、いくつかリンク貼っておきます。

ターミナル使用
CSSを超効率化する!SASSの基本と導入方法まとめ

Dreamweaver使用
Sassってみよう!〜コンパイル編〜

atom使用
AtomでSass(SCSS)をコンパイルできるようにしてみた

投稿2019/07/03 09:22

akihiro3

総合スコア955

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

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

退会済みユーザー

退会済みユーザー

2019/07/03 10:28

ありがとうございます!のぞいてみます!
guest

0

記述的な間違いはなかったです。

cssにコンパイルしてないんじゃないですか?
cssと同じようにhtmlから読み込んでも使えませんよ。

投稿2019/07/03 08:02

zushi0905

総合スコア683

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

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

退会済みユーザー

退会済みユーザー

2019/07/03 08:07

ほおなるほど、・・・ すみません全くの無知なのですがどうしたら読み込んでくれるのでしょうか?
zushi0905

2019/07/03 08:13

sassで検索してください。
退会済みユーザー

退会済みユーザー

2019/07/03 08:14

zushi0905さんの回答にあるように、「cssにコンパイル」ですね。 sassファイルをcssファイルにコンパイルする環境が必要です。 検索するといくつか出てきます。
退会済みユーザー

退会済みユーザー

2019/07/03 10:29

ありがとうございます、そのままできないことを知りました・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問