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
In this article we'll take a look at how we can better integrate Chrome DevTools into our Sass development workflow. Tutorial Sneak Peek! Here's a peek of what we'll be doing in this tutorial via an animated GIF: On the left is a terminal and the Sublime text editor, and on the right is Chrome. Changes to the .scss file are being persisted to disk, which is reflected in Sublime, the Sass watch com
前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン(:)で区切り、複数記述する場合はカンマ(,)で区切り、それらを丸括弧(())で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro
Since becoming a fan of Sass, one thing that has bothered me is that not much has been written about best practices for structuring Sass projects. This is one of a series of articles we will be writing to talk about some of the things that folks are doing to make their projects better. In this article, I’d like to kickstart the discussion on developing a Standard Module Definition for Sass. I’ll s
A syntax to SCSS uses its @media = 700x600x40:body = green, and foreground =… To generate a Sass Syntax, please contact Sass Syntax using this url and a screen name (width: (000) 700px). Image: @media (width *= 700px); body: green; background: green. Table of contents what is @media in sass?what is media scss?how do you structure a media query?can we use media query in sass?where do media queries
We’re a full-service digital agency that’s been helping clients make lasting change since 1999. Contact Us Update 01/11/12: new code at the bottom of this post. Sass has been kicking around for a while, but I hadn’t given it a try until just recently. Sass usually goes hand-in-hand with Rails, Compass makes it so easy to run Sass on standalone projects that I’ve started using it on nearly everythi
Sass, with its powerful features over traditional CSS, allows for more organized, maintainable, and scalable stylesheets. However, without a structured approach, the benefits of Sass may not be fully realized. This article delves into effective strategies for structuring Sass projects, emphasizing modular design, partials, and mixins to harness Sass’s full potential. Directory Organization A well-
こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と
最近、Sass 3.2 (プレリリース版) を使って新しい書き方を模索しているんですが、その方向性に自信が持てないので、ちょっとさらしてみて反応を見ようという試みです。 まず基本的な方向として、以下のような考え方を参考にしています: なぜ @kotarok さんは mixin より extend を推すのか - mixi Engineers' Blog Sassの存在意義 - Weblog - hail2u.net Sassの存在意義への補足 - Weblog - hail2u.net マークアップに合わせてスタイルを書くのでもなく、スタイルに合わせてマークアップするのでもない、それぞれを適切に書いた上で結びつける、というようなことを僕なりにやろうとしています。スタイルの実装と、それらを利用するためのインターフェイスを分離する、みたいなイメージで、具体的には Placeholder (%)
Not Found The requested URL /aknf/178 was not found on this server.
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Extended by: Features, Version Defined in: lib/sass.rb, lib/sass/css.rb, lib/sass/exec.rb, lib/sass/repl.rb, lib/sass/root.rb, lib/sass/scss.rb, lib/sass/util.rb, lib/sass/error.rb, lib/sass/stack.rb, lib/sass/engine.rb, lib/sass/logger.rb, lib/sass/plugin.rb, lib/sass/script.rb, lib/sass/shared.rb, lib/sass/scss/rx.rb, lib/sass/version.rb, lib/sass/features.rb, lib/sass/selector.rb, lib/sass/call
sass の公式ページ Sass - Syntactically Awesome Stylesheets 後半は特にトップページに記載されていないのですが、勢いで書きました。疲れました。 Sass Sass を使う事で再び CSS の虜になれるぜ。Sass は CSS にネスト、変数、 Mixin 等を加えたものさ。 Beauty(かっこいい) Sass を使う事で {} や セミコロンからおさらばできるぜ。 たとえば、こんな CSS の場合 h1 { height: 118px; margin-top: 1em; } .tagline { font-size: 26px; text-align: right; } こんな風に書けるのさ(cooooool!!) (追記)ちなみに、2スペースのインデントが重要なので Python だと思って書くと良いでしょう。 h1 height: 118p
なんでSass? Sencha Touchで使われていて、今後出てくるExt JS4でも採用されるとのこと。 先日の勉強会で取り上げられていたので、概要は分かったつもりになっているのですが、 実際に自分で手を動かしてみよう。という企画です。 Sassってなんぞや 原文 Sass - Syntactically Awesome Stylesheets Sass is a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く