CentOS6.6でsasscのアップデート失敗 - Qiita
Railsでsassc-railsを使っていて、最近アップデートしたらsasscが1.11.4から1.12.1上がり、bundleが失敗する様になった。 エラーの内容はこんな感じ（長いので一部省略してます）。 bundle Warning: the running version of Bundler (1.16.1) is older than the version that created the lockfile (1.16.2). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`. Fetching gem metadata from https://rubygems.org/......... Using rake 12.3.1 ...（省略） Fet
grid で自動配置したいけど IE11 が無理なので flex で誤魔化す Mixin - Qiita
grid 楽なんで超使いたいけど、自動配置が無理で子要素に個別設定が必要。 でも使いたいんで flex でフォールバック。 でも auto-fit で minmax とかが無理なんで、固定分割で誤魔化す。 @mixin coord($col, $col-msie, $width, $gap-column: 0, $gap-row: 0) { display: grid; grid-template-columns: repeat($col, $width); gap: $gap-row $gap-column; .is-msie & { // IE判定クラス display: flex; flex-wrap: wrap; & > * { width: calc((100% - 1px - #{$gap-column * ($col-msie - 1)}) / #{$col-msie});
Nuxt.jsでCSSの設計を楽にする - Qiita
vueファイルにどんどんCSSを書いていくと管理が大変です。 スコープを適用していれば問題無いですが、CSSファイルが一つのフォルダに纏められてないのは嫌だ！ そこで今回紹介するのは、POSTCSS + ITCSSを使った設計方法をNuxt.jsに適用するというものです。 POSTCSS POSTCSSはCSSツールを作るためのフレームワークです。様々なプラグインを使ってCSSに変更を当てると言うと簡単でしょうか。 sassみたいにネストして書けるプラグインや、ベンダープリフィックスを自動でつけてくれるプラグインなど多種多様です。 プラグインは自分で取捨選択できるため、プロジェクトごとにカスタマイズできることがメリットです！ 詳しくは、ここにわかりやすく解説されています。 ITCSS ITCSSはCSS methodology(方法論)の一つで、BEMやOOCSSなどもそこに含まれます。
pug+sassをparcelを使って爆速で始める - Qiita
はじめに それなりにモダンなWeb開発をするならpugとsassは必須かなぁと思っていたのですが、環境を整えるのがすごくめんどくさそうなんで触らずにいました。 しかし、parcelを使えば簡単なんじゃね？って思い環境を整えたらものすごく簡単で爆速で環境構築できたので書き残しておこうと思います。 ちなみに、parcel自体は昨年末にこの記事を見て少し触った程度です。 手順 parcelをグローバルでインストールする
フォントのCSS初期設定を62.5%にしてremの計算を簡単に解決する方法 - Qiita
こうすることで、1rem = 10px 1.6rem = 16px と切りよくremとpxが連動する 汎用性を持たせる sassのmixin変数 @mixin fz($size: 24, $base: 16) font-size: $size + px font-size: ($size / ($base * 0.625)) + rem これはpxと、pxに相当するremの両方を書き出す remが後に書き出され、remが使えない時のフォールバックとしてpxも用意するという用途 ※ただし現代ではremはほぼ使えるので font-size: $size + px は無くても可 参照 can i use https://caniuse.com/#feat=rem mixin読み込み方
PostCSSでCSSの中の画像URLのcache busteringを行う方法 - Qiita
でもこのままだと、例えば画像の配信で何かしらのキャッシュが設定されていた場合（Cache-ControlのHTTPヘッダーなど）に、画像を変更してもキャッシュが使用されてすぐに変更をクライアント側に反映できない。 そこでcache busteringを行う。URLの末尾に何かしらのクエリーストリングなどを付けて別のURLにすることで、ブラウザーのキャッシュを回避する方法だ。 上のように変更すれば、新しい画像がブラウザーに読み込まれるようになる。 でも画像の変更があるたびにいちいちCSSをいじるのは面倒なので、自動化したい。そこでPostCSSのプラグインであるPostCSS Cachebusterを使ってみる。 導入は簡単に yarn add -D postcss-cachebuster なり npm install --save-dev postcss-cachebuster なりで。
sassでsyntax errorがでたよ - Qiita
Sass::SyntaxError in Messages#index Showing/User/Username/space/application.html.haml whereline #6raised: invalid CSS after"... height32px"::expected"{,was sassで構文エラー出まして、どこの構文かなぁと思っていたら どうやら、インデントが少しづれていたみたい。。。 なので、height等のインデントを揃えてあげると、うまく動いたよ〜〜。 やったね！ Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationWhat
Mac High Sierra に compass をサクッとインストールする方法 - Qiita
$sudo gem install sass Building native extensions. This could take a while... ERROR: Error installing sass: ERROR: Failed to build gem native extension. current directory: /Library/Ruby/Gems/2.3.0/gems/ffi-1.9.23/ext/ffi_c /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby -r ./siteconf20180228-5487-11of4og.rb extconf.rb mkmf.rb can't find header files for ruby at /System/Library/
hamlにfontawesomeを入れ込む（擬似要素も） - Qiita
hamlにfont awesomeをいれたいんです！ .haml =fa_icon "edit" indentはちゃんと取ってね♪ さて、今回は擬似要素を使う場合も調べました。。 以下はsassです。 &::after { font-family"FontAwesome"; content:""; position: relative; bottom:1.1em; font-familyで指定してやるんですね。。 contentの中身は、fontawesomeのUnicodeをいれます。 \f293 ☜こんなやつ hamlの記事があんまりなかったので、あんまり主流じゃないのかな？？ 知らんけど。。
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019. - Qiita
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.RubyRailsSass Ruby Sass is deprecated and will be unmaintained as of 26 March 2019. * If you use Sass as a command-line tool, we recommend using Dart Sass, the new primary implementation: https://sass-lang.com/install * If you use Sass as a plug-in for a Ruby web framework, we recommend using the sassc gem: https://github.com/sas
Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - Qiita
はじめに 新規でNuxt.js + TypeScript + Sassで開発をするときの覚書です。 Nuxt.js + TypeScript のインストール 任意の場所で下記を実行します。 $ vue init nuxt-community/typescript-template my-project $ cd my-project $ npm install
[書評] CSS設計の教科書 - Qiita
先週読んだ本が参考になったのでまとめてみました。 章の構成と内容 第1章で、CSSにおける設計とは、という前提と筆者のかたの考えを説明しています。 HTMLに依存しない、スタイルの上書きをしない、など後々の修正の影響が理解しやすいものをよしとしていることと、また早めに設計し実機で確認しながら作るアジャイル的なワークフローを用いることがフロントエンド側からできるアプローチだ、としています。 第2章では カスケーディングの仕組みと詳細度について、不用意に詳しい指定をしない(セレクタを短くする)ような整理(リファクタリング)のしかたを説明しています。 第3章ではコンポーネント設計のアイデアとして、基本的なコンセプトと各種法の方法を紹介しています。基本的な考え方として「関心の分離」というのがあり、コンポーネント単位で独立して作る(適度にカプセル化する)ことが重要としています。 上記の5つについて、
![[書評] CSS設計の教科書 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4da4ec8b3c53d574f66fef3d30f742badca35080/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTlCJUI4JUU4JUE5JTk1JTVEJTIwQ1NTJUU4JUE4JUFEJUU4JUE4JTg4JUUzJTgxJUFFJUU2JTk1JTk5JUU3JUE3JTkxJUU2JTlCJUI4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03NGMwODAwNmY0N2ZiZTUyNGE0ZTk1Njk2NWZlZWJhYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5ZF9uaWt1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kZjJjOTQyOGUzY2QxMjI5YjhjOTFhOWFiMmVjNTRkZQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D092ca3019533567d7a5ee2d7dfc2412f)
oocss&smacss&bemでのcss改善まとめ - Qiita
参考 知っておきたいHTMLテンプレート設計法 - OOCSSの基本 ルール 場所に依存した指定方法をしない レゴのように考える スキン 装飾など。smacssでいうモジュールの部分。 構造 骨格。 参考 SMACSSによるCSSの設計 ベースとレイアウト つくってるプロジェクトでは、oocssだけで十分で、smacssはガチで取り入れなくてもいい気がした。理由↓ レイアウト>>使う機会が少ない。gridなどを使う機会があまりない。あるとしても、oocssでいう骨格を作るのと同等（な気がしている）。 テーマルール>>使わなそう モジュール>>oocssのスキン的な考えで十分 状態>>これは普段からやっている気がする。 ベース 要素そのもののデフォルトスタイル レイアウト ページをエリアごとに分割 モジュール 再利用可能なパーツ 状態（ステート） レイアウトやモジュールの特定の状態を示す テ
IE8互換のレスポンシブデザインを、ワンソース、モバイルファーストで作れるSassミックスイン - Qiita
一部の公共性の高いWebサイトでは、今だにIE8への対応を行いつつ、同時にレスポンシブデザインも要求されるケースがある。当然IE8はCSSのメディアクエリに対応していない為、メディアクエリ抜きでコーディングをする必要がある。 設定する要件 モダンブラウザに対応し、あるブレークポイントを境にPC版とスマートフォン版のスタイルが切り替わる。レスポンシブデザインとすること モダンブラウザのPC版とほぼ同等の外観でIE8にも対応すること。ただし、ブレークポイントを越えてもレイアウトが変わる必要はない 実装方針 もしPCファーストの設計であれば、IE8のことを気にせずに実装できる。 1.サイズ共通のスタイルを書く 2.PC専用スタイルを記述する 2.SP専用のスタイルをメディアクエリの内側で上書きする しかし、PC用スタイルのオーバーライドは無駄が多くて分かり辛い為、できればモバイルファーストで実装
Sass/SCSSの@extendは使いすぎるとカオスだった - Qiita
@extendのアンチパターン Sassを導入しはじめた2013年頃の自分は、Sassがもたらしてくれるコード再利用の為の機能に心酔していた。共通しているコードは全部@extendしないと気が済まない病気にかかっていたし、SMACSSやBEMといった構造化CSSのことも知らなかった。 当時の自分にとっての「ぼくがかんがえたさいきょうのSCSS」の出力結果は次のような内容だった。 .cf:before, .floatedList:before, .navGlobal ul:before, .book.horizontal .inner > ul:before, .book.horizontal .ulWrap > ul:before, .articleList > .head > .options > ul:before, .bodyPage .pageHeader .bodyHead .a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LaravelでStorybook（for Vue.js+PostCSS） - Qiita
vueのnuxxでsassを使用する場合に[Make sure 'options.resources' is String or Array of Strings]とエラーがでる場合 - Qiita![vueのnuxxでsassを使用する場合に[Make sure 'options.resources' is String or Array of Strings]とエラーがでる場合 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a008f22352990410212b515dd33ef1938530dd9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9dnVlJUUzJTgxJUFFbnV4eCVFMyU4MSVBN3Nhc3MlRTMlODIlOTIlRTQlQkQlQkYlRTclOTQlQTglRTMlODElOTklRTMlODIlOEIlRTUlQTAlQjQlRTUlOTAlODglRTMlODElQUIlNUJNYWtlJTIwc3VyZSUyMCUyN29wdGlvbnMucmVzb3VyY2VzJTI3JTIwaXMlMjBTdHJpbmclMjBvciUyMEFycmF5JTIwb2YlMjBTdHJpbmdzJTVEJUUzJTgxJUE4JUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUyJTgwJUE2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02MWY1ZmM4NGEwN2QyYTFkMWY1MDhlZDJjZDUyY2YxYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjaG9vc2VyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00ODNiMDUwZDgxYmYwN2QwOGRiNzMxYzZmNjJhMjJmMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De444c46fe1dda01a218a94a5dbc2f7bc)
flexbox 子要素も横に配置されてしまうのはなんで？
CSSガイドライン （サンプル） - Qiita
CSSが破綻する4つの理由 - Qiita
