【2022年最新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）

2022/09/22 229 users コーダー Sass vscode CSS HTML

Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 普段の業務では、HTML、CSS、Sass(SCSS)... 続きを読む

よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

2022/04/16 206 users Sass CSS ルール 理由

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただ... 続きを読む

styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/06/25 29 users styled-components kintone 取組

こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしま... 続きを読む

エディタをVisual Studio Code（VSCode）に変えてSASS（SCSS）のコンパイルとライブリロードでサクサク開発 – YATのblog

2020/01/30 16 users grep YAT Sass Atom vscode

2020年 01月 30日 エディタをVisual Studio Code（VSCode）に変えてSASS（SCSS）のコンパイルとライブリロードでサクサク開発 カテゴリ： PCツール タグ：エディタ 一時期 VSCode を使うも Atom に戻っていたのですが、 どういうわけか GREP 検索ができなくなってしまい 再び VSCode を使うことにしました。 どうせなら... 続きを読む

CSS（SCSS）だけでマインスイーパーを作ってみる - Qiita

2019/02/06 18 users マインスイーパー Sass Qiita CSS 一環

はじめに みなさんマインスイーパーをご存知ですか？ そうです！昔のWindowsに入っていたゲームです！ プログラミングの勉強の一環として作ったりすることも多い題材だと思いますが 今回はSass（SCSS）のみで作ってみたいと思います。（JavaScriptは一切書きません） ※ これはマインスイーパーの記事になるので、Sass(SC... 続きを読む

VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め | カレリエ

2018/12/17 131 users Sass vscode コンパイル カレリエ SCSSファイル

VSCode(Visual Studio Code)でSASS/SCSSファイルをコンパイルする拡張機能「Easy Sass」が便利だったので紹介します。 この拡張機能「Easy Sass」は便利なのですが、一番の恩恵はこの拡張機能を利用することで、スタイルシート言語の「SASS/SCSS」の導入が簡単になることです。通常であれば「SASS/SCSS」で書かれたファ... 続きを読む

[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール | コリス

2018/08/03 94 users コリス 小見出し 行間 マージン CSS

Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最初に定義して、それを元に見出しや本文を設計するので、rem指定も可能。また、SCSSもサ... 続きを読む

VS CodeのCSSサポート (1/2)：Visual Studio CodeでWebアプリ開発を始めよう - ＠IT

2018/07/03 41 users Visual Studio Code VS Code 本稿

CSSやその拡張であるSass、Less.jsもVS Codeはデフォルトでサポートしている。その機能がどんなものかを見てみよう。 連載「Visual Studio CodeでWebアプリ開発を始めよう」 Visual Studio Code（以下、VS Code）は、デフォルトでCSSおよび、CSSを拡張したSass（SCSS）／Less.jsをサポートしている。本稿では、これらに... 続きを読む

create-react-appでSASSファイルを使う方法 | Front Note

2018/02/16 11 users create-react-app GitHub Sass

以前までは「PostCSS推奨」みたいな方針だったせいか、SASS(SCSS)ファイルは使えなかったので、 npm ejectしたものをゴニョゴニョして無理やり使ってたんだけど、公式のGithubの方にいつの間にか SASS(SCSS)ファイルに対応する方法が載ってたので、忘れないようにメモ。 詳細はここに載ってるよ。（英語だけど。） 1. create-react-appコマンドで作成した雛形フ... 続きを読む

サンプルテーマ「Boilerplate」をアップデートし、レスポンシブデザインに対応しました - はてなブログ開発ブログ

2017/10/12 10 users Boilerplate less レスポンシブデザイン 土台

2017 - 10 - 12 サンプルテーマ「Boilerplate」をアップデートし、レスポンシブデザインに対応しました デザインテーマ news デザインCSSをカスタマイズする土台に適したサンプルテーマ「Boilerplate」のバージョンを、2.0.0にアップデートしました。レスポンシブデザインに対応したほか、スタイルシート言語をLESSからSCSSに変更し、さらに使い勝手がよくなりました... 続きを読む

プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita

2017/09/12 138 users Qiita プログラマー CSS ところ メタ言語

SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！... 続きを読む

GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。 – YATのBLOG

2017/08/07 15 users GitHub Pug YAT Gulp Sass

WEBデザインをする上で必要な知識・情報・技術等の記述や、参考になるサイトの紹介等を掲載しています。2017年 08月 07日 GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。 カテゴリ： gulp タグ： gulp pug Sass Scss Gulpのpugやscss、ブラウザーシンクなど、普段利用する開発環境をGithubに掲載していま... 続きを読む

CSSの裏技20選を一挙紹介！【必見！コツをつかんで効率的にWebサイトをデザインする】｜SeleQt【セレキュト】

2017/06/12 91 users SeleQt less セレキュト ローディング レンダリング

フロント・エンドの開発はセレクター選択と最小コードによる迅速なローディングとレンダリングにおいて、ますます効率性に特化しています。 LessやSCSSといったプレ・プロセッサは仕事をする上で役立ちますが、自然なやり方で最小かつ手早くCSSを記述する方法は数多くあります。 このガイドは20ProCSSをカバーしており、レイアウト全体でスタイルの流れを標準化し、効率的なだけでなく多くの共通した問題も解... 続きを読む

Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット | NxWorld

2016/12/07 33 users Mixin Sass NxWorld スニペット 条件分岐

ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイン... 続きを読む

Sass(SCSS) mixin Snippets | NxWorld

2016/12/07 47 users Sass NxWorld Mixin CSS スニペット

普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。特にこれまでSassやmixinをあまり... 続きを読む

CSSfmtをつくった話、もしくは本質的な問題解決とは - Qiita

2015/10/28 45 users Qiita README vim コマンドライン エディタ

CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。 使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。 atom-cssfmt sublime-cssfmt vim-cssfmt cssfmt.el AtomでCSSfmtが動いている様子：... 続きを読む

自動検出と自動修正でCSSを保守する - Qiita

2014/10/18 240 users Qiita CSScomb JSLint CSS 蔓延

CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。SCSS版のjslintやrubycopのようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコ... 続きを読む

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス

2013/07/01 486 users Sass Mixin CSSコーディング Compass すそ

以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそ... 続きを読む

PhpStormでSass/SCSSを使う | mawatari.jp

2013/06/19 30 users Sass PhpStorm WebStorm Ruby Mac

PhpStormでSass/SCSSを使う方法をメモしておきます。WebStormでも同様の手順で行けると思いますが、確認はしていません。 環境 環境は以下の通りです。Sass/SCSSを使うには、Rubyが必要です。今回は、Macに初めから入っているものを使いました。 ソフトウェア バージョン MacOS 10.8.4 Ruby 1.8.7 Sass 3.2.9 なお、Windowsでは、試して... 続きを読む

Prepros :: Compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown with live browser refresh.

2013/05/20 145 users Stylus Jade Sass CoffeeScript

Compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown with live browser refresh.Compile with easePrepros can compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown. ... 続きを読む

昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー

2013/05/04 249 users naoya Grunt less teppeis Yeoman

昨日の続き。こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするもの、つまり rake なんかと同じようなものと以前にチラ... 続きを読む

CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた ｜ Developers.IO

2013/03/21 119 users Sass less 野中 CSS Developers.IO

CSSレイアウトフレームワーク CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた NEW: 2013年03月21日 みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次に引っ越し先のツール探しで忙しいところだと思います... 続きを読む

【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 ｜ Developers.IO

2013/03/11 59 users Developers.IO Retina Display

すぐに使えるSCSS入門 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 NEW: 2013年03月11日 はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前回はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成... 続きを読む

Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示 | WP-D

2013/03/04 26 users デベロッパーツール Sass Firebug Compass

Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示 こんにちはピンクです。確定申告ですの季節ですね！青色申告の私は毎年この時期、宿題を溜めてしまった夏休み最終日の小学生のようになっています…。 さて、Sass ネタです。 Firefox の Firebug や、Chrome のデベロッパーツールで要素のスタイルを確認すると、どのスタイルシートの何行目に... 続きを読む

SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #3 ｜ クラスメソッド開発ブログ

2013/02/04 20 users Sinatra Haml CoffeeScript

さて本シリーズ第三回です。 前回はhaml、scss、coffeescriptのコンパイルを正規表現で省略したり、hamlのレイアウトを変更する方法を紹介させて頂きました。 今回はコンパイル済みのhtml、css、javascriptをまとめて保存するスクリプトを紹介してみようと思います。 rakeをインストールする rubyでは自動化したいタスクがある場合、rakeというビルドツールを使用します... 続きを読む