Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la
npm-scriptsでDart Sassのコンパイル環境構築
概要 今回は、npm-scriptを使用したSassの環境構築手順を紹介します！ 説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。 1. npm-scripts での環境構築 Sassの環境構築というとGulpを使用されている例が多いかと思います。 しかし 2020 年頃から、かの有名なフロントエンドロードマップでもそこまで注目されなくなり npm-scriptsで殆どの事が解決できるのではないかという雰囲気に。 という事で今回はnpm-scriptsでの環境構築を行っていきます。 2. DartSass を使用したコンパイル 意外と知られていない事なのですが、厳密にはSassは3種類あります。 基本的な記述方法は同じですが、@import等細かな箇所で違いがあり、 独自の機能・記述方法を使用している場合には、乗り換えは少し手間になる事があります。 1. Ruby S
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
Compass: config.rb を詳しくみる | DriftwoodJP
設定ファイルとオプション。 コンパイル時に実行するタスクを設定する。 Configuration Reference | Compass DocumentationWebTecNote – [Compass] 超訳 Configuration Reference【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜設定ファイルを知っておこう – 番外編 ｜ Developers.IO例えば、下記のように /theme ディレクトリ内で開発したい。 . ├── .sass-cache ├── config.rb ├── sass │ ├── ie.scss │ ├── print.scss │ ├── screen.scss │ └── style.scss └── theme ├── images ├── index.html └── stylesheets ├──
やさしいSassとCompassの導入方法（Windows、Mac） | ajike switch
いまさらですが、SassとCompassの環境を導入しました 以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました 前置きはさておき、今回は環境構築についてです 私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです… Rubyのインストール Macは最初から入っているようですが、Windowsはインストールしなければいけないようです Windowsユーザは、下記URLからダウンロードしてください RubyInstaller 次に、念のためRubyがインストールされて
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 | codechord
Posted 12月 13th, 2012 by codechord. 8 Comments Tweet Tweet こんにちは。Sublime Text 2 Advent Calendar 2012 の13日目です。 http://www.adventar.org/calendars/20 釣りタイトルですいません。 記事が思ったより長くなってしまったので、まず簡単に何をしたいかを説明します。 僕だけじゃないと思うんですが、sass/SCSSを使っている場合に限りですが、サーバにアップするのが自動でできなくて、イライラを感じたことはありませんか？SublimeText2使ったら解消でき、作業効率化できますよ。というお話で、一連の設定手順を紹介します。 SublimeText2を使って、Sass/SCSS(compass)を使い自動生成したcssファイルを自動でサーバにアップロード。これっ
ブラウザでSassをデバッグ
ブラウザで簡単にですが、Sassをデバッグする方法をご紹介いたします。 対象ブラウザはFirefoxとChromeブラウザです。 FirefoxはアドオンからFirebugと FireSassをインストールします。 ChromeはWeb StoreからSASS Inspectorをインストールします。 インストールした後、「config.rb」に「sass_options = {:debug_info => true}」を記述します。 次に「compass watch」でSassファイルを監視し、Sassファイルに何らかの記述をすると、CSSが更新されCSSに「@media -sass-debug-info{}」という記述が追記されます。 以上でSassファイルの記述内容を行番号付きで、インストールしたブラウザの拡張機能に表示させることができます。 FirefoxではFirebugの「HT
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
[sass][scss][css][Rails3] SassでCSSをシンプルに - プログラマ憧れプログラマ日記
はじめに Railsは3.1からSassがサポートされました。今回はSassに加えて、Sassからの派生であるSCSSについて簡単にまとめてみます。 SassとSCSS Sass - Syntactically Awesome Stylesheets http://sass-lang.com/ Sassは元々Hamlと供に開発されてきた経緯があって、スペース2つでネストしたり、文末のセミコロンが不要となっています。 一方、SCSSはCSSのシンタックスを活かしたまま、Sassの機能を再実装したもの。CSSシンタックスに近いので学習コストが少なくてすみそう。 このサイトがよくまとまっていて、分かりやすいです。 Sass、そしてSassy CSS (SCSS) http://hail2u.net/documents/sass-and-sassy-css.html どうやらSassとSCSSはシ
![[sass][scss][css][Rails3] SassでCSSをシンプルに - プログラマ憧れプログラマ日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/06a15c64ba0ceec233d86d71001ebb29a9dcbf5d/height=288;version=1;width=512/https%3A%2F%2Fcdn.blog.st-hatena.com%2Fimages%2Ftheme%2Fog-image-1500.png)
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog
この記事は Sublime Text 2 Advent Calendar 2012 とは関係なく書いております。 いや、Sublime Text 2 Advent Calendar 2012 で投稿されていた 一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 という記事を読んで、自分で試したことのメモなので少し関係あるかな。 記事書いてくれた @tomo_thumb さん、ありがとうございます m(_ _ )m ということで、Sublime Text 2 だけで Sass/Compass のコンパイルができるということで、黒い画面でコマンドゴニョゴニョしたり、いちいち Scout 立ち上げたりしなくてもよさそうなので、Sass/Compass の導入の敷居が少し下がりそうな感じですね。以下、Windows 環境での解説。 pack
Sass、Compass な僕の Dreamweaver スニペット
CSS Preprocessor Advent Calendar 2012の11日目。 エディターは何をお使いでしょうか？ CSS Preprocessor を利用しているイケてる皆さんは Sublime Text 2 や、Coda 2、Vim などを利用しているかと思います。 僕は CSS Preprocessor は利用しているのですがそれほどイケてませんので、エディターは未だに Dreamweaver 一本です。 というわけで、ドリで Sass や Compass を使う方向けに。 ドリに .scss ファイルなんかを認識させる 以下のまーしーさんの記事を読むとよいでしょう。僕もこれを読んで設定しました。 ※ちなみ Sass のインストールなんかは Codekit にまかせています。その辺は明日西畑さんが書くと思います。 SassとDreamweaverのコードヒントでCSSをさらに
Sass + Compass の基本導入と設定ファイル config.rb について
明けましておめでとうございます！今年もどうぞよろしくお願いいたします。 2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。私は寝正月を大満喫しました。 さて、Windows でも Mac でも Sass + Compass 環境ならば config.rb で設定が書けるので、今日はそれについて。「Sass とは何か？」「Compass とは何か？」は省きます。インストールから設定、楽して監視開始、あたりを。 Sass + Compass を使うには？ まず基本のとこから一応さらっと！ 最近は簡単な方法もたくさん出ていますが、地道にやるならば Ruby（と RubyGems）を入れて、Sass と Compass を入れて、となります。 Ruby + RubyGem インストール Windows だったら RubyFor
Sassオレオレリファレンス
このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。
気が付いたら8月突入してて茫然としたhakoishiです。 しかももう1/3過ぎてるとか冗談はおよし。 さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。 まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。 最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。 まるで統一感のないソースに…！ そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。 更に、メディアクエリ毎にまとめて吐き出されるようにしました。 一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容 メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CoffeeScirpt, Sass, Slim ファイルを生成する Middleman のテンプレート Gem を作った - Qiita
howtohp.com
