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を押下します。 そうするとインストールしている感じの表示が
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
フリーのSass,LessコンパイラKoala【Win,Mac】
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
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 のインストールとコンパイル(Windows) - はしくれエンジニアもどきのメモ
Sass のインストールとコンパイル(Windows) 今更ながら、Sass を使い始めたので、Sass の基本的な使い方をメモしていきます。 今回はインストールについてです。 Sass とは sass-lang.com Syntactically Awesome Style Sheets の略です。 効率的にCSS を書ける言語です。 CSSプリプロセッサ や CSSメタ言語とも呼ばれる。 ファイル形式は以下の2種類がある。 .sass（ruby/hamlライク） .scss（css3ライク） 上記のファイルをRuby でコンパイルして、CSSファイルを生成します。 そのため、Ruby をインストールする必要があります。 Ruby のインストール Windowsの場合、下記のインストーラでインストールできます。 PATH も忘れず設定しておく。 RubyInstaller for Win
ファイルの更新すると自動的に LESS、SASS ファイルをCSSにコンパイルする GUIのソフト Koala が便利 | 9ineBB
HOMEPC全般フリーウェアファイルの更新すると自動的に LESS、SASS ファイルをCSSにコンパイルする GUIのソフト Koala が便利 WEB制作を学ぶ過程で、CSSは必須です そのCSSですが、最初は メモ帳のような 単純なテキストエディタで手書きで始める方も多いかとおもいます 私の場合は Terapad で HTML・CSS を書き始める コードヒント付きのテキストエディタで書き始める zen-code(emmet)が使えるエディタで書き始める CSSからSCSSへ乗り換える こういった流れです、更に効率化のためにSASS（SCSS）を使おうと思って Compassを知ったりしましたが 結局は GUIのソフトが Windowsを長年使ってきた人には 馴染みが良い そこで、見つけたのが Koala というソフト こちらのソフトは、すごく手軽 ソフトを起動して、監視するフォルダ
BracketsでSASSを快適に利用できるようにする 拡張機能+コンパイラ | 9ineBB
WEB制作向けに特化したテキストエディタのBracketsでSASSを快適に使うための拡張機能とコンパイラの紹介。Bracketsの場合はSCSSでは、入力補完機能がデフォルトで使えたりしますがSASSでは少し不便だったりしますので、それを拡張機能でカバー出来ます。 BracketsでSASSで入力補完が使えるようにする Bracketsはこちらで入手してください http://brackets.io/ BracketsでSASSの入力補完をサポートする拡張機能 https://github.com/sprintr/brackets-sass-code-hints Bracketsに拡張機能をインストールする ファイル > 拡張機能マネージャー > 入手 > 検索 > インストール という流れで拡張機能をインストールする事が出来ます 拡張機能マネージャーの起動 拡張機能のインストール 拡張
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ページを開く
The Blog | Welcome to Adobe Blog