Annimay
A collection of pure CSS3 lightweight animations that can be applied to links, sections, buttons and much more. Available in SCSS, CSS and LESS. Scale Up Scale Up Stay Scale Down Scale Down Stay Skew Forward Up Skew Forward Down Skew Backward Up Skew Backward Down Backward Forward Opacity Small Opacity Lift Clockwise Lift Anticlockwise Rotate Clockwise Rotate Anticlockwise Float Float Stay Wiggle
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
第5回 LESS記法について（上級編：文字列の宣言と編集） | gihyo.jp
今までの例では変数に色（カラーコード）やpxなどの数値を宣言して扱っていました。前述のカラー関数やMath関数で変換や計算ができるものです。 しかし、LESSでは通常の文字列も変数に代入することができます。 「CSSで文字列？」と思われるかもしれませんが、urlやcontentなど、文字列の出現頻度は意外と高いものです。 CSSの概念からかなり外れた話なのでちょっと難しいかもしれませんが、文字列の宣言から編集の仕方まで、ポイントを1つずつ見ていきましょう。 文字列を宣言するときの注意点 まずは文字列としてそのまま出力されわかりやすい、contentプロパティを用いた例を見てみましょう。 // LESS @foo: 'var'; content: '@foo'; 「var」という文字列を「@foo」で宣言してcontentの中に入れると、どのように表示されるでしょうか？ 想定としては以下のよ
CSSの親玉、LESSの書き方・使い方
CSSをものすごく高機能にしてくれるCSSメタ言語。これを利用することで変数やネスト、ミックスインといった便利な機能を使うことができ、CSSコーディングが非常に楽になります。 以前書いたSASSの使い方の記事では、SCSSとCompassの使いかたを紹介しました。SCSSももCSSメタ言語と呼ばれるもので、先ほど書いたような便利な機能を使うことができます。 今回はSCSSと同じCSSメタ言語である、LESSを使ってみます。こちらはBootstrap3などでも使用され、SCSSと同じくらいよく使われているメタ言語といえるでしょう。 細かい使い方はこちらの公式リファレンスサイトに載っていますので興味のあるかたはレッツトライ！ LESS.js LESSのインストール方法と準備 LESSを使う前にインストールをしておく必要があります。ターミナルを開いて以下のように入力します。 install -g
吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
Windows対応のSassとかのフリーのコンパイラ
気付いたら、三ヶ月更新なし・・・(；´Д｀) 最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。 良ければ見てください！＞＜ ねこねこキューブ ～ スコティッシュフォールド『アル＆イブ』の今日この頃。 さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。 以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。 Windowsで使えるってのが大事です。ボクはWindowsな人なので。 Koala 一つ目は、Koala と言うコンパイラで、更新頻度も高い感じでRubyさえインストールされていれば、すぐに使えます。 このコンパイラは、次のアップデートでほぼ確実に日本語対応が決定してます。 また、動作もかなり軽い感じで、相当使い勝手が良
LESSで可変長引数のMixinを書く | 風おあ
LESSはCSSを拡張した言語で，変数や関数を使うことができて便利です． LESS « The Dynamic Stylesheet language 特にTransitionやTransformなど，ベンダープレフィックスが必要なものは関数(Mixin)を作っておくととても楽．ということで，以下のようなtransitionのパラメータを設定するMixinを書こうとしたら意外と難しかったのでメモ． 普通にCSSを書いたものがこれ．topとleftとopacityについてtransition-durationを設定している． .slide-item { -webkit-transition: top 1s, left 1s, opacity .5s; -moz-transition: top 1s, left 1s, opacity .5s; -o-transition: top 1s, l
第8回 Media Queriesの弱点をLESSで補う | gihyo.jp
前回はwhenやwhen notを使い、値によって場合分けをするmixinを作成しました。 今回はさらに上級編として、CSS3のMedia Queriesを利用し、解像度ごとの振り分けや、iPhoneのRetina Displayの対応まで含めたmixinを作成してみましょう。 Media Queriesでさまざまな画像解像度に対応する スマートフォンのデザインで問題となるのは、画面解像度に対応しなければならないことです。画面解像度によって、指定するCSSを変えたり、高解像度の画像と通常の画像を振り分けるのは、めんどうな作業です。 そんな問題を解決するのに役立つのが、「Media Queries」です。 Media Queriesとは、CSS3から採用された新しい書式で、CSS2で採用されていたMedia Type（印刷用CSSを定義するprintなど）を拡張したものになります。 W3C
第9回 LESSのメリットを最大限に生かした書き方 | gihyo.jp
前回はMedia Queriesの利用方法とその難点、LESSのコンパイラを利用して少しラクする記法をご紹介しました。 今回はさらに掘り下げて、処理をmixinとして作成し、LESSのメリットを最大限活かす方法をご紹介します。 自動化のポイント まず、前回のコードをおさらいしておきましょう。 //LESS body { #foo { background-size: 320px 480px; @media screen and (-webkit-device-pixel-ratio:2){ background-image: url('bg_x2.png'); } @media screen and (-webkit-device-pixel-ratio:1){ background-image: url('bg.png'); } } } @mediaを毎回書くのは大変ですし、ミスタイプを
[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法|情報備忘録
HOME>情報備忘録>[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法 [CSS]WindowsでLESS更新時に自動でコンパイルする設定方法 Windowsで.lessファイル更新と同時にコンパイルしてCSSを書き出す方法を2つほど。 簡単に開発環境を構築するためUbuntu入れたのに、Windowsの方が簡単だったりするから困るw lessc.exe GUIもいいけど、コマンドラインツールがあると他のツールからも使えたりするので、何かと便利ですよね。 設定もすごく簡単なので下記ページからlessc.zipをダウンロードして解凍後、lessc.exeを適当な場所に設置します。
HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル（Win / Mac） | DevelopersIO
そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。 前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。 LESSとはCSSに対する拡張メタ言語のことです。拡張メタ言語とは、元の言語と同じ意味（機能）をより少ないコードで表現できるようにしたもので、「あー、CSSダラダラ書くの超めんどくせー、息をするのもめんどくせー」という横着なアナタにピッタリの言語というわけです。詳しくはこちらをご覧ください。 LESSからCSSファイルを書き出す (Win) lessc.exe まずはコマンドラインツールによる手法からやっていきます。以下の
Preboot
Preboot A collection of LESS mixins and variables for writing better CSS from @mdo. Download Preboot View project on GitHub Tweet Introducing Preboot Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap. Since then, it's all come full circle. After a two-year hiatus, Preboot has been reborn with many of the LESS v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LESSのextend機能の使い方について - O2 Project Blog
LESS活用事例 3枚の画像を組み合わせて伸縮自在のボックスを作る - jsdo.it - Share JavaScript, HTML5 and CSS
http://less-ja.studiomohawk.com/
Loading...
LessやSass、CoffeescriptなどをコンパイルできるWindows用ソフトウェア・「Prepros」
s3pw.com
css2less.cc
ワンクリックでHTMLからCSS/LESS/SASSを自動生成してくれる『OneClickCSS』 | IDEA*IDEA
