[B! CSS][SCSS] yadokari23のブックマーク

yadokari23 id:yadokari23

CSSとSCSSに関するyadokari23のブックマーク (12)

CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。そういえばGoogle Readerが終了するとのことでとても残念ですね。読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。本題それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。最初
yadokari23 2013/03/21
MyInterest

CSS

scss

フレームワーク

sass

framework
リンク
「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
HOME>Web>﹁Sublime Text﹂のみでCompassとSass︵Scss︶を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass︵Scss︶とは？ Sass︵Scss︶とは？ Sass︵Scss︶とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする﹁Sass﹂と、よりCSSに近い記述が可能な﹁Scss﹂とがあるのですが、根本的には変わりありません。︵記述方法が違う︶ちなみに、私はScssを利用しております。どんなことができるのではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
yadokari23 2013/03/13
MyInterest

sass

sublimetext2

compass

css

SCSS
リンク
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編はじめに特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？2月のリア充イベントといえばバレンタインですね︵企業戦略︶。バレンタイン用のチョコを販売するお店も増えてきました。弊社は秋葉原という立地ですが意外なことに既婚者が多いので﹁リア充爆発しろ﹂と嘆く男性は少数のようです。ちなみにビターチョコが好きです。本題今回は少し前に執筆した﹁コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編﹂を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。事前に必要な知識この記事では、以下の事前知識が必要になります。記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
yadokari23 2013/02/04
MyInterest

SCSS

compass

CSS

sass

retina
リンク
Sassオレオレリファレンス
このリファレンスについて元は社内提出用に書いたレポートです。レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。（ついでにかなり加筆修正しています）内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。もし内容に間違いなどありましたらご一報お願い致します。おことわり筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
yadokari23 2012/12/10
コンピュータ・IT

MyInterest

sass

CSS

リファレンス

SCSS

webサービス
リンク
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利｜https://wp.yat-net.com/name
2012年10月31日コーディング速度を3倍早くするSass︵Scss︶のフレームワーク”Compass”が本当に便利カテゴリ‥ Sass タグ‥CodingSassScssコーディング効率化 \ CSSのメタ言語Sass︵Scss︶。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass︵Scss︶ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとはオープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
yadokari23 2012/10/31
コンピュータ・IT

MyHotentry

sass

CSS

compass

SCSS

ruby
リンク
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに早速ですがみなさん、黒い画面︵コンソールやターミナル︶はお好きですか？ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。︵今では好きですよ、黒い画面︶今回は、すぐに使えるSCSS入門｜基礎編ということで、﹁黒い画面など見たくない！﹂というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。まだSCSSを知らない方向けに﹁SCSS﹂って？前回の記事﹁Media Queriesの記述を少し楽にしてくれるSCSS︵Sass︶ Mixin︵自作︶﹂からの
yadokari23 2012/10/10
コンピュータ・IT

MyInterest

css

web

scss

sass

webdesign
リンク
実践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 ===========================
yadokari23 2012/09/09
コンピュータ・IT

MyInterest

Sass

css

scss

slideshare

development
リンク
最近試している Sass の書き方
最近、Sass 3.2 (プレリリース版) を使って新しい書き方を模索しているんですが、その方向性に自信が持てないので、ちょっとさらしてみて反応を見ようという試みです。まず基本的な方向として、以下のような考え方を参考にしています: なぜ @kotarok さんは mixin より extend を推すのか - mixi Engineers' Blog Sassの存在意義 - Weblog - hail2u.net Sassの存在意義への補足 - Weblog - hail2u.net マークアップに合わせてスタイルを書くのでもなく、スタイルに合わせてマークアップするのでもない、それぞれを適切に書いた上で結びつける、というようなことを僕なりにやろうとしています。スタイルの実装と、それらを利用するためのインターフェイスを分離する、みたいなイメージで、具体的には Placeholder (%)
yadokari23 2012/07/12
コンピュータ・IT

MyInterest

CSS

sass

SCSS

web制作

考え方
リンク
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ファイルを変換する
yadokari23 2012/06/26
コンピュータ・IT

Web制作

sass

css

coda

コーディング

scss
リンク
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記はてなグループ日記のエクスポートデータは2020年2月28
yadokari23 2012/04/17
未カテゴリ

ByMyFav

CSS

Sass

SCSS

HTML

web_design
リンク
Bourbon - A Lightweight Sass Tool Set
Bourbon is a lightweight Sass tool set Latest version: 7.3.0 Dependency-free: Bourbon is pure Sass. Human-readable: We aim for clarity over brevity. Lightweight: Zero output post-install and has no visual opinion. Get Started
yadokari23 2012/03/30
コンピュータ・IT

ByMyFav

sass

css

library

css3

scss
リンク
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;
yadokari23 2012/02/23
コンピュータ・IT

Web制作

CSS

IE

SCSS

selector

Sass
リンク
1