タグ

sassに関するwozozoのブックマーク (32)

  • Popcorn Notify

    PopcornNotify An API for sending simple emails and text messages from your code Get emails and text messages from your code Send simple emails and text messages from one API from popcornnotify import notify notify('5555555555', 'New user sign up') notify('[email protected]', 'Memory exceeded...', subject='Staging Error') notify(['555...', 'team@...', 'dave@...'], "I'm sorry, Dave. I'm afraid I can

    Popcorn Notify
  • @extendを使うべき時、@mixinを使うべき時 | POSTD

    (編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) 私がクライアントからよく受ける質問に 「@mixinと@extend、それぞれどのような時に使うべき?」 というものがあります。 “引数を使わない@mixinは悪である”。 これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使うべき時、@mixinを使うべき時、これらを見極めることにはもっと深い意味があるのです。 それでは詳しく考察していくことにしましょう。 私は普段、@extendは決して使わないようにとアドバイスしています。@extendには、一見したところ魅力的な特徴がたくさんあるのですが、注意しなければいけない点はそれ以上にあります。言ってしまえば 見かけ倒し だということです。 それでも@extendを使い

    @extendを使うべき時、@mixinを使うべき時 | POSTD
    wozozo
    wozozo 2015/04/16
  • Sass Compatibility

    Feature is not supported Feature is supported Twitter icon GitHub icon Feature is partially supported

    wozozo
    wozozo 2014/12/14
  • Sass v3.3, v4.0 での変更点についてメモ

    Sass3.3 がそろそろリリースっぽいので、追加機能・変更点についてうまくまとまった記事があったので、学んでみた。 ちなみに、変更点はこちら 実際に動作を確認するにはpreバージョンのsassをインストールします。 [shell] gem install sass –pre sass –watch source_dir:output_dir [/shell] で確認できます。 &セレクタに関連する構文の改善たとえば、以下のようにした場合 [ruby] $module: ".module"; #{$module}–element { #{$module}__child { //valid color:orange; } & #{$module}__child { // valid color:orange; } #{$module}__parent & { // valid

    wozozo
    wozozo 2013/08/11
  • Looking Into the Future of Sass

    Sass is a CSS preprocessor. This is now common knowledge. First commit in 2007 by Hampton Catlin. Now the most used CSS preprocessor. Sass has come a long way since its beginning. In case you are not very familiar with this stuff, I highly recommend you this article on topic by the David Walsh and this one by the Chris Coyier. In any case, I'll assume you are pretty comfortable with Sass basics. S

    Looking Into the Future of Sass
    wozozo
    wozozo 2013/07/27
    3.3
  • Controlling color with Sass color functions

    Sass comes with functions that can easily be applied to colors in your CSS properties. These functions, when used correctly, can be incredibly powerful. They take some of the sting out of choosing and manipulating colors. When used with variables, they can speed up development drastically. Let’s start off with a creating variable for the color that we’re going to manipulate: This is important for

    Controlling color with Sass color functions
  • Buttons Builder

  • Sassc and Bourbon: it works - Damián Le Nouaille

    Yesterday I wanted to get deeper in Sass by trying Sassc. Sassc is a wrapper for Libsass and Libsass is a Sass compiler build in C++. The project was created and announced by Hampton Catlin (creator of Sass). Why Libsass? The official release of Sass is written in Ruby and it will continue to grow as a Ruby project. But Ruby is generally slow and not only for web frameworks: it’s the same problem

    Sassc and Bourbon: it works - Damián Le Nouaille
    wozozo
    wozozo 2013/06/12
    compass おもいよね
  • Sassの--precisionオプション

    3.2以降のSassでは計算結果が少数になる場合、小数点以下5桁まで出すようになっている(それまでは3桁)。そこで--precisionオプションで小数部分の桁を制限してやることにより、ここくらいのコンパクトなCSSファイルでも0.5KB程度は節約できる。 0.5KBと言われるとやるだけ無駄感があるけど、規模が大きくなれば節約できるサイズはそれなりに増えるし、デメリットはあまりないのでやらないよりはやった方が良いような気がする。 3桁に制限したい場合は--precisionオプションで3を指定する。 $ sass --watch style.scss:style.css --precision 3 最後の桁は四捨五入される。3桁より下にもできるけど、3桁残すことにするとem単位でも1/100の詳細度が四捨五入されても正確になるので、最低でも3桁は残した方が無難。 ブラウザーごとに小数点の丸

    Sassの--precisionオプション
    wozozo
    wozozo 2013/06/11
  • 1216彩票-官网平台

    您不具备使用所提供的凭据查看该目录或页的权限。 请尝试以下操作: 如果您认为自己应该能够查看该目录或页面,请与网站管理员联系。 单击刷新 按钮,并使用其他凭据重试。 HTTP 错误 401.1 - 未经授权:访问由于凭据无效被拒绝。 Internet 信息服务 (IIS) 技术信息(为技术支持人员提供) 转到 Microsoft 产品支持服务 并搜索包括“HTTP ”和“401 ”的标题。 打开“IIS 帮助”(可在 IIS 管理器 (inetmgr) 中访问),然后搜索标题为“身份验证”、“访问控制”和“关于自定义错误消息”的主题。

  • How to structure a Sass project – TheSassWay.com

    One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: styl

    wozozo
    wozozo 2013/04/10
  • Web Design Tips To Help You Succeed - Web Design

    Understanding 해운대고구려 Facebook Marketing Works Having a really good해운대고구려 item may certainly not be actually a guarantee for excellent purchases. It’s achievable for you to possess wonderful service or products,… [더 보기] Just howCrucial 해운대룸싸롱 The Right Diabetes Mellitus Diet? There is actually해운대룸싸롱nothing more important than the best diabetes diet regimen. Diabetic issues is actually a major disea

  • hull, Introducing sass-getunicode

    Introducing sass-getunicode March, 25 2013 - by Victor Coulon Last week I tweeted a “protip” which explains how to find the unicode of a special character to use it in a CSS pseudo element (i.e. :afterand :before). Find a character unicode:’☃’.charCodeAt(0).toString(16); // >”2603”then:.foo:after{content:”\2603”;}#protip In case of you don’t know what it is, a pseudo-element creates an element and

  • Media Queriesの記述を少し楽にしてくれるSCSS(Sass) Mixin(自作) | DevelopersIO

    皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML(5)を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ(巷で知っている方にとっては今さら感たっぷり)。 今回は第一弾としてSass(SCSS)とCompassについて紹介しつつ、Media Queries(前に書いたMedia Queriesに関する記事)の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索

  • フロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。 - 笑いながらコードを書く。

    おはようございます! 盛大に出遅れました。当にすいません! この記事はVim Advent Calendar 2012の51日目の記事です。 50日目は@kmnkさんのgitを操作したいときにちょっと便利かもしれないunite-sourceを書いています。  でした。 今日はフロントだけどVim使ってる人(主に俺)用に作ったプラグインの紹介をさせて頂きます。 作ったもの色々 ・RetinaResize https://github.com/AtsushiM/RetinaResize ここ数年、スマートフォン用のコーディングとかすっごい多いです。 // というかむしろスマートフォンしかやってない そんなわけでスマートフォン用のコーディングをやる上でほぼ間違いなくやる事があります。 そう、「画像のサイズ指定を半分にする」 です。 比較的簡単な作業ではありますが、これが結構面倒臭い。 imgの

    フロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。 - 笑いながらコードを書く。
  • Compass vs Bourbon Frameworks

    As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Im working on a rails 3.1 application. I want to have a fr

    Compass vs Bourbon Frameworks
    wozozo
    wozozo 2012/11/01
  • なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog

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

    なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
    wozozo
    wozozo 2012/10/01
  • null.ly - a really cool domain parked on Park.io

    The domain name null.ly is being parked on Park.io. Contact the domain owner to make an offer right now...

    null.ly - a really cool domain parked on Park.io
    wozozo
    wozozo 2012/08/27
  • パフォーマンスからみるSass/Compass 番外編:MSは青かった - MOL

    2回も続いてないのにまさかの番外編!ここぞ変化球!キエル消える魔球!! ってことで、最近Androidの相手ばかりしていて、「IE… そんな女もいたよね」って感じでしたが、ちょっとハマったので忘備録。グラデーションを使ったデザインをCSSで再現しようとした話。ということでCSSグラデーションのスニペットをUltimate CSS Gradient Generatorで吐き出してみたんですわ。 /* CSS */ .gradient { background: -moz-linear-gradient(top, #000 0%, #595959 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#595959)); background

    パフォーマンスからみるSass/Compass 番外編:MSは青かった - MOL
  • プライマリSCSSファイル

    Sassでは@importをうまく使うと、SCSSファイルを目的別に整理して管理することができます。モジュール化できるということですね。プライマリSCSSファイルとは僕が勝手に付けた呼称ですが、つまり各モジュールを読み込むだけのSCSSファイルのことです。グローバルに使用する変数の設定ファイルなども含めて整理して、プライマリSCSSファイルではそれらを読みこむだけとしておくと管理が少し楽になるんじゃないかと。 このWebサイトのプライマリSCSSファイルは以下のようなものです。 $version: "6.10.21"; /*! * style.css v#{$version} * * LICENSE: http://hail2u.mit-license.org/2011 */ // Web Fonts @import url("http://fonts.googleapis.com/css

    プライマリSCSSファイル
    wozozo
    wozozo 2011/12/18