タグ

sassに関するorenonihongogayabaiのブックマーク (3)

  • 【CSS設計】ゼロからわかるBEM超入門

    はじめに この記事はCSS設計 BEMについて初心者の方向けにわかりやすく解説した記事です。 できるだけ正確な情報を記述することを意識していますが、間違ったこともあると思います。なのでこの記事でざっと概要を掴んだ後は、BEM 公式ドキュメントを参照することをおすすめします。 BEMの基Block」「Element」「Modifier」 それでは、BEMの基Block」「Element」「Modifier」について解説していきます。 Block(ブロック)とは Blockとは「機能的に独立した再利用可能なモジュール」と定義されています。 難しいですね。 簡単にいうと、「どのページでも使い回すことができるパーツ」をブロックと呼んでいます。 Blockの命名規則 まずはブロックの命名規則を見ていきます。 クラス名はモジュールの「見た目(赤や大きい)」ではなく「それが何であるか(メニューや

    【CSS設計】ゼロからわかるBEM超入門
  • まだ間に合う!node-sass(LibSass)から sass(Dart Sass)への移行 - Sansan Tech Blog

    こんにちは。 Eight で エンジニアをしている鳥山(@pvcresin)です。 違う違うと自分に言い聞かせていますが、おそらく花粉症になってしまいました 🥺 在宅勤務で良かったです。 今回は Sass のコンパイルに使用しているライブラリを node-sass(LibSass)から sass(Dart Sass)に移行した話をしたいと思います。 Sass 実装三銃士 Sass の実装としては、以下の 3 つがあります。 Ruby Sass LibSass Dart Sass まずは移行作業の話の前に、各実装について簡単に振り返ってみたいと思います。 Ruby Sass Ruby Sass は Sass の最初の実装でした。 発表された 2006 年当時、Ruby のエコシステムは急成長しており、すぐに多くの人に使われるようになりました。 しかし、徐々に Ruby 製であることに起因す

    まだ間に合う!node-sass(LibSass)から sass(Dart Sass)への移行 - Sansan Tech Blog
  • Sass を今すぐ実務で使おうよ! « NAVER Engineers' Blog

    はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・!? ぜんぜんそんなことないですよ!( ・`ω・´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします(個人の感想です)。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので(丸投げ)、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって? 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、

  • 1