【入門編】Sassを導入しよう!CSSをもっと効率的に&早く書く方法【HTML・CSS コーディング】

Поділитися
Вставка
  • Опубліковано 9 вер 2024
  • CSSを効率的に書けるSassを導入してみましょう!
    初心者向けに、導入方法や基本的な構文を紹介する入門講座です。
    Sass 公式サイト
    sass-lang.com/
    Sassの動作シュミレーションができるサイト
    www.sassmeiste...
    SassのコンパイルができるVS Code拡張機能
    「DartJS Sass Compiler and Sass Watcher」
    marketplace.vi...
    ↓↓↓VS Code自体のインストールや機能紹介はこちら↓↓↓
    【初心者向け】Visual Studio Codeの使い方・便利機能解説!ショートカット/日本語化/Emmet【作業効率化】
    • 【初心者向け】Visual Studio C...
    ★★★「Webの神様」メンタープランのご案内★★★
    ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です!
    【お知らせ動画】
    「Webの神様」があなたのメンターになります
    • 【お知らせ】「Webの神様」があなたのメンタ...
    【プランの詳細・お申し込み(MENTA)】
    menta.work/pla...
    未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます!
    是非ともご検討いただければ幸いです。
    ★★★★★★★★★★★★★★★★★★★★★★★
    -- Webの神様 --
    未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです!
    【タグ】
    #コーディング #プログラミング
    【SNS】
    -- Twitter --
    / webgodweb
    -- Facebook --
    / webgodweb
    【運営会社】
    株式会社カラフルクローバー
    www.colorful-c...

КОМЕНТАРІ • 16

  • @webgodweb
    @webgodweb  Рік тому +6

    CSSを効率的に書けるSassを導入してみましょう!
    初心者向けに、導入方法や基本的な構文を紹介する入門講座です。
    Sass 公式サイト
    sass-lang.com/
    Sassの動作シュミレーションができるサイト
    www.sassmeister.com/
    SassのコンパイルができるVS Code拡張機能
    「DartJS Sass Compiler and Sass Watcher」
    marketplace.visualstudio.com/items?itemName=codelios.dartsass
    ↓↓↓VS Code自体のインストールや機能紹介はこちら↓↓↓
    【初心者向け】Visual Studio Codeの使い方・便利機能解説!ショートカット/日本語化/Emmet【作業効率化】
    ua-cam.com/video/pQ7tmTx5Zbk/v-deo.html

    • @user-qo5pr8dv8i
      @user-qo5pr8dv8i Рік тому

      まってました(^-^)

    • @webgodweb
      @webgodweb  Рік тому +1

      お待たせしました🙇‍♀️🙇‍♀️

  • @haniwa-chan
    @haniwa-chan 7 місяців тому

    とてもわかりやすかったです✨
    早速今日からSassで書いていきたいと思います。
    ありがとうございます😊

  • @user-zi5gy7xp6o
    @user-zi5gy7xp6o 7 місяців тому

    とっても分かりやすかったです。

  • @ranu800
    @ranu800 Рік тому

    ようやくきたあああ

    • @webgodweb
      @webgodweb  Рік тому

      おまたせしました!!!☺️

  • @user-dd7zq4gn6r
    @user-dd7zq4gn6r 3 місяці тому

    _reset.scssとは何のためのパーシャルファイルなのですか?

  • @visvim1978
    @visvim1978 11 місяців тому

    質問させてください。
    コンパイルする際の拡張機能ですが、Live Sass Compilerとどちらが良いでしょうか??

    • @webgodweb
      @webgodweb  11 місяців тому

      私も利用していて、特に問題もなく安定しているので「DartJS Sass Compiler and Sass Watcher」がおすすめです!
      今の状況をきちんと把握できておらず恐縮ですが、以前「Live Sass Compiler」がたくさん使われていた時代から、新仕様(Dart Sass)に対応した「DartJS Sass Compiler and Sass Watcher」に移行した方が多いのではないかと思います!
      ※当時は「Live Sass Compiler」が新仕様に対応していなかったからなのですが、現在はもしかしたらアップデートされているかもしれません…!

  • @YMR1122
    @YMR1122 Рік тому +1

    mixinではなくてextend使ってますがmixinのほうがいいんでしょうか?

    • @webgodweb
      @webgodweb  Рік тому

      ご質問ありがとうございます!
      下記の記事が参考になるかもしれません。
      stand-4u.com/css/sass/mixin-extend.html
      似てはいるけど若干挙動が違うので、この記事でも解説しているように、@mixinのほうが汎用性が高くて使いやすいのではないかと私も思います。

    • @helvetica4605
      @helvetica4605 Рік тому

      なんかmixinの方がコンパイル後のコード量が少なかった気がする

  • @sk-mq2no
    @sk-mq2no Рік тому

    18:09

  • @user-tu1uu5ex8r
    @user-tu1uu5ex8r 4 місяці тому

    style.min.cssとstyle.min.css.mapが
    出てこないのですが
    何が原因なのでしょうか?

    • @webgodweb
      @webgodweb  4 місяці тому

      style.css だけはきちんと生成されておりますでしょうか?VS CodeのSCSS拡張機能は何をつかっていますか?