こんにちは。 新卒デザイナーのshikaです。 入社から早くも3か月が経ちました。仕事をする上で「高いクオリティ」と「限られた時間」との両立がどれほど大変かということを、強く実感しています。学生の時は時間に余裕もあり、ポートフォリオを作る時も自由に時間を使えました。Webページの制作にもCSSを生のまま書いていたのですが、コーディング作業の効率化をしようと思い、以前から気になっていたSassに手を出してみました。 その結果、ある程度使えるようになったので、Sassの導入方法や初歩的な部分を解説してみようと思います。 Sassって? Sassとは、「Syntactically Awesome StyleSheet」の略です。直訳すると構文的に、凄い、スタイルシート…? とりあえず、いろいろ便利になったCSSというイメージで大丈夫だと思います! Sassは2種類の構文で構成されたスクリプト言語
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説! ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。(そこまでまだ使いこなしてないので、正しくは「できそうです」。) せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
CSSコーディングで泣かないためのSassの基礎知識と10の利点:爆捗! WordPressテーマ作成ショートカット(3)(1/3 ページ) 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗! WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう!】の全記事一覧です。 【Sassを覚えよう!Vol.1】はじめに 【Sassを覚えよう!Vol.2】何がすごいの?プログラムが出来なくても使える?効率がホントに上がるの? 【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編) 【Sassを覚えよう!Vol.4】Sassの基本的な記述方法 【Sassを覚えよう!Vol.5】環境構築(黒い画面編) 【Sassを覚えよう!Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう!Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に
明けましておめでとうございます!今年もどうぞよろしくお願いいたします。 2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。私は寝正月を大満喫しました。 さて、Windows でも Mac でも Sass + Compass 環境ならば config.rb で設定が書けるので、今日はそれについて。「Sass とは何か?」「Compass とは何か?」は省きます。インストールから設定、楽して監視開始、あたりを。 Sass + Compass を使うには? まず基本のとこから一応さらっと! 最近は簡単な方法もたくさん出ていますが、地道にやるならば Ruby(と RubyGems)を入れて、Sass と Compass を入れて、となります。 Ruby + RubyGem インストール Windows だったら RubyFor
2012年 10月 31日 コーディング速度を3倍早くするSass(Scss)のフレームワーク”Compass”が本当に便利 カテゴリ: Sass タグ:CodingSassScssコーディング効率化 \ CSSのメタ言語Sass(Scss)。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass(Scss)ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く