タグ

Sassに関するnorandoのブックマーク (6)

  • 有名サービスに学ぶ CSS の管理手法 - Qiita

    Sass ファイルのディレクトリ構造や管理手法について、まとめてみました 目次 有名サービスのディレクトリ構造いろいろ Sass ファイルを美しく保つためのコツ Sass ディレクトリのおすすめ構成方法 有名サービスのディレクトリ構造いろいろ 有名なサービスがどうやって Sass プロジェクトを構築しているのか気になったので、調べてみました。 ・Compass ・Breakpoint ・Octopress ・Sass Twitter Bootstrap ・Gumby Compass (2015/06/18 現在) compass/core/stylesheets compass/ | |— css3/ | |— _animation.scss | |— _appearance.scss | |— _background-clip.scss | |— _background-origin.s

    有名サービスに学ぶ CSS の管理手法 - Qiita
    norando
    norando 2018/08/29
  • ruucb.com

    ruucb.com 2023 著作権. 不許複製 プライバシーポリシー

    ruucb.com
    norando
    norando 2017/12/23
    “補足1:子ファイル保存時に親ファイルを自動コンパイル”これが知りたかった!
  • @extendを使うべき時、@mixinを使うべき時 | POSTD

    (編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) 私がクライアントからよく受ける質問に 「@mixinと@extend、それぞれどのような時に使うべき?」 というものがあります。 “引数を使わない@mixinは悪である”。 これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使うべき時、@mixinを使うべき時、これらを見極めることにはもっと深い意味があるのです。 それでは詳しく考察していくことにしましょう。 私は普段、@extendは決して使わないようにとアドバイスしています。@extendには、一見したところ魅力的な特徴がたくさんあるのですが、注意しなければいけない点はそれ以上にあります。言ってしまえば 見かけ倒し だということです。 それでも@extendを使い

    @extendを使うべき時、@mixinを使うべき時 | POSTD
    norando
    norando 2017/05/21
    @extendは重複に理由がある時に使いましょう。@mixinは特に理由なく重複させる際に使いましょう。”
  • これは簡単でいいね!コンテンツの区切りを斜め線にするテクニック(レスポンシブ対応) -Angled Edges

    縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。 斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。

    これは簡単でいいね!コンテンツの区切りを斜め線にするテクニック(レスポンシブ対応) -Angled Edges
    norando
    norando 2016/12/12
    選択肢としてはアリかな
  • Sass(SCSS) mixin Snippets - NxWorld

    普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを

    Sass(SCSS) mixin Snippets - NxWorld
    norando
    norando 2016/12/07
  • イマドキのコーダー環境構築2016

    CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less

    イマドキのコーダー環境構築2016
  • 1