Sassで現在詰まっている場所について質問をしようとしていましたが、質問文を考えてる間に解決したパターンですｗ 結論、「パスではなくurlで指定したら解決しました。」 解決したいこと 「別の階層に存在する、変数をまとめたscssファイルを読み込みたいです。」 作業中にファイル数が多くなリ見通しがわるくなった為、フォルダ分けして整頓した結果、変数をまとめたファイル(variables.scss)をインポートができなくなりました。 指定先を変更しましたが一向に読み込まれず、解決が難しく感じたので、アドバイスや解決策を教えて頂けますと幸いです。 発生している問題・エラー 以下の画像の階層で、トップ画面のファイル(top.scss)から、変数をまとめたファイル(variables.scss)をインポートしようと試みています。 すると以下のようなメッセージが出力され、読み込まれません。 Error:
変数の値をそのままプロパティの値として使用する場合は、上記のように $変数名 の形で参照すればOKです。 何らかのキーワードの一部（セレクタ名の一部など）や、コメントの中で変数の値を参照する場合は、インターポレーション（#{$変数名}）の形式で参照する必要があります。 インターポレーションで文字列変数の値を参照すると、引用符は削除されて展開されます。 入力 (SCSS)
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに node-sass に感じていたイライラポイントは、以下の通り。 インストールが遅い Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。 要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか) モチベとしては、「 node-sass でコケたときに
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です。 こうすると余計なキャッシュファイルが生成されてしまいますが、その代わりほぼ一瞬でコンパイルが完了します。 もう劇的に見
一覧に戻る « 前 次 » 第4章 高度な機能を覚えてSassを使いこなそう 4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin） ミックスインの基本
そもそもSassとは？ CSSを効率的に書けるように、CSSの機能を拡張した言語です。 Sassを使うメリットは CSSを簡単に書ける CSSの中で変数を使ったり、計算を行うことができる などがあります。 そんな便利なメリットを持つSassですが、特に大きなメリットとして、 複数のCSSファイルをまとめられる ことが挙げられます。 Sassで複数のファイルをまとめる手順 ① ファイルの中でまとめる部分を決める。 ある一定の内容ごとにまとめられるところがないかを探します。 例)メニューバー、メインコンテンツ、送信フォーム... また、一定の機能でまとめることもできます。 例)Sassで定義した変数、リセットCSS... このように分割することで、コードが読みやすくなり、 後々コードに修正を加える時も、どこを見ればいいかわかりやすくなります。 特に複数人で開発する時はこういった風に、コードを分
はじめに この記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Source mapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。 前提 npmコマンドをなんとなく使ったことがある gulpfile.jsというものは知っている 目指す構成 Sassのコンパイルをする Source mapを作成する Minifyする Autoprefixerでベンダープレフィックスを自動的に付与する 1〜4のことをファイルの変更があったら自動的に行う 学べること Gulp実行までの手順 Gulpのタスクの作り方 Gulpのタスクの実行の方法 ファイル監視の方法 環境設定 まずはGulpを動かすための環境を整えましょう。Gulpを使った
ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。
Atomでコーディングをしていてｓｃｓｓのコンパイルが必要になり、簡単にコンパイルをしてくれるパッケージ「sass-autocompile」を利用したので導入と基本的な使い方までを紹介します！ sass-autocompileとは sass-autocompileは、sassとscssファイルをコンパイルしてくれるパッケージです。パッケージ設定でファイルの保存をしたら自動でコンパイルしてくれたり、.minファイルでコンパイルしてくれたりする便利機能を利用することができます。 インストール前に必要なもの sass-autocompileを利用するには、事前にnode.jsとnode-sassをPC自体にインストールする必要があります。 node.jsとは JavaScriptはブラウザサイドで動作するのに対して、node.jsはサーバーサイドで動作するJavaScriptで、メモリ消費が少な
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
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ページを開く
