SASS (scss) の基本的な使い方
Dart Sass (scss) の基本的な使い方 Sass の公式サイトの Dart Sass のドキュメントを元に作成した基本的な使い方に関する覚書です。 公式に推奨されている実装環境が Dart Sass になって、@import や除算演算子としてのスラッシュの使用が非推奨（将来的には廃止）になり、@use や @forward が導入され、Sass 関数からビルトインモジュールへ移行されるなどの変更（Breaking Changes）があったため内容を書き換えました。 2021年12月21日 Dart Sass (scss) の基本的な使い方 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には SCSS 構文とインデント構文（Sass 構文
Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita
概要 ・Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール ・ツールの中身はwebpackを利用している ・webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている ・lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる ・Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる ※webpackが分からない方はこちらを参照 webpackとは？ 使い方 初期状態 ※npmが分からない方は、先にこちらを参照 npmとは？【フロントエンドパッケージ管理】 Laravelをインストールすると、 package.jsonとwebpack.mix.jsが用意されている。 package.jsonには Laravel Mix自体やその
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
Autoprefixer RailsでCSSのベンダープレフィックスをsprocketsに任せよう - Qiita
はじめに CSS3のアニメーションなど新し目のものを使おうとするとベンダープレフィックス(-webkit-hogehoge)みたいなのをつけないといけない時があるよね？ ベンダープレフィックスをつけるとこんな感じで同じようなことを各ブラウザ向けに何度も書かなければならなくなってしまう。 animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; このベンダープレフィックスを意識していちいちこのプロジェクトで対応するブラウザにはこのCSSにはこのプレフィックスが必要なんて考えたりするのって生産性が悪いよね？ それにシンプルなコードにならない。 そこでベンダープレフィックスを自動でつけてくれるAutoprefixerなんだけど、基本的にGulpやWebpackなどフロントエンドのツールに組み込ん
SprocketsをやめてWebpackerに移行したのでどうやったか公開する - patorashのブログ
ようやくSprocketsからWebpackerに移行したので、そのためにやったことをまとめておきます。 移行前の状態 Railsのバージョンは6.0系 Sprockets4 CoffeeScript Sass Bootstrap3を使用 yarnは使ってる 筆者（私）はECMAScriptに関してはそこまで詳しくなくて、今後習得していきたいと思っているレベル。 方針 「とにかくWebpackerに移行する」ということを念頭に置き、JavaScriptを完璧にモジュール化する等は目指さない。Webpackerで動けばいい。後でリファクタリングしていくから！ Webpackerをざっくり理解する Webpackerはwebpackの設定などをほとんど意識することなく、いい感じに使えるようにしてくれるやつです。 webpackをざっくり理解する じゃあwebpackって何？となるかと思いますが
Ruby on Rails: cssの管理をAssets PipelineからWebpakerに移行するときのメモ - Madogiwa Blog
個人のアプリケーションを今まではデフォルトのアセットまわり(CSS等)をSprockets、JavaScriptをWebpackerでビルドするような形にしてたのですが、 今回はstylesheetをWebpackerで管理するようにしたので、そのへんの手順をメモしておきます📝 対応したアプリケーションのRailsのバージョンは6.0.3.2、Webpackerのバージョンは5.1.1です。 .cssファイルをWebpackerで管理する assets配下の.cssファイルをjavascript配下に移動 entryの.jsで.cssファイルをimportしてWebapckerのビルド対象にする .cssファイルを個別のファイルとしてビルドするようにする Viewでビルドされた.cssファイルを読み込む おまけ：eslintの対象からCSSまわりを除外する おまけ: Sproketsの無
Rails5.1.3でsassとjsの管理をSprocketsからWebpackerに移行した - Qiita
上記コマンドでwebpacker(webpack)の設定とか諸々追加されます。ちょっと特徴的なのがwebpackでコンパイル対象となるディレクトリがapp/javascript/packs以下のファイル全てがentryになるところでしょうか。 構成 私自身が普段基盤システムやDevOps系のことをやっててフロントエンド周りにそこまで詳しくないので、今回は一旦assets以下の構造をapp/javascript以下に移行する形でやってみようと思います。 app/javascript │ ├── javascripts │ ├── application.js │ ├── ... │ ├── packs │ └── application.js │ └── stylesheets ├── application.scss ├── ... packs/application.jsでは
Is it possible to import a whole directory in sass using @import?
I'm modularizing my stylesheets with SASS partials like so: @import partials/header @import partials/viewport @import partials/footer @import partials/forms @import partials/list_container @import partials/info_container @import partials/notifications @import partials/queues Is there any way to include the whole partials directory(it's a directory full of SASS-partials) like @import compass or som
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
Rails 7: dartsass-rails gemはNode.jsなしで使える｜TechRacho by BPS株式会社
週刊Railsウォッチ20220228でもお伝えしましたが、つい最近、dartsass-rails gemがRailsのGitHubリポジトリで正式に登場しました。 dartsass-railsは、本家Dart Sassのバイナリ実行ファイルをラップしています。現時点ではLinuxとmacOSでi32版とx64版、Windowsでx64版のバイナリ実行ファイルがあります。今回初めて気づきましたが、Dart Sassは2016年のごく初期からバイナリ実行ファイルをリリースし続けているんですね。 参考: Releases · sass/dart-sass どこかで見たような話ですね。そう、以下の記事にも書いたように、tailwindcss-rails gemもバイナリ版CLIツールをラップしています↓。最近のJSツールチェインはバイナリ版も出すのが流行りなのでしょうか。 Rails 7: im
Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la
【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる - Qiita
最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは？ ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC（Single File Components）をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti
stylelintの導入とVS Codeの設定の方法 - Qiita
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ち」3ます。 CSSは素のままだとエラーを吐かず、どこに原因があるのかを探すのに苦労しますが、stylelintを使うことで基本的な構文エラーやスタイルの重複、タイポなどがあると、エラーを検出し、どこのファイルの何行目に問題があるのか教えてくれます。一部の書式に関する規則に対しては自動的に修正することもできます。設定できるルールは170以上あり、柔軟にカスタマイズできます4。また、GitHub5などでも使われ、CSSだけではなく、SCSSやSass、Reactのstyled c
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法 | オンスタ | オンラインで学習するための近道になるサイト
オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。
VueCLI3で共通のSassファイルを各コンポーネントから読み込む - Qiita
{ loader: "sass-loader", options: { data: "$env: " + process.env.NODE_ENV + ";" } } しかし、VueCLI3では、webpackの設定が隠されているため、 webpack.config.jsなどに書いていた設定はvue.config.jsに書きます🙃 css.loaderOptionsを使う vue.config.js に以下のような設定を追加します。（参考例） const path = require('path'); const SRC_DIR = path.resolve(__dirname, 'src'); const SASS_DIR = path.join(SRC_DIR, 'assets', 'sass'); const SASS_AUTO_IMPORTS = ` @import "${pat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vite-plugin-sass-glob-import
Using with Preprocessors - Tailwind CSS
gulp-sassインストール時のエラー「`which` failed Error: not found: python2」の対処方法（Windows）
【node-sass】 nodeバージョンを上げた時に発生したError: Can't find Python executable "python", you can set the PYTHON env variable.の直し方 - Simple minds think alike
Webエンジニア（コーダー）向けVite環境の紹介【初心者向け解説】
