LESSに関するkeita_iのブックマーク (3)

  • CSS3対応の為のLESSスニペットメモ - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 角丸やグラデーションをCSS3で表現しようとする時、 どうしても各々の環境への対応のおかげで長いCSSになってしまいますね。 そんな時便利なのがLESSのMixin機能です。 以前も軽くとりあげたLESSですが、 繰り返し出て来る表現にはMixinを使うと大変楽です。(要するに、関数のようなものです) 何度も同じ記述を繰り返さずに済みますし、汎用性のある物ならば使い回しも容易です。 こんな感じに。 角丸 .roundrect(@r:10px){ -webkit-border-radius:@r; -moz-border-radius:@r; border-radius:@r; } 引数にはborder-radiusのサイズを入れてあげましょう。 使い方 .normalBlock{ width: 320px; height: 24

    CSS3対応の為のLESSスニペットメモ - Mach3.laBlog
    keita_i
    keita_i 2011/12/21
  • はじめてのCSSメタ言語はLessがおすすめ! « NAVER Engineers' Blog

    こんにちは、NAVER UIT つしまです。 Less & Sass Advent calendar 2011の8日目です。 これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。 今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。 Lessって? 既にCSSとフレームワークとメタ言語(2日目記事)やLESS初心者向けのナニカ(4日目記事)でも紹介があったとおり、LessはCSSを記述するためのメタ言語です。 ただ後発であるにも関わらず、SassにあるのにLessにない機能は結構あって、例えば、ifやforなどの制御文、extendが使用できなかったり、cssへの出力形式がSassほど選べなかったり・・

    keita_i
    keita_i 2011/12/21
  • Getting started | Less.js

    It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do

    keita_i
    keita_i 2011/12/21
  • 1