タグ

sassとCSSに関するaoiasabaのブックマーク (4)

  • Dart Sass、使ってる?Preprosを使えばコンパイルも楽勝!

    2020年6月14日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 ↑私が10年以上利用している会計ソフト! Dart Sassとは 一口にSassと言っても、実装している言語によって3つに分かれます: Ruby Sass … Ruby製。2019年没。サポートされません。 LibSass … C++製。今一番広く使われている様子。 Dart Sass … Dart製。公式推奨。 ICS MEDIAの池田氏によるアンケートだと、LibSassがだんとつ人気ですね。 ウェブのフロントエンジニアに質問。 Sassのコンパイル

    Dart Sass、使ってる?Preprosを使えばコンパイルも楽勝!
  • サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイト

    書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル/シェルスクリプトで簡単にコマンドを実行する GUI(Koala)で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基機能 ルールのネスト(Nested Roles) 親セレクタの参照 &(アンパサンド) プロパティのネスト(Nested P

    aoiasaba
    aoiasaba 2019/07/16
    サス
  • bracketsでsassを使う方法と設定を初心者向けにまとめてみる | YE-TECH

    僕愛用のテキストエディタBracketsでsassを使う方法について。 フリーランス仕事するとわかるんですが、仕事は早くやればやるほど、時給換算すると高くなります。これはコーディングも同じで、早くコーディングすればするほど短い時間で早く稼げるようになるので、フリーでWeb制作すると誰しもが早くコーディングしようと思うはず。 で、僕は早くコーディングするため、愛用のテキストエディタBracketsにemmet(zen code)やsassを導入したりしてます。 emmetはただプラグインを入れるだけなので簡単ですが、sassはちょっとややこしい。。。 というのもやり方が色々あって、Bracketsのプラグインだけで完結させたり、gulpやguretといったタスクランナーでやったりなどなど、、、) とまあ、やり方が色々とあるわけです(笑)。僕はただBracketsで簡単にsassを使いたいだ

    bracketsでsassを使う方法と設定を初心者向けにまとめてみる | YE-TECH
  • Sassの変数とmixinで変更に強いメディアクエリをつくる | Tips Note by TAM

    レスポンシブWebデザインではメディアクエリ(media queries)を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass(scss記法)を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数(マップ型)で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型

    Sassの変数とmixinで変更に強いメディアクエリをつくる | Tips Note by TAM
  • 1