まだ間に合う！node-sass（LibSass）から sass（Dart Sass）への移行 - Sansan Tech Blog
こんにちは。 Eight で エンジニアをしている鳥山（@pvcresin）です。 違う違うと自分に言い聞かせていますが、おそらく花粉症になってしまいました 🥺 在宅勤務で良かったです。 今回は Sass のコンパイルに使用しているライブラリを node-sass（LibSass）から sass（Dart Sass）に移行した話をしたいと思います。 Sass 実装三銃士 Sass の実装としては、以下の 3 つがあります。 Ruby Sass LibSass Dart Sass まずは移行作業の話の前に、各実装について簡単に振り返ってみたいと思います。 Ruby Sass Ruby Sass は Sass の最初の実装でした。 発表された 2006 年当時、Ruby のエコシステムは急成長しており、すぐに多くの人に使われるようになりました。 しかし、徐々に Ruby 製であることに起因す
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
アイコンとかに便利なSassの書き方
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 /* -------------------------- */ // define icon /* -------------------------- */ $icon-size: 50px; .icon { display: inline-block; width: $icon-size; height: $icon-size; background-image: url('YOUR_ICON_PATH.svg'); background-repeat: no-repeat; background-position: 0 0; $column: 0; $row: 0; $num: 10; $ic
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
「Web制作者のためのSassの教科書」をいただきました | Webデザインのタネ
下3つはIE7を無視したサイトならとくに@includeを使う必要がないかもしれませんが、自動的にIE用に別途スタイルを書いてくれるのもありがたいですね。 CompassのTypographyモジュールのリファレンス（英語） CompassのUtilitiesモジュールのリファレンス（英語） 英語のリファレンスは画面の左側がメニューになってるになっているので、そっちを見てコードを見ていくと全体感がわかりやすかったです。 Compassのヘルパー（275ページ） Compassのヘルパーはimage-width()とかimage-height()みたいな便利なものもありますが、これ知っておけばもっと省力できた！っていうのがセレクター系のヘルパーです。 headings関数 h1, h2, h3, h4, h5みたいに連続する見出しにスタイルを当てることが多いので、ないかなーと思ってたのですが
君は知っているか、あのCompassのstatsコマンドを！ - Qiita
CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう。 そうすると下記のようなCSSに関する情報が表示されます。 どこで何回ミックスインが定義されて使用されているか、ファイルサイズがどれくらいかプロパティがどれだけ宣言されているかなど、一目瞭然ですね。これで、どこからリファクタリング・手をつけていったらいいのかなど参考にできるかと思います。 ちなみに、statsコマンドのヘルプは下記 $ compass stats --help Usage: co
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
This domain may be for sale!
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
博天堂手机网址_首页
01 多年振动筛设备制造经验 专注标准检验筛，食品振动筛，化工振动筛，粉末振动筛，振动料斗等设备研发制造。 02 强大的研发团队 专业的振动筛开发工程师，精心设计，确保每一款产品都与众不同。 03 规模大、产能高 公司自有1500平厂房、50多名员工,流水线模具生产，年产能达上百台。 04 快速生产 专业模具流水线作业，模块化生产，确保批量产品的快速加工。 05 知名企业首选合作伙伴 世界500强国家等知名企业的合作伙伴。 06 量身定制 我们还能根据客户所属需求，为您定制专属的振动筛解决方案。 新乡市博天堂手机网址专业振动机械有限公司（原新乡市专业振动机械厂）是生产振动筛分设备的专业企业，公司坐落于新乡市北环寺庄顶工业区，滨临京广铁路、107国道，距省会郑州70Km，地理位置优越，交通、通讯设施便利。是一家集振动设备、振动源研发、生产、销售、服务于一体的现代化企业。 公司拥有丰富的振动筛
A Keyframes Mixin (Sass only)
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
Developing with Sass and Chrome Developer Tools
In this tutorial, we’ll review the process of better integrating Sass debugging into our workflow with Chrome Developer Tools. Introduction – Sass Sass stands for Syntactically Awesome Stylesheets; think of it as an extension to vanilla CSS that provides such features as: Variables – For example, define a color upfront, and reference that value in multiple places. Mixins – Share common styles thro
小数の桁数と丸め方を制御する Sass 関数
Sass の数値で出力されるのは小数点以下 5 桁までで、6 桁めが四捨五入される (Sass 3.2 の デフォルト設定 の場合)。つまり、0.333333... は 0.33333 に、0.666666... は 0.66667 に丸められる。でもたとえば 16px/12px の結果として 1.33333 ではなく 1.34 がほしい、というような場面もある。数値を丸める関数として round()、ceil()、floor() が用意されてるけど、いずれも小数部分を丸めて整数を返すもので、任意の桁を操作するということはできない。というわけで、小数点以下の桁数と丸めを制御する round-decimal()、ceil-decimal()、floor-decimal() という関数を作ってみた。 // Round (四捨五入) @function round-decimal ($numbe
[Sass / Compass] ソースマップをChromeで見られるようにしたい « きんくまデザイン
こんにちは。きんくまです。 アプリのアップデートの申請を先週末に済ませました。なので、今週中には審査の結果が出るかと思いますです。 さて、アプリのサポートページというかランディングページといいますかそれを今作り直してます。 そんで前のバージョンでは、Sass用ライブラリBourbonというのをヒネて使ってみたのですが、Compassの方が人気があるので、今回はおとなしく使ってみることにしました。 で、ソースマップが実用化されてるらしいので、そうかそうか。Sassでやったらどうだろうとググってみました。 ところでソースマップって？ ここでソースマップとは何かを説明します。 まず最近はcssやjsの生産性を上げる動きがあります。それには、言語をそのままを書かずに、scssやCoffeeScript、TypeScriptなど別の言語をいったん書いて、そこからcssやjsにコンパイルします。 この
Compass: config.rb image-urlにクエリを付けない - Qiita
Compassのimage-url()で吐き出している画像のURLにクエリがつく。 複数人で作業＋gitでバージョン管理をしている時にすっごく邪魔だったので、config.rbに下記を追記。
compassのベンダープリフィックス制御 « NAVER Engineers' Blog
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。 NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということで タイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://laracasts.com/discuss/channels/general-discussion/issues-with-google-fonts-and-sass-compile?page=1
https://qiita.com/debiru/items/a4e94b5eecf77d251918
1216彩票-官网平台
CSSをSass（Scss）に変換してくれるサイト「css2sass」
SassMe | A Tool for Visualizing SASS Color Functions