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
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
Stylelintでファイルを除外する - Qiita
tl;dr 設定ファイルのignoreFilesにGlobで書きまくればいい 状況 PostCSS + SugarSS Webpack (4.8.1) なぜか.stylelintignoreが全く反映されなかったので、設定ファイルに除外先を指定することにしました。 以下のように.stylelintrc.ymlなどに書けば対象のファイルが除外されます。 --- extends: stylelint-config-sugarss-recommended plugins: - stylelint-order ignoreFiles: - node_modules/**/*.css - src/lib/**/*.css rules: - order/properties-alphabetical-order: true
sass-loader で dart-sass を使う - Qiita
モチベーション node-sass 、結構イライラポイントが多くて、代替手段があるなら乗り換えたいなあなんて思ってたところに dart-sass がナウでヤングだぜみたいな話を小耳に挟んだので、使ってみることにした。 ちなみに node-sass に感じていたイライラポイントは、以下の通り。 インストールが遅い Node.js のバージョンが上がりたてのとき、だいたいインストールで死ぬ dart-sass がナウでヤングな理由については、 Feature Watch: CSS Imports and CSS Compatibility とかを読んで欲しい。 要約すると、LibSass や Ruby Sass に搭載されていない機能が、先行的に積まれてるみたいなことらしい。( プレーンな CSS のインポートをサポートするとかなんとか) モチベとしては、「 node-sass でコケたときに
CSSでもオブジェクト指向を実現する書き方 - Qiita
英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。
CSSを長生きさせるための設計手法まとめ（*ECSSあり） - Qiita
はじめに CSSの設計手法については、数年前からたくさんのブログや書籍で詳細に取り上げられています。 今回はバックエンドからフロントエンドに来られたエンジニアさんや、コーディングに知識のあるディレクター・企画職の方にナレッジを共有したいと思い、まとめてみました。 定番のOOCSS,SMACS,BEMに加え、2016年に普及し始めたECSSについても取り上げます。 なぜCSS設計が必要なのか CSSは単純で多くの人が簡単に操作することができるという素晴らしい特性を持っています。 しかしその特性のために、複数人の関わる大規模なサービスや、長期的なメンテナンスが必要なサービスではすぐに破綻してしまう(なんでCSSすぐ死んでしまうん？)という弱点も抱えています。 大規模なサービスの初期デザインをコーディングに起こす際は、自分以外の人でも容易に理解できてメンテナンスしやすい設計を行う能力が必須です。
CSS設計を勉強するならまずこれを見たら良いかも - Qiita
HTMLを覚えて3周年経ちました、@sueshinです。 3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。 お手柔らかにお願いしますmm 私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。 トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。 そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。 現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。 ただ、情報の多くはWEBに上がっている一方で、何から手をつけたら良いか初めはわからなかったので、 見渡してCSS設計を学習できるようにざっくりまとめて見ました。 CSS設計のゴール 何事もゴールを決めないことには走れないですよね。 「CSS Architectu
Sass を利用したオブジェクト指向 CSS を使おう（翻訳） - Qiita
少し前の記事ですが、2014年10月26日に The Sass Way に掲載されていた OOCSS（オブジェクト指向CSS） の記事が実践的でとても役に立ったので紹介したいと思います。 以下、こちらの記事の翻訳となります。 "Using Object-Oriented CSS with Sass" by Jaime Caballero （掲載許可いただいております） Sass を利用したオブジェクト指向 CSS を使おう（翻訳） Nicole Sullivan 氏は、2008年の Web Directions North で、最初にOOCSSを世界に紹介した。それ以降、CSSを系統立てるための最も重要なモジュラーシステムのひとつとして知られるようになった。 OOCSS は、SMACSS や BEM のような他のCSSメソッドと違うわけではない。それらはすべて、再利用できるモジュラーブロッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシートのファイル構成と命名規則について - Qiita
VSCodeでSCSSのビルド環境を作る - Qiita
Atomでsassを使いたいと思ったのでその方法をまとめました。 - Qiita
vue.jsで@materialのscssをimportするだけで消耗した話 - Qiita
クラス名に任意の数字を記入し、プロパティの値として扱う[HTML.CSS] - Qiita![クラス名に任意の数字を記入し、プロパティの値として扱う[HTML.CSS] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/101110e96da707ae082484f8522d4e9498520b13/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMjczNjU4JTJGcHJvZmlsZS1pbWFnZXMlMkYxNjAzMjgwOTMwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1lNWMyNDZhMGZhYmJiNDdmZWRhZDY5OGMwN2FmYjQ4OA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D380e80a1f710140f6b102c48d98d6969%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUU1JTkwJThEJUUzJTgxJUFCJUU0JUJCJUJCJUU2JTg0JThGJUUzJTgxJUFFJUU2JTk1JUIwJUU1JUFEJTk3JUUzJTgyJTkyJUU4JUE4JTk4JUU1JTg1JUE1JUUzJTgxJTk3JUUzJTgwJTgxJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgxJUFFJUU1JTgwJUE0JUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJUE2JUU2JTg5JUIxJUUzJTgxJTg2JTVCSFRNTC5DU1MlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1kNWYwZjc0Mzc2M2NiNGUwOTRlNzRiNGE3NDBhNzVhNw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBSaW5UX1QmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mZTgyZGM0YTYzOTIzZDQwMTM4NWZjMGJiNjQ1OTM4Nw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6cac97137555a6f1a033105bf415d37e)
VS Code で Prettier と Stylelint を連携して CSS/SCSS ファイル保存時にオートフォーマットをかける - Qiita
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
Sass(SCSS) で CSSハックを使う方法 - Qiita
StyleLintの導入手順まとめ - Qiita
Sassのコメントメモ - Qiita
