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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

960閲覧

SCSSの記述について

nokota

総合スコア24

Sass

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/26 23:54

編集2019/07/26 23:55

SCSSも<style>タグの中にCSSと同じように書けばいいのですか?コピペしたものが働かないのですが...

このサイトからのコピペです
https://www.nxworld.net/tips/button-hover-and-click-unique-effect-examples.html

HTML↓

<div class="buttons"> <button class="blob-btn"> Blob Button <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </button> <br/> <button class="blob-btn"> This one is slightly bigger <span class="blob-btn__inner"> <span class="blob-btn__blobs"> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> <span class="blob-btn__blob"></span> </span> </span> </button> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="goo"></feColorMatrix> <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend> </filter> </defs> </svg>

SCSS↓

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } $openSans: 'Open Sans', Helvetica, Arial, sans-serif; body { background: #333; font-family: $openSans; } .buttons { margin-top: 50px; text-align: center; } $cyan: #0fe0f5; $dark: #222; $borderW: 6px; .blob-btn { $numOfBlobs: 4; z-index: 1; position: relative; padding: 20px 46px; margin-bottom: 30px; text-align: center; text-transform: uppercase; color: $cyan; font-size: 16px; font-weight: bold; background-color: transparent; outline: none; border: none; transition: color 0.5s; cursor: pointer; &:before { content: ""; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: $borderW solid $cyan; } &:after { content: ""; z-index: -2; position: absolute; left: $borderW*1.5; top: $borderW*1.5; width: 100%; height: 100%; border: $borderW solid $dark; transition: all 0.3s 0.2s; } &:hover { color: $dark; &:after { transition: all 0.3s; left: 0; top: 0; } } &__inner { z-index: -1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } // additional container created, because in FF blobs are breaking overflow:hidden of element with svg gooey filter &__blobs { position: relative; display: block; height: 100%; filter: url('#goo'); } &__blob { position: absolute; top: $borderW; width: 100% / $numOfBlobs; height: 100%; background: $cyan; border-radius: 100%; transform: translate3d(0,150%,0) scale(1.7); transition: transform 0.45s; @supports(filter: url('#goo')) { transform: translate3d(0,150%,0) scale(1.4); } @for $i from 1 through $numOfBlobs { &:nth-child(#{$i}) { left: ($i - 1) * (120% / $numOfBlobs); transition-delay: ($i - 1) * 0.08s; } } .blob-btn:hover & { transform: translateZ(0) scale(1.7); @supports(filter: url('#goo')) { transform: translateZ(0) scale(1.4); } } } }

そもそも、CSSとSCSSは違うものなのでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

SCSSは記述こそCSSと近いものがありますが、そのままでは使えません。
手順は

  1. *.scssファイルを用意
  2. gulpなどを使いコンパイルして*.cssファイルを生成
  3. 生成した*.cssファイルをhtmlで読み込む

という手順になります。

一度コンパイルする必要があるので、<style>に直接SCSSを記述しても反映されません。
以下のようなサイトを利用して、SCSS → CSS にしてから<style>に記述する必要があります。
SassMeister

投稿2019/07/27 00:13

mksk

総合スコア247

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問