CSSのクラスにスコープを与えるシンプルな方法 - Qiita
CSS Advent Calendar 2017 18日目の記事です。 問題点 皆さんCSSで苦しんでますか？はい、私も苦しんでいます。 UIのコンポーネント実装が主流になってきて、JavaScript側が発達したおかげでCSSの各種問題を解決する仕組みもいろいろと出てきました。CSS in JSはそれの代表的なものですが、個人的には以下のような点に少し問題を感じています。 完全に埋め込まれてしまうとデザイナー・エンジニア間の協業難易度が増す CSS側の実装難度が増す（便利な書き方が制限されがち） これを解決するために、バンドラー側の設定を変更してうまいことimportするものもありますが、それはそれで設定ファイルが複雑化したりビルドプロセスに影響が出たりと、どうにもJSとCSSの悪魔合体感が問題に感じます。 本当に解決したいこと CSSが本質的に解消したいことは、やはり常にグローバル変数
社内でCSSの新しい方針について話したメモ - Qiita
社内で新しいドメインを設立するにあたり、__CSS Modules, PostCSS, cssnext__を試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき コンポーネント時代のスタイリング グローバルCSS、BEM、そしてローカルCSS CSS Modules、そしてJSXへの割り振り cssnextと、その書き方 我々のPostCSSスタンダード 新ドメインの CSS環境（案） CSS Modules css next PostCSS on webpack 何が変わるのか 我々の今までのスタイリング sassで書く スタイルのモジュール化とネスト、そし
マークアップのアルバイトをしていたときのメモ - Qiita
フロントエンドのアルバイトをしていたときのメモ 大学生の頃git,scss(compass),atomとか使ってフロントエンド書いていたときのメモ compassあたりはもう使っている人はいないかな？ git checkout git checkout css：cssの変更を破棄する git checkout .：全ての変更を破棄する git checkout -：直前のブランチに戻る 他のブランチのファイルを取り込む git checkout ブランチ名 ファイルパス 例） git checkout \#200_hoge_redesign scss/hoge.scss diff git diff --name-only：一行のみ変更点を表示 git diff -- ファイルパス：ファイルの変更を確認 その他 log git log --oneline：一行のみログの表示 amend 直前
最近話題のParcelをさわってみる - Qiita
Parcelとは parcelとは設定ファイルを必要としない高速なモジュールバンドラです。 Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration. 使ってみた個人的な感想としては 設定が容易で導入が簡単であると感じました。 目的によってできること出来ないことはあると思いますが ファイル分割やhotloaderなどの環境を手軽に構築したい際に webpackよりも簡単に導入でき 便利なツールです。 使い方 公式ドキュメントを参考に使い方を紹介します。 https://parceljs.org
今更だけど gulp の Boilerplate 作った - Qiita
実はだいぶ前に作ったあったものの、いろんなことにかまけてるうちにまとめる気力が減って途中で止まっていましたが、ちょうどまとまった時間ができたので乗り掛かった舟、勢いでまとめて公開しておきます。 https://github.com/okamoai/gulp-boilerplate フロントエンド界隈だと gulp 自体が若干レガシー化して来た感あるんですが、まだまだ案件でも使えると思うのでもし良かったら触ってやってみてください。 最近はタスクランナー使わずに npm scripts でやった方がよさげですが、実はそっちの Boilerplate も作ってあったりします。これもそのうちリポジトリに上げる予定です。 Feature 静的サイトの出力に適しています。 極力 gulp タスクのコードそのものは修正せず、 gulp/config.js ファイルと src/ 以下の開発ファイルのみで既
Bootstrap 4 をカスタマイズする - Qiita
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。
webpack3+Sassのビルド 〜PostCSSとExtractTextPluginを添えて〜 - Qiita
初投稿です。優しくしてください。 モジュールバンドラと聞いて、webpack、gulp、Parcel、Grunt・・・ とまあぱっと思いつくのはだいたいその辺ですが、できることってぶっちゃけどれもほぼ一緒だよね感（一長一短ありますが）。 フロントエンドツール多すぎ問題。 ってことで入門的にとりあえず流行ってるし使いやすそうなので、webpack3を触ってみました。 そもそもwebpackってなに？ CSSやJavaScript、画像などのWebコンテンツを構成するあらゆるファイルを「モジュール」という単位で取り扱い、「バンドル」という１つのファイルに最適な形で変換するためのツールです。 そのままですが、要は複数のファイルを一つのファイルにまとめるツールです。 それによりファイルのリクエスト数を減らし、ページ読み込み速度の改善が見込めます。 JavaScriptのビルドに使用されることがほと
対応ブラウザどうなってるっけ？をワンライナーでポン - Qiita
node -e "console.log('http://browserl.ist/?'+ encodeURI('q=' + require('./package').browserslist.join(',')))" 蛇足 主にAutoprefixerの対象ブラウザを指定するためにpackage.jsonに記述する browserslist というフィールドがある。 実際どのブラウザが対象なのか確認できる http://browserl.ist というサイトがある package.json内は配列で書かれてるが、browserl.istにはカンマ区切りで渡す必要がある したがってエイヤでポン。 ついでに package.json以外に、.browserslistrcに書く方法などもあるので、その場合はこれでは対応できない。 とはいえ、やってることはシンプルなので、テキトーにスクリプト書い
CentOS6.6でsasscのアップデート失敗 - Qiita
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 ...（省略） Fetching sassc 1.12.1 Installing sassc 1.12.1 with native extensions Gem::Ext::BuildError: ERROR: Failed to
Nuxt.jsでCSSの設計を楽にする - Qiita
vueファイルにどんどんCSSを書いていくと管理が大変です。 スコープを適用していれば問題無いですが、CSSファイルが一つのフォルダに纏められてないのは嫌だ！ そこで今回紹介するのは、POSTCSS + ITCSSを使った設計方法をNuxt.jsに適用するというものです。 POSTCSS POSTCSSはCSSツールを作るためのフレームワークです。様々なプラグインを使ってCSSに変更を当てると言うと簡単でしょうか。 sassみたいにネストして書けるプラグインや、ベンダープリフィックスを自動でつけてくれるプラグインなど多種多様です。 プラグインは自分で取捨選択できるため、プロジェクトごとにカスタマイズできることがメリットです！ 詳しくは、ここにわかりやすく解説されています。 ITCSS ITCSSはCSS methodology(方法論)の一つで、BEMやOOCSSなどもそこに含まれます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoogleCroudPlatformのCentOS7にSass入れた時にハマったポイント - Qiita
postcss-cssnextの内容一覧 - Qiita
Travis-CIでsass+compassでCSS生成を自動化 - Qiita
PostCSSで別ファイルをimportする際の注意点 - Qiita
Angular cliでsass/scssを使う - Qiita
Rails + Sass + Bootstrapで動く最小限の基盤 - Qiita
cssnext の custom-media を使っているファイルを import して、別ファイルで使う方法 - Qiita
grid で自動配置したいけど IE11 が無理なので flex で誤魔化す Mixin - Qiita
LaravelでStorybook（for Vue.js+PostCSS） - Qiita
pug+sassをparcelを使って爆速で始める - Qiita
