タグ

sassに関するyulily100のブックマーク (7)

  • Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

    Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

  • なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog

    こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と

    なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
  • Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE

    今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。 今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせる バラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃える フォルダ構成 フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty

    Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE
  • より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

    2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」という記事で紹介したSass/SCSS。皆さん使ってますか?今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね! ↑私が10年以上利用している会計ソフト! 目次 Sassの基礎知識 @mixin の基的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas

    より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集
  • 納豆には卵を入れる派です。

    おはようございます、 @ken_c_lo です。2021年12月10日の、朝です。ここで、タイマーをセット… この記事は、やんちゃクラブリスナー Advent Calendar 2021の 10日目としてお送りします。 やんちゃクラブとは? やんちゃクラブとは、@yancya さんが毎日(毎朝)30分ほど、自宅マンションの屋上で、いつも大体ほぼ同じ構図で約30分間一人語りを続ける動画である。 やんちゃクラブ - YouTube 繰り返すが、毎日である。屋上で、休日も豪雨の日も極寒の日も。毎日配信するのはおかしい。そして驚くべきことに毎日面白い。毎日面白いのは当にすごいことだと思う。 やんちゃクラブリスナーには大別して2種類いる。毎日その日のうちに必ず観て、かつ自分が観始める前の過去回も遡って全部観た人と、必ず毎日ではなく気が向いた時に観て、見逃した回は無理して追わない人がいる。 yanc

    納豆には卵を入れる派です。
  • Sassで行こう!

    Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に

  • Sassを使ってみよう - Sassオレオレリファレンス

    Sassを使ってみよう 記法と拡張子のルール ディレクトリを作る コンパイル Watchモード 何か書いてみる 記法と拡張子のルール Sassには記法が2種類あって、その名称と同じ拡張子をファイルにつけるのが慣例になっています。 公式サイトのドキュメントなどで大文字で書いてあるSASS、SCSSは記法の略称です。 以下は記法を表にまとめたものです。 #main { color: blue; font-size: 0.3em; } #main a { font: { weight: bold; family: serif; } #main a:hover { background-color: #eee; } #main { color: blue; font-size: 0.3em; a { font: { weight: bold; family: serif; } &:hover {

  • 1