Sass Color GeneratorSass Color Generator # / %
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
Sassのリスト
Sassではいわゆる「配列」のような複数のデータを格納するリストを作れる……というのだけど使ったことなかった。リファレンスでもさらっと流されてるし、リストを使う@eachの説明でもベタに並べてあるだけで、どうやって作ってどうやって使うのかイメージできなかった。変数の値を空白区切りにしたらリストな変数になるということはどう考えてもリファレンスからは読み取れないと思う。 基本 特に難しいこともなく空白(かカンマ)区切りで指定するとリストになる。 $lists: foo bar buz; .test { property: $lists; } リストな変数であってもそのまま参照した場合は普通の変数と同じようにそのまま(空白区切りのまま)出力される。 .test { property: foo bar buz } リストの特定のインデックスの値を参照するにはnth()関数を使う。 .test {
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説
前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
「Sass Color Generator」が配色指定をlighten/darkenでするときに便利すぎる
Sassには便利なカラーコントロール機能があるんですが、そのカラーコントロールをする際に、えらく便利なジェネレーターがありました。 「Sass Color Generator」というそのものズバリな名前なんですが、この配色ジェネレーターを使えば想定した色にするための指定数値が見える化されますよ。 Sassにおけるカラーコントロール まずは、Sassのカラーコントロールについて触れておきましょう。 Sassコーディングには変数が利用できます。SCSSファイル上で、その変数を使って色を規定することができるようになっているんです。 $color-text:#525252; $color-background:#f0f0f0; このように$から始まる変数に色(カラーコード ※rgba指定も可能)を規定し、あとはCSSで色指定したいところに当該の変数を使うだけです。 $color-text:#525
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
Grunt × SCSS × Compass × StyleDocco（開発環境構築メモ） - Qiita
$ mkdir -p ~/develop/grunt $ cd ~/develop/grunt # compassプロジェクトを作成します。 $ compass create grunt-test # stylesheetsというディレクトリーが生成されますが、今回は不要なので削除します。 $ rm -R grunt-test/stylesheets # sassというディレクトリーが生成されますが、今回はscssなのでリネームします。 $ mv grunt-test/sass grunt-test/scss http_path = "/" # SCSS(Sass)ファイルの置き場所 sass_dir = "scss" # コンパイルのCSSファイルの置き場所 css_dir = (environment == :production) ? "assets/css" : "docs/css
SCSS: keyframe mixins
gistfile1 �W�U ���\�U // ====================================================================== // Animation.scss // - Contains helpers for keyframes animation in css3 // - Only functionally with Sass 3.2.0 Alpha and Compass 0.13.alpha // ====================================================================== @mixin animation-name($name) { -webkit-animation-name: $name; -moz-animation-name: $name;
kanapple.net - KANAPPLE.NET
Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.
[Sass(SCSS)+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開！ | Cappee Design
残暑お見舞い申し上げます、@cappeeです。 おひさしブリーフ。 さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。 実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。 そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。（大げさ） サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。 最初の記述 文字コード まずはSass(SCSS)ファイルの最初に文字コードを指定します。 @charset "utf-8"; Compass Compassを使う場
kanapple.net - KANAPPLE.NET
Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.php on line 149 Warning: Trying to access array offset on value of type bool in /www/wwwroot/test/index.
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
SLOT88 Situs Judi Slot Online Gacor 100% Jackpot Hari ini Hadir sebagai situs judi slot online terbaru, SLOT88 saat ini menjadi salah satu pilihan bagi para penikmat permainan judi online yang ada di seluruh Indonesia. Ini semua karena permainan yang disediakan begitu seru dan mengasyikan, game slot online juga sangat mudah di akses dan dimainkan kapan saja hanya melalui HP berbasis android dan io
Sass3.3.0の「&」の扱い
Sassの3.3.0.rc.xのバージョンは触っていなかったのですが、 先日カレントバージョンが3.3.0になり、手元の環境を3.3.0にしてみようと思い触っていました。 Gemfileはこんなん。 #Gemfile source "https://rubygems.org/" gem "sass", "3.3.0" gem "compass", "1.0.0.alpha.18" Sassの3.3.0.rc.2から3.3.0.rc.3に上がった段階で「&」の扱いに変更があり、それについて、あまり記事になってないのでメモしておく。 3.3.0.rc.1または3.3.0.rc.2から3.3.0に移行する時の注意いろいろしてみたサンプルコード個人的に思うこと間違いとか、ご意見ありましたら @GeckoTangまでどうぞ。 3.3.0.rc.1または3.3.0.rc.2から3.3.0に移行する時の
Musings on Preprocessing | CSS-Tricks
I’ve been using Sass for pretty much everything I do recently. Here’s some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax. You Gotta Work Locally The biggest contributor to me getting on the bandwagon was giving up my going-commando live FTP editing ways. Yeah, Coda is awesome, but it’s bad habit forming. It makes it way too easy to wo
HTML5 Conference 2013:今どきのGruntを使ったフロントエンド開発（HTML/CSS編）
modern-development-workflow-with-grunt.md 今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 @t32k Why use Grunt? Grunt: The JavaScript Task Runner GUI Apps CodeKit — THE Mac App For Web Develo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS - まごのてツールズ
Create a cross-browser mixin for transform: rotate
Codeboxers.com
https://toybox-design.net/?p=640