オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。
【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
grunt watch が遅い時の改善方法 - Qiita
$ grunt watch Running "watch" task Waiting...OK >> File "src/sass/screen.scss" changed. Running "compass:dist" (compass) task overwrite app/css/screen.css (0.333s) Compilation took 0.342s Running "cssmin:add_banner" (cssmin) task File app/css/screen.min.css created. Running "cssmin:minify" (cssmin) task File app/css/app.min.css created. File app/css/screen.min.css created. Done, without errors. Co
Compass のミックスイン | Web Design Leaves
CSS3 モジュール CSS3 モジュールは、ベンダープレフィックスや、ブラウザの下位バージョンに対応するプロパティを書き出してくれる。 関連項目 ベンダープレフィックスのオン・オフ レガシーブラウザの対応のオン・オフ border-radius() 角丸 Compass/border-radius 書式： border-radius($radius) $radius（角丸の半径）：値を指定しない場合は、デフォルトの 5px になる（ $default-border-radius: 5px ） 値が１つ：一括指定 値が２つ： 左上と右下 右上と左下 値が３つ： 左上 右上と左下 右下 値が４つ： 左上 右上 右下 左下 //一括指定 .simple { @include border-radius(10px); } // 左上と右下 右上と左下 .compound { @include b
WindowsにCompassをインストールしてSASS/SCSS環境を構築する
SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。 インストーラーを使用すると簡単です。下記URLからダンロードしてください。 ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。 スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。 ruby -v と入力して ruby 2.0.0p0 と表示されたらインストール完了です。 Compassのインストール 「コマンド プロンプト」から下記のコマンドを順に実行します。 gem update --system gem install compass 下記コマンドでインストールされたか確認し
Sassで&による親セレクタ参照
Sassで&による親セレクタ参照 ネタ元：第3回 LESS記法について（中級編：ネストの応用）：LESSで3倍ラクするスマートフォンコーディング｜gihyo.jp … 技術評論社 この記事を読んでSassで今までこれ知らなくて損してたわーと思った機能があったのでご紹介。ネタ元はLESSですがSassでも問題なく利用できます。 基本的な親セレクタ参照 Sassでは&を利用することで親のセレクタを参照することができます。例えば以下のように記述すると。 a{ color:red &:hover{ color:blue; } } 次のようなCSSが書き出されます。 a{ color:red } a:hover{ color:blue; } このように&の箇所が親のセレクタに置き換わりCSSが生成されます。 親セレクタ参照の応用 &の前にセレクタを記述することも可能です。例えばIE6だけちょっと表示
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
How to automatically generate CSS sprites with Sass and Compass | Code Chewing
In this tutorial you will learn how to create CSS sprites automatically, using Sass and Compass! No more going back and forth into Photoshop and figuring out the position of each image, then adjusting your stylesheet manually. This tutorial is aimed at Windows users, but the principles are all the same. For this tutorial, I’ll presume you have Sass and Compass running inside your website developme
Sass/Compass よくあるトラブルと 解決方法・回避方法
14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
Spriting with Compass | Compass Documentation
Spriting has never been easier than it is with Compass. You place the sprite images in a folder, import them into your stylesheet, and then you can use the sprite in your selectors in one of several convenient ways. **Note: Only PNG images are supported at this time using chunky_png*. Sprite Tutorial Contents Customization Options Magic Selectors Sprite Layouts Setup For this tutorial, let's imagi
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
CompassでCSSスプライト（Retina対応）
今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio
MarvericksにSass/Compassをインストールしようとしたらハマった: JavaScriptメモ
MarvericksにSass/Compassをインストールして「compass watch」をするとエラーが出てハマった。 /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb:135:in `require': cannot load such file -- sass/script/node (LoadError) Subtheme error. `require': cannot load such file -- sass/script/node (LoadError) [#2148277] | Drupal.org を見るとruby 2.0.0p247だと動かないかもなのでruby-2.0.0-p353をインストールしろとのこと。ということで Homebrew と rbenvをインストールしてruby-2.0.
Compass で日本語の font-family... « をぶろぐ
会社の PC は WIN + NYAOS + ckw な構成。 まず Compass をインストールすっぞ。 $ gem update --system $ gem install compass $ compass -v Compass 0.12.2 (Alnilam) Copyright (c) 2008-2012 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass※詳しいインストール方法や config.ru の説明はあっちゃんのブログのこの記事を参考にしよう。 さて、プロジェクトを作成する。 $ compass create geh
Sass+compassの更新 | code up
久々にSass+compassを触る機会が出来たので、環境を更新。 Sass+compassをEclipse環境にインストールした記事はこちら。 Sassとcompassをアップデート コマンドは次のように実行。 >gem update --system (略) >gem update --system Latest version currently installed. Aborting. >gem -v 1.8.15 >gem update sass (略) >gem update compass (略) >sass -v Sass 3.1.12 (Brainy Betty) >compass -v Compass 0.11.7 (Antares) (略) 新規sassプロジェクトの開始 前回はコマンドラインから実行したが、今後のためにantのターゲットを作成。 <target na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Enable Compass Sass for Vue Cli 3 (vue.config.js)
Sprite generated imaged listed multiple times in Compass task · Issue #42 · gruntjs/grunt-contrib-compass
How to remove the hash from Compass's generated sprite image filenames?
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
WindowsでCompassをコンパイルした時の「Windows-31J」問題 – ハック｜無料グループウェア「アイポ」