タグ

sassに関するheyMackieのブックマーク (29)

  • jsdo.it

    Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a

  • SassMeister | The Sass Playground!

    SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

  • GitHub - enja-oss/Sass: Sassリファレンス日本語訳

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - enja-oss/Sass: Sassリファレンス日本語訳
  • Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita

    CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ

    Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita
  • Sass の基本的な使い方のメモ | Web Design Leaves

    更新:2016年5月20日 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には Sass 記法(拡張子 .sass)と SCSS 記法(拡張子 .scss)の二つの記法がありますが、ここでは SCSS 記法(拡張子 .scss)を使用します。現在はこちらが主流のようです。 SASS は CSS とは構文が異なるため CSS ファイルには SASS を記述することができません。SASS の場合は「.scss」という拡張子のファイルに記述します。 しかし、逆に通常の CSS を SASS ファイルに記述することは問題ありません。CSS ファイルの拡張子を「.css」から「.scss」に変更すると SASS ファイルになります。 SASS のインストールや

  • CSS Nite LP32「Sass」のフォローアップを公開します|CSS Nite公式サイト

    2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップを公開します。 (1)谷 拓樹さん(サイバーエージェント ) (2)柴田 大樹さん(unCopi) (3)黒野 明子さん(crema design) (4)森田 壮さん(Sou-Lab) (5)坂巻 翔大郎さん(ピクセルグリッド)、山田 敬美さん(ピクセルグリッド) (6)木村 哲朗さん(まぼろし)、西畑 一馬さん(まぼろし) (7)富田 梓さん(LINE) (8)高津戸 壮さん(ピクセルグリッド ) 出演者のひとり、森田 壮さんの執筆された『Web制作者のためのSassの教科書』もオススメします。 Web制作者のためのSassの教科書 - 公式サポートサイト 追記: 各セッションの音声を追加しました。 ベストセッション20192019年、CSS Niteでは4

    CSS Nite LP32「Sass」のフォローアップを公開します|CSS Nite公式サイト
    heyMackie
    heyMackie 2014/05/07
    Sass勉強しないとなー
  • Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説

    前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン(:)で区切り、複数記述する場合はカンマ(,)で区切り、それらを丸括弧(())で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro

    Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説
  • culture27.com

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

  • Takazudolog - OOCSSとSass

    CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an

    Takazudolog - OOCSSとSass
  • パフォーマンスからみるSass/Compass 第2回:CompassによるCSS Sprite - MOL

    Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた!ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射!やっていくYO! これまでの: パフォーマンスからみるSass/Compass 第1回:Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編:MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中

  • 実践Sass 後編

    Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================

    実践Sass 後編
  • 実践Sass 前編

    17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった (一昨日ようやくリリース)

    実践Sass 前編
  • Sass か LESS か | Yomotsu net

    迷ってる人はとりあえず、SASS をおすすめします。 以前はピクセルグリッドの社内でも、Node と一緒に使うなら、Ruby で動いている SASS より JavaScript で動いている LESS のほうが相性がいいというようなこともありました。 しかし、SASS と LESS 両方を使ってきて大きな差がわかってきました。 LESS は extend がないまず、LESS には extend がありません。extend は CSS の概念を大きくアップデートすることができるとても大切な仕組みです。 extend については @takazudo のスライドがわかりやすいです。 ちなみに、以前@hokaccha が LESS へ extend のプルリクエストをしたことがありましたが、今のところ取り込まれていません。 LESS はメンテナンスされてないもうひとつ LESS が残念な点として

    Sass か LESS か | Yomotsu net
    heyMackie
    heyMackie 2012/07/23
    やっぱSassかー。
  • 今さら聞けない?!Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ

    こんにちは。ウェブサービス部の hamashun です。 今回は CSS を便利にする Sass (さっす)という技術を、ディレクター向けにご紹介します。 最初に結論:Sassとは? CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。 まずは普通のCSSについて Sass のことを知るには、まずは CSS のことを知っておく必要があります。CSSを自分で書ける or 読める人は、この項は飛ばしてしまってかまいません。 p { color: red; } このソースコードは、ごくシンプルな CSS です。このソースコードの各部分を解説すると、次のようになります。 従って、上記のソースコードを日語にすると、「p要素(pタグ)内の、文字色を、赤にする」となります。 こうして見てみると、CSS の構文は、とてもシンプルであることが分かります。 CSS は、こ

    今さら聞けない?!Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
  • Introduction to Sass and How to Setup with Mac + Coda

    2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する

    Introduction to Sass and How to Setup with Mac + Coda
  • SassやLESSを導入するメリット | Good thinking

    SassやLESSといったCSSを拡張するメタ言語がいろんなブログ記事などで取り上げられ、すでに導入しはじめている人も多いかもしれませんが、まだ導入していない人のために、記事ではそのメリットを一部紹介します。 SassやLESSはCSSを拡張するためのメタ言語です。メタ言語というと小難しいような気もしますが、かなり大雑把に言ってしまえば、Ruby(Sass)、JavaScript(LESS)によって、CSSをより便利にする技術というところでしょうか。.sass,.scss (Sass)、.less(LESS)という拡張子のファイル上でスタイルを書き、それらをCSSRuby,JavaScriptでコンパイル(変換)します。 いずれもプログラミング言語の要することで、普段HTML/CSSJavaScriptはjQueryで、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思

  • IE 9以下に存在するセレクター数制限にはまった

    IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい(リクエスト数削減のため) との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;

  • SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか

    SCSSとLESSのどちらを導入するかけっこう悩んだ時のまとめです。 最終的にはSCSSを選択しましたが、導入の参考になれば幸いです。 ちにみに、SCSSとLESSとは 再利用できるスタイル定義や変数など、CSSを効率的にコーディングできるように拡張されたメタ言語です。 どちらも、CSSをベースにした独自の記法でもってコーディングしそれをコンパイラでCSSに展開するというものです。 LESS SCSS 動作環境や使用などの詳しい比較はこちらが参考になります http://dxd8.com/archives/217/ Sass ≠ SCSS SCSSを調べていると、Sassという単語も目にすると思います。 使い始めた当初はごっちゃになってたのですが もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSらしいです。 Sassも同じコンセプトのCSS拡張言語ですが、 たと

    SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか
  • フロントエンドの開発を加速するCodeKit :: 5509

    また紹介エントリーか。。。Sass布教活動の一貫です。どうも。 SassとかLESSって使ってますか?書くのがとても億劫なCSS(個人の感想です)を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります(個人の感想です)。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。 CSSとフレームワークとメタ言語 Sass、そしてSassy CSS (SCSS) Sass を今すぐ実務で使おうよ! Sassを覚えよう LESS初心者向けのナニカ というか LESS & Sass Advent Calendar 2011() をみてください。 浸透しにくい理由は色々ある気がしますが・・・ コンパイルがめんどい そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。 黒い画面がちょっ

  • sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog

    こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。(普通あまりやらないとは思いますが) color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す