タグ

Web制作とSassに関するfumiruiのブックマーク (2)

  • Sass(SCSS)は難しくないよ!私なりの使い方をご紹介! | Tips Note by TAM

    Sass(※この記事ではSCSSを指します)やLESSといったCSSプリプロセッサがどんどんメジャー化しています。 しかし、私の実感としてまだまだ使っていない人も多いのではないか?と思っています。 導入が難しそう。書き方がわからない。CSS使えなくなってしまうの? 色々な疑問や不安があると思います。ですが、Sassはあなたが考えるほど難しくありません! わたしもSassを使い始めて、まだ半年とちょっとです。そんな私の使い方をご紹介したいと思います。 ※この記事では導入部やコンパイルの紹介はしません。 ※前提 Sassを書けば勝手にCSSをいい感じに書いてくれる!というものではありません。 まだCSSにちょっと自信がない人は、まずはCSSに慣れたほうがいいです。 どんな効率化ツールを使うときでも、根となる基礎はきちんと理解しましょう。 (1).scssファイル内にCSSを書く まずはここか

    Sass(SCSS)は難しくないよ!私なりの使い方をご紹介! | Tips Note by TAM
  • Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット - NxWorld

    ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries(メディアクエリ)を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。 ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3パターン紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイントを指定したものです。 ブレイクポイントの追加をしたい場合は同じように条件分岐を追記し、逆に不要なものがあれば該当の条件分岐を消せば変更できます。 また、各ブレイクポイントは数値での指定ではなく「small」や「large」という形でそれぞれ用意しており、使用時はこれらを引数に指定します。 こうしておくことで後で数値を変更することになった場合でも、mixin内で記述している数値部分のみ変更

    Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット - NxWorld
  • 1