Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
sassの繰り返し処理を使ったクラス付与のメモ - Qiita
.class0-0 { width: 0.0px; } .class0-1 { width: 0.1px; } .class0-2 { width: 0.2px; } .class0-3 { width: 0.3px; } .class0-4 { width: 0.4px; } .class0-5 { width: 0.5px; } .class0-6 { width: 0.6px; } .class0-7 { width: 0.7px; } .class0-8 { width: 0.8px; } .class0-9 { width: 0.9px; } .class1-0 { width: 1.0px; } .class1-1 { width: 1.1px; } .class1-2 { width: 1.2px; } .class1-3 { width: 1.3px; } .class1-
Webpack4でes6/sassをcompile - Qiita
webpack4でcssをsassにes6をes5にcompileさせる 処理内容 es6の記述をbabelでes5に変換 polyfillでasync/await対応 sassファイルをcssに変換 postcssのautoprefixでprefixを作成 css、jsファイルをbuildでminify imgファイルを圧縮 eslint導入 devServerでlocal作業 jQueryを一応入れてます ディレクトリ構成 { "name": "hoge", "version": "1.0.0", "description": "", "main": "src/js/app.js", "scripts": { "start": "webpack-dev-server", "dev": "webpack --mode development", "build": "webpack --m
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 CSS 設計 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。
Ruby on Railsで外部のcssを読み込む方法 - Qiita
Ruby on Rails自分用備忘録 Ruby on Railsの既存プロジェクトを引き継いだ。そもそもRubyもRailsも触ったことがなかったけど、フルスタックフレームワークって何ぞやってことは、概ねDjangoで理解してたし、Rubyみたいなモダン言語は別に勉強しなくても、まあなんとなく雰囲気でいけるんじゃん。言語よりフレームワークの使用を覚えるのが面倒臭かった。ほら、フルスタックフレームワークって設計者の癖がより色濃く出るじゃんね。んで、早速「ん？」ってなった箇所があったので、書き留めておこうと思う。なんでもかんでも、できることなら正確に理解した今日この頃。 どうやってcssを読み込めばいいんだろう slimからcssを個別に読み込んでる感じ？とか思ったけど違った。slimからcssを呼び出してない。なのにcssが反映されている。なんじゃこりゃ。んで、勉強して知った。Railsで
【mac用】npmでgulpを使い、ejsとscssの環境を作る - Qiita
project ┃-ejs ┃ ┃-この配下にejsファイルを作成していく ┃ ┃-img(ここに画像を配置すると、自動的にhtml配下にもimgフォルダが生成され、軽量化された画像が出力されます) ┃ ┃-includes ┃ ┃ ┃ ┃ ┃ meta.json(meta情報の一括管理。ここでの説明は割愛。) ┃-html ┃ ┃-node_modules ┃ ┃-gulpfile.js ┃ ┃-package.json ┃ ┃-gulp_install.command ┃ ┃-css（ここにscssで変換されたcssファイルが格納されます） ┃-scss ┃ ┃-この配下にscssファイルを作成していく 必要ファイルについては下記順次説明していきます。 gulpで作成する制作環境に使うプラグイン ・browser-sync: ファイル変更の監視、ブラウザの自動リロード ・gulp-au
sass初心者の方へのざっくり説明。 - Qiita
Sassの試し書きツール Sassmeister ・ どうコンパイルされるか確認に便利です。 visual studio code の お手軽Sassコンパイラ Easy Sass ・ 取り急ぎコンパイルできれば良い時はこれでも大丈夫です。 ・ コンパイル先を指定できなさそうなので大規模プロジェクトには不向きです。 htmlなど試し書きツール Web Maker ・ chromeの拡張機能です。 ・ コンパイル結果の表示はないので上記と併用などしてください。 ・ html ▼, css ▼, js ▼ をクリックでsassなどにも変更できます。 Sass参考サイト Sassの基本 ・ はじめの一歩 絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順 gulpで階層構造を維持して出力する ・GUIコンパイラはかゆいところに手が届かない。gulp-sassな
webpack4でscss - Qiita
webpack 4.10.2でscssを使用する方法 以下に設定ファイルを記載します。 scssを実行するだけなら不必要なものも含まれていると思いますが、そこはご勘弁ください あとで修正しまっす 一応、以下が実現できるので、そんなに無駄な情報は詰まってないはず・・・ react/flux scss react-router ファイル変更時のブラウザ自動リロード es6 package.json { "name": "hogemaru", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --history-api-fallback --host 0.0.0.0", "build": "webpack -p" }, "author": "",
WordPressテーマ作成にSASSとGulpを使った環境構築 - Qiita
Gulpを使って色々な処理を自動化する方法 https://tech-dig.jp/%E3%80%90gulp%E5%85%A5%E9%96%80%E3%80%91gulp%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%89%B2%E3%80%85%E3%81%AA%E5%87%A6%E7%90%86%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ GulpでWordPressのテーマ開発はここまで効率化できた https://www.webprofessional.jp/wordpress-theme-automation-with-gulp/ https://sndbox.jp/websystem-develop/wordpress/wordpress-sa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulpで静的サイトジェネレーター構築 - Qiita
【CSS scss】均等カラム割りレイアウトmixin - Qiita
gulpのタスクを追加して便利な環境にしよう - Qiita
PostCSSでSassをもっと楽に - Qiita
要素を左右に寄せる方法 - Qiita
要素を簡単に中央寄せする方法 - Qiita
background-imageをレスポンシブする際にpadding-topが認識されない現象を対処する(Edge) - Qiita
gulp+pug+scss+autoprefixerのコンパイルが突然できなくなったので、gulp4に移行した話 - Qiita
Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - Qiita
スタイルシートのファイル構成と命名規則について - Qiita
VSCodeでSCSSのビルド環境を作る - Qiita
