atomでsass-autocompileを使用する方法 - Qiita
Sassを使用していますが、Atomでコンパイルできるように「sass-autocompile」というパッケージを導入しました。 私自身が行なった導入手順と使い方について、備忘的に記載します。（使用しているOSは、macosです） 導入手順 Homebrewのインストール nodebrew、Node.jsのインストール node-sassのインストール sass-autocompileの設定変更 1. Homebrewのインストール まず、Homebrewがインストールされているか確認します。 $ brew -v Homebrew 2.0.2 Homebrew/homebrew-core (git revision 623c4; last commit 2019-02-27) Homebrewのversionが表示されれば、すでにインストールされています。 https://qiita.co
【超簡単！】AtomでSass（SCSS）をコンパイルできるようにしてみた
こんにちは、浅本です。 AtomでSassをコンパイルできるようにしたいと思い、即席で環境構築できましたので、ご紹介します。 今回はWindows10で検証しました。エディタはタイトルの通りAtomを使います。 導入手順 STEP1. nodeをインストール 公式サイトでダウンロードして、言われるがままに進めていくだけです。 https://nodejs.org/ja/ STEP2. nodeがインストール出来たか確認 コマンドプロンプトを開いて、node -v と入力をして確認します。 v8.9.4 と表示されたら問題ありません。数字の部分はバージョンなので違っていても問題ありません。 STEP3. node-sassをインストール コマンドプロンプトを開いて、npm install -g node-sass と入力し、Enterを押下します。 そうするとインストールしている感じの表示が
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
KoalaというSCSS（SASS）開発補助ツールを使ってWordPressテーマの開発効率を手軽にアップする方法
主な手順 SCSS（Sass）＋CompassでWordpressテーマのスタイルシート編集をできるようにする設定には、主に以下の手順が必要です。 Rubyのインストール Koala（コアラ）というGUIコンパイラツールをインストール Koalaの設定 KoalaというGUIツールを使えば、結構手軽にSCSS開発環境を構築できます。Windowsを使っているなら、最も手軽に環境を構築できる手段の1つではないかと思っています。 こんなツールがあったとは。 Rubyのインストール Windowsは、デフォルトでRubyがインストールされていないので、まずはRubyをインストールする必要があります。 まずは、RubyInstaller for Windowsからファイルをダウンロードします。 ダウンロードをし終えたら、ファイル（rubyinstaller-x.x.x-x64.exe）を実行してく
Sassの勉強 #10 関数一覧(Ver.3.4) と自作関数
Sassに用意されている関数一覧 Sassのネイティブ関数一覧は下記リファレンスで確認できます。 >> Module: Sass::Script::Functions — Sass Documentation 色関連の関数 RGB関連の関数 rgb($red, $green, $blue) 赤、緑、青の値から色を作成する。 rgba($red, $green, $blue, $alpha) 赤、緑、青、およびアルファ値から、色を作成する。 red($color) RGBの赤(R値)を返す。 green($color) RGBの緑(G値)を返す。 blue($color) RGBの青(B値)を返す。 mix($color1, $color2, [$weight]) 2つの色を混ぜて中間色を作成する。 HSL関連の関数 hsl($hue, $saturation, $lightness) 色相
Sass（SCSS）入門
本コーナーは、技術評論社発行の書籍『Ruby on Rails 4アプリケーションプログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『Ruby on Rails 4アプリケーションプログラミング』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。 前々回～前回は、CoffeeScriptの基礎解説しました。今回は「Sass（SCSS）」の基礎を説明します。 ■ 9.4 Sass（SCSS） Sass（Syntactically Awesome StyleSheets） は、いわゆるCoffeeScriptのCSS版とも言うべき存在で、CSSのコードを生成するための言語です。CoffeeScriptと同じく、Sassのコードもまた、CSSにコンパイルされた上で送出されますので、クライアント環境に
CSSコーディングで泣かないためのSassの基礎知識と10の利点
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（SCSS）について語る | ツクメモ - ウェブやアプリをツクるヒトのメモ
モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。 Sass（SCSS）は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。 使い方によっては、素のCSSよりも分かりにくくなります。 ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。 Sass（SCSS）とは Sassとは、Syntactically Awesome Style Sheetsの略です。 CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。 実際にブラウザで認識させるには、CSSに変換する必要があります。 Sass: Syntactically Awesome Style Sheets 二つの書き方 Sassには、二つの書き方があります。 インデントでネストを管理し、｛｝や；が必要がない書き方。 拡
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
