【Sass】別Sassファイルからimport - Qiita
Sassで現在詰まっている場所について質問をしようとしていましたが、質問文を考えてる間に解決したパターンですｗ 結論、「パスではなくurlで指定したら解決しました。」 解決したいこと 「別の階層に存在する、変数をまとめたscssファイルを読み込みたいです。」 作業中にファイル数が多くなリ見通しがわるくなった為、フォルダ分けして整頓した結果、変数をまとめたファイル(variables.scss)をインポートができなくなりました。 指定先を変更しましたが一向に読み込まれず、解決が難しく感じたので、アドバイスや解決策を教えて頂けますと幸いです。 発生している問題・エラー 以下の画像の階層で、トップ画面のファイル(top.scss)から、変数をまとめたファイル(variables.scss)をインポートしようと試みています。 すると以下のようなメッセージが出力され、読み込まれません。 Error:
SCSS で変数を使用する | まくまくSassノート
変数の値をそのままプロパティの値として使用する場合は、上記のように $変数名 の形で参照すればOKです。 何らかのキーワードの一部（セレクタ名の一部など）や、コメントの中で変数の値を参照する場合は、インターポレーション（#{$変数名}）の形式で参照する必要があります。 インターポレーションで文字列変数の値を参照すると、引用符は削除されて展開されます。 入力 (SCSS)
gulp を使って自動でsass をコンパイルできるようにする - Qiita
一体何番煎じになる記事だろうか…。 gulp を使ってsass を自動コンパイルできるようにした。 【重要】追記(2022/01/02) gulpfiles.js で「gulp.task～」を使って記述する方法は、2018年12月から非推奨になっているため、この記事は参考程度に読んでください。というのを3年位経った2022年に気づきました…。 別途記事を投稿する予定です。 事前準備 gulp を使えるようにするには、予め以下をインストールする必要がある。 node.js Ruby sass これらのインストールについてはOS によって異なるため、省略。 (2019年3月22日削除) npm init node.js インストール後、gulp をインストールしたいディレクトリで以下のコマンドを実行する。
sass-loader で dart-sass を使う - Qiita
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに node-sass に感じていたイライラポイントは、以下の通り。 インストールが遅い Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。 要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか) モチベとしては、「 node-sass でコケたときに
遅いSassのコンパイルが早くなる方法（普通か？）｜R太の閃光絵巻
Sassは保存してcssに書きだされるまでにいつもく3秒らい時間がかかるので、ちょっとイライラしていました。 しかし、このコンパイルを早くする設定があるのでした。 ◆config.rb このファイルの中身は大体こんなかんじになってると思いますが、 [html] # Set this to the root of your project when deployed: http_path = “/” css_dir = “../css” sass_dir = “../sass” images_dir = “../img” javascripts_dir = “../js” cache = true [/html] この中のココ！ cache = true にすればOKです。 こうすると余計なキャッシュファイルが生成されてしまいますが、その代わりほぼ一瞬でコンパイルが完了します。 もう劇的に見
柔軟なスタイルの定義が可能なミックスイン（@mixin） | Web制作者のためのSassの教科書 - 公式サポートサイト
一覧に戻る « 前 次 » 第4章 高度な機能を覚えてSassを使いこなそう 4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin） ミックスインの基本
Sassで@importを使ってファイルを分割する手順。 - Qiita
そもそもSassとは？ CSSを効率的に書けるように、CSSの機能を拡張した言語です。 Sassを使うメリットは CSSを簡単に書ける CSSの中で変数を使ったり、計算を行うことができる などがあります。 そんな便利なメリットを持つSassですが、特に大きなメリットとして、 複数のCSSファイルをまとめられる ことが挙げられます。 Sassで複数のファイルをまとめる手順 ① ファイルの中でまとめる部分を決める。 ある一定の内容ごとにまとめられるところがないかを探します。 例)メニューバー、メインコンテンツ、送信フォーム... また、一定の機能でまとめることもできます。 例)Sassで定義した変数、リセットCSS... このように分割することで、コードが読みやすくなり、 後々コードに修正を加える時も、どこを見ればいいかわかりやすくなります。 特に複数人で開発する時はこういった風に、コードを分
GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと｜クロノドライブ
はじめに この記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Source mapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。 前提 npmコマンドをなんとなく使ったことがある gulpfile.jsというものは知っている 目指す構成 Sassのコンパイルをする Source mapを作成する Minifyする Autoprefixerでベンダープレフィックスを自動的に付与する 1〜4のことをファイルの変更があったら自動的に行う 学べること Gulp実行までの手順 Gulpのタスクの作り方 Gulpのタスクの実行の方法 ファイル監視の方法 環境設定 まずはGulpを動かすための環境を整えましょう。Gulpを使った
Sass(SCSS)のmixin, extendなどまとめ - Qiita
Sass(SCSS)のややこしそうな機能まとめ。 変数 共通な色や数値などを定義しておける。 他に、文字列や真偽なども定義可能。
Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
CSSの拡張言語Sassの強力な機能の一つは、ファイルを複数に分割できる「Partials」です。ファイルを機能ごとに分割することで、見通しのよいコードを記述できます。近年注目を浴びている「OOCSS」をSassで実現する上でもよく使われています。 しかし、分割するファイルが多くなればなるほど、大量の@importを記述したり、ファイル分割の度に@importを書き換える手間がかかります。本エントリーでは、このような大量のimport文を短くまとめる方法について紹介します。 Sassのファイルの分割と問題点 例えば、_a.scssと_b.scssの2ファイルに分割したスタイル設定を、style.scssにて読み込む設定をしてみます。
【Sassを覚えよう！Vol.9】変数と演算で効率的に
ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。
Atomのsass-autocompileでSassのコンパイルをしてみよう | WebLifeTimes
Atomでコーディングをしていてｓｃｓｓのコンパイルが必要になり、簡単にコンパイルをしてくれるパッケージ「sass-autocompile」を利用したので導入と基本的な使い方までを紹介します！ sass-autocompileとは sass-autocompileは、sassとscssファイルをコンパイルしてくれるパッケージです。パッケージ設定でファイルの保存をしたら自動でコンパイルしてくれたり、.minファイルでコンパイルしてくれたりする便利機能を利用することができます。 インストール前に必要なもの sass-autocompileを利用するには、事前にnode.jsとnode-sassをPC自体にインストールする必要があります。 node.jsとは JavaScriptはブラウザサイドで動作するのに対して、node.jsはサーバーサイドで動作するJavaScriptで、メモリ消費が少な
Atomでsassを使いたいと思ったのでその方法をまとめました。 - Qiita
Atomにsassを導入してみた。 以前はcould9でsassを使っていたけど、いつも使ってるエディタのatomに導入しようと思った為。 導入方法 導入には「nodo.js」と「node-sass」のインストールが必要です。 Atomには、パッケージで「sass-autocompile」があるのでそのインストールまでまとめていきます。 nodo.jsのインストール 公式サイト：https://nodejs.org/ja/ 公式サイトからインストールします。 ターミナルでnode-vを打ちインストールされてるか確認。 npm -vも同時にインストールされてるのでこちらも一応こちらも確認。
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
これなら簡単！Bootstrap 4.0のデザインがカスタマイズできる商用でも無料のオンラインツール -Bootstrap Magic
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【エラー解決方法】Error: File to import not found or unreadable:【gulp】 | わやずぶろぐ
Sass(Scss) Memo: 変数 | Culture27
SCSSの変数と、CSS3のcalc()を併用するには - Qiita
gulpでSASSを自動コンパイルする - Qiita
【初心者向け】Sassをいい感じに活用する
