タグ「Sass」 - はてブログ

タグ Sass

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 120件)

そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024/04/02 127 users Has カスケードレイヤーネストワークフロー変数

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

2023/07/13 116 users vanilla-extract React state 相性

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていたCSS開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State ... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users ネスト CSSネスト CSSコーディング CSS ブラウザ

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。続きを読む

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

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

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

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

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

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

私が「Web制作にはMacが適している」と思う理由 | Stocker.jp / diary

2019/11/07 222 users Stocker.jp diary iPhone Mac 理由

iPhone / Mac 私が「Web制作にはMacが適している」と思う理由 Thursday, November 7th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効率... 続きを読む

Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について | Stocker.jp / diary

2019/11/06 55 users Stocker.jp diary iPhone BEM講座

iPhone / Mac Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について Wednesday, November 6th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須... 続きを読む

Web制作者のためのSassの参考書.pdf - Speaker Deck

2019/09/19 73 users Speaker Deck WEB制作者

All slide content and descriptions are owned by their creators. 続きを読む

本当に簡単にできて驚いた！面倒な設定は一切不要、秒速でWeb開発用のサーバーが構築できる -Zero Server | コリス

2019/03/13 230 users コリス Markdown React TypeScript

Node.js、React、TypeScriptをはじめ、HTML、CSS、Sass、Markdownなどが利用できるWeb開発用のサーバーが秒速で簡単に構築できるZero Serverを紹介します。必要な依存関係は自動インストールされ、ReactやSassは置くだけでコンパイル、マークダウンも設定は一切不要です。サーバーを構築する時間が無い人、設定に明るく... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin コリス一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む続きを読む

[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート | コリス

2019/02/18 91 users ビューポートコリス RFS プリプロセッサ Stylus

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(R... 続きを読む

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

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

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

備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin | コリス

2018/11/19 58 users Mixin コリスグリッド CSS flexbox コード

CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexbo... 続きを読む

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

2018/10/28 243 users box-shadow Minecraft メンテナブル下図

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。ちなみに下図のようなドット絵がつくれる。マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJa... 続きを読む

なぜSassが必要なの？ | Stocker.jp / diary

2018/10/09 82 users BEM JavaScrip Stocker.jp diary

「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSS・Sass・JavaScriptを基礎から学べます！【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効率よくコーディングするためのBEMを1日で学べます。【日曜開催】「1日で分かるJavaScrip... 続きを読む

2018年9月の、これだけは押さえておきたいWeb関連の動き | Stocker.jp / diary

2018/10/01 51 users Stocker.jp diary Monday BEM講座

Webニュース 2018年9月の、これだけは押さえておきたいWeb関連の動き Monday, October 1st, 2018 「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSS・Sass・JavaScriptを基礎から学べます！【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となった... 続きを読む

Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary

2018/09/27 253 users Sketch Thursday Illustrator 基礎

Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSS・Sass・JavaScriptを基礎から学べます！【日曜開催】「1日で分かるSassとBEM講... 続きを読む

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス

2018/05/15 107 users コリスデベロッパー npm Webpack CSS

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む

Compass の送別会 - ペパボテックブログ

2018/03/15 83 users Compass minne shikakun 東亜飯店きょう

2018 年 3 月 15 日、渋谷のはずれにある中華料理店『東亜飯店』では、 Sass の拡張フレームワークの Compass の送別会がしめやかにとりおこなわれていた。「えー、それではですね、きょうは長年われわれのチームでいっしょに働いてきた Compass くんがついに卒業ということで、 minne のデザイナーの @shikakun から挨拶があるそうなので、よろしくお願いします」はい... 続きを読む

CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス

2018/02/07 137 users less CSSプリプロセッサーカスタムプロパティ変数

2018年2月7日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数の使い方と注意点をまとめていきます！ CSS変数とは？公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properti... 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリスコンポーネント rem ナビゲーション Flexbox

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。新しくなった... 続きを読む

QiitaのCSS構成2017 - Qiita

2017/12/27 156 users Qiita PostCSS CSS 去年構成

この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年ではプリプロセッサーとして Sass (node-sass)... 続きを読む

フレッツ光・So-netマンションタイプで夜間に遅い問題を改善する方法 | Stocker.jp / diary

2017/07/06 73 users Stocker.jp diary 夜間 BEM講座遅い問題

Web技術フレッツ光・So-netマンションタイプで夜間に遅い問題を改善する方法 Top diary Thursday, July 6th, 2017 スマートフォン時代のWebデザインスクール体験レッスン開催中！PCだけでなくスマートフォンにも対応したWebデザインを基礎から学べる講座です。新講座「 1日で分かるSassとBEM講座」開催! HTML・CSSは分かる方向けです。最近、特... 続きを読む

Webデザイン初心者がランクアップするためのCSSのコツ10選｜ferret [フェレット]

2017/03/01 106 users Ferret less フェレット CSS 関数

ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。そこで必ず話題に上るのが、 CSS です。もちろん、LessやSassのような CSS プリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができ... 続きを読む