「Sass」に関連する技術ブログ

企業やコミュニティが発信する「Sass」に関連する技術ブログの一覧です。

LIFULL HOME'Sのフロントエンド環境にSassが導入されたので色々やった話

プロダクトエンジニアリング部のえびさわです。 この一年でLIFULL HOME’Sのメイン開発サーバーのフロントエンド環境が大きく刷新されました。 以前は使えなかったSassも導入され、モリモリとDXが向上しております😭 今回はマークアップにフォーカスし、刷新前に感じていた課題とSass導入後に行なった改善策をご紹介します。 課題 カラーコードのtypo, 種類が多い LIFULL HO

9 年を超えて開発が続く LIFULL HOME'S の Web フロントエンド開発環境の改善

技術開発部の相馬です。好きな UI フレームワークは Svelte です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 今回は、LIFULL HOME'S の Web フロントエンド(以降はフロントエンドと表記します)開発環境を、Node.js の資産を用いて近代化した話(以降は近代化と表記します)をご紹介したいと思いま

LIFULL HOME'Sでのフロントエンド刷新・リファクタリングの歩み

こんにちは。プロダクトエンジニアリング部の中島です。 本稿(連載)では LIFULL HOME'S におけるフロントエンド技術スタックの刷新やリファクタリングの取り組みについて発信していこうと思います。 歴史 LIFULL HOME'SではバックエンドをSymfony2(php) + SinatraベースのBFF(ruby)、フロントエンドをjQueryといくつかのマイクロライブラリによって構築しています。 LIFULL HOME'Sの現在稼

開発未経験のデザイナーが、エンジニアチームで半年過ごしてわかったこと

こんにちは。 スマートキャンプ デザイナーの髙松です。 私は今年の1月からスマートキャンプにデザイナーとして入社したのですが、プロダクト部門のエンジニアチームに所属しています。 弊社にはデザイン部署がないというのも理由の1つですが、私の業務の半分は開発が必要となることが主な理由です。 しかし、入社した当時、実務での 私の開発経験は0に等しい状

Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる

エンジニアの井上です! 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目し

Sassで見出しデザインの@mixinを作ろう!

こんにちは、 @pompom0c0 です。 この記事は Enigmo Advent Calendar 2018 の18日目の記事です。 17日目の記事は @natten の はじめてのキーボード設計における アンチパターン でした。 今日は BUYMA 内で使用している見出しデザインついて紹介して行こうと思います。 前置き 今回この記事を書こうと思った経緯 Sassの @mixin を実践でどんな風に使っているか知ってほしい! 使う見出しデ

stylelintとBackstopJSで安全にcssを書ける環境を作った

こんにちは。BASE で Design Group に所属している 三佐和 です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングの

Composable な UI 設計を目指したフロントエンド開発

こんにちは、開発本部の舘野です。医療介護の求人サイト「 ジョブメドレー 」の開発を担当しています。 昨年、ジョブメドレーでは事業所が利用する採用管理画面の UI リニューアルを行いました。ユーザが使いやすい UI づくりを目指すために、長期間にわたり誰が開発しても一貫性ある UI を実現できるようなシステムが必要です。そこで今回は「Composable」な UI システ

TUNAGのフロントエンド開発について

こんにちは。スタメンでデザイナー兼フロントエンドエンジニアをしているナガキです。 以前、 スタメンの開発環境について お話させていただきましたが、デザイナー兼フロントエンドエンジニアという立場から、スタメンではどのように TUNAG をデザイン、開発しているかご紹介させていただきます。 デザイン制作 大きな機能開発が必要な場合、まずは手書きのワイ

デザインデータに忠実にCSSコーディングするためのテクニック

こんにちは、Webフロントエンドエンジニアの権守です。 フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現しているかを紹介します。 ツールの利用 PerfectPixel

Sassで寿司を回す、たった一つの冴えたやりかた

こんにちは、ウェッブデザイナーのアズマです。 みなさん、Sassは好きですか。僕は好きです。 そして、寿司は好きですか。僕は好きです。 Sassがあれば何でもできる! Sassがあれば、回転寿司も回せる! というわけで、今日はSass(CSS)を使って回転寿司のように要素を無限ループさせてみましょう。 何ができるか こうです。寿司が無限ループしています。(本当はもっとな

流行中のテクノロジーはコレだ!改革をもたらすテクノロジー11選

  先日 ThoughtWorks社 から最新の技術動向をまとめた Technology Radar の2015年1月版が発表されました。 このTechnology Radarですが毎回、 『技術』 『ツール』 『プラットフォーム』 『言語・フレームワーク』 と4つの領域に分けて紹介しており、絶賛流行中もしくは今後注目されるテクノロジーなどが紹介されています。 今回はそんな 『言語・フレームワーク』 の領域から厳選

社内CSSフレームワークを作ろう!

エンジニアの栗山です。 最近になって、社内 CSS フレームワーク を作ったので、その共有をしたいと思います。   CSS フレームワーク ほしい… まず CSS フレームワーク と聞いて思い浮かべるのが、 Bootstrap ではないでしょうか。 これは非常に便利ですよね。デザインが苦手なエンジニアでも簡単に見栄えのいいサイトが作れます。 ぜひともこういった CSS フレームワーク
123
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?