タグ

SCSSとあとで読むに関するd4-1977のブックマーク (5)

  • 細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい)

    BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ3,4年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM

    細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい)
  • 2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました

    インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。 キッカケは、2012年の1月頃に書いていた、Sassを覚えよう!で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか?」というお話を頂きました。 お話を頂いた当時は、「Sassの書籍って売れないんじゃ?にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。 そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに>< 今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassのを書くことになりました。 書き始めたら

    2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました
    d4-1977
    d4-1977 2013/08/25
    最近、きちんと押さえたいことの一つ
  • ちゃんとCSSを書くために - CSS/Sass設計の話

    TalkNote Vol.8 発表スライド 2013/06/30 追記: スライドで紹介しているSMACSS日語訳(電子書籍)が発売されたので、興味のある方はご覧ください。 SMACSS https://smacss.com/Read less

    ちゃんとCSSを書くために - CSS/Sass設計の話
  • WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass

    下記、画面のように表示されれば、Rubyがインストールされています。 続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。 最新の状態であれば、下記のように表示されます。 最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。 SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、 ウィンドウは閉じずにいてください。 ● SassとCompassインストール そういえば、ここまで何の説明もなく来てしまいましたが、 SassとかSCSSとかComapssって何?という方もいるかと思いますので、 ちょっとだけ説明をします。 Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、 ミックスイン(機能テンプレートのようなもの?)や変数を扱えたりしますが、 CSSとは似て非なるものなので、

    WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass
  • NAVERでのSassの使い方 « NAVER Engineers' Blog

    NAVER UITのSass Mixins職人(他称)の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。 基ディレクトリ/ファイル構成 今のところcss/sassディレクトリは下記のような構成を基としています。 project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod

  • 1