sass-migratorを使ってLibSassからDartSassに移行する手順
少し前に重い腰をあげてようやくLibSass(node-sass)から移行したので、その時のメモを残します。 Sass の@import 廃止は2022年10月と発表されていましたが、DartSassの使用率が80％になるまで延期する旨が2022年7月に公式のGitHub にて記載されてました。そのため当初の予定よりも猶予はありますが、近い将来廃止が確定しているため、どこかのタイミングで切り替える必要があります。 ※余談ですが私が移行したのは廃止日の問題ではなく、M1 Macbookの仕様の問題だったりします。M1 はLibSass が通らないので新規pjだとLibSass は使用できない / 既存pjであったとしてもnode_module をすべて消去して再度npm install をしてしまうとアウトなので注意。 結論からいうとMigrator のおかげで思っていたよりもスムーズに移行
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
Sassを使ったz-indexの管理 改 - Qiita
Sassを使ったz-indexの管理 はめちゃ便利。 でも、mapで並べた時に下の方がz-indexの数値が大きいので、下が上になる。レイヤー構造を逆に考えないといけない。 なので配列を逆にする処理を噛ますことで、上の方が上レイヤーとなり、さらに見やすくできる。 配列を逆に $z-index:( header, //1 nav, //2 pulldown, //3 child //4 ); //リストを逆転させる @function list-reverse($map) { $result: (); @for $i from length($map)*-1 through -1 { $result: append($result, nth($map, abs($i)), comma); } @return $result; } $z-index: list-reverse($z-index
SassとCSS設計 | 第1回 Sassの基本
File: SASS_REFERENCE - Sass Documentationにあるコンパイル後のソースコードを見てもらうと、なんとなくイメージしやすいと思います。 出力形式を指定してコンパイル 次に出力形式を指定して、コンパイルする方法を試してみましょう。一度、Ctrl＋Cキーを押して、watchを停止します。次にコマンドを入力します。 先ほどのコマンドに加え、出力形式を--style 出力形式名として、styleオプションを指定すればいいだけです。 $ sass --watch sass:css --style compact この例では--style compactとして、compactを指定しました。出力結果は次のようになるはずです。 body { background-color: #faf9f5; color: #4d220f; } シンプルなコンパイルのときとは違い、1行
Sassを使ったz-indexの管理 - Qiita
$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Sassで要素を1つずつ遅延表示させる簡単な方法
先日某阪神ファンからタイトルの件のコードを見せてもらって感心したんだけど、すっかり忘れてしまったのでググったら似たようなのが出てきたので紹介します。Sass、かつCSS3前提です Sass/Compass Animation Delay For Loop | Snippet Repo HTML<ul class="box"> <li class="element">1</li> <li class="element">2</li> <li class="element">3</li> <li class="element">4</li> <li class="element">5</li> <li class="element">6</li> <li class="element">7</li> <li class="element">8</li> <li class="element">
Sass/Compass よくあるトラブルと 解決方法・回避方法
14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
NAVERでのSassの使い方 « NAVER Engineers' Blog
NAVER UITのSass Mixins職人（他称）の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。 基本ディレクトリ/ファイル構成 今のところcss/sassディレクトリは下記のような構成を基本としています。 project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod
Sass3.3.0の「&」の扱い
Sassの3.3.0.rc.xのバージョンは触っていなかったのですが、 先日カレントバージョンが3.3.0になり、手元の環境を3.3.0にしてみようと思い触っていました。 Gemfileはこんなん。 #Gemfile source "https://rubygems.org/" gem "sass", "3.3.0" gem "compass", "1.0.0.alpha.18" Sassの3.3.0.rc.2から3.3.0.rc.3に上がった段階で「&」の扱いに変更があり、それについて、あまり記事になってないのでメモしておく。 3.3.0.rc.1または3.3.0.rc.2から3.3.0に移行する時の注意いろいろしてみたサンプルコード個人的に思うこと間違いとか、ご意見ありましたら @GeckoTangまでどうぞ。 3.3.0.rc.1または3.3.0.rc.2から3.3.0に移行する時の
Divshot - Static Web Hosting for Developers and Designers
Divshot has joined the Firebase team at Google! Firebase is a comprehensive suite of products for developers offered by Google, and by joining our vision with theirs, Divshot's mission continues onward at a grander scale! Firebase Hosting is Firebase's static web hosting service and is now powered in part by Divshot technology. However, all existing Divshot products including static web hosting an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass: Dart Sass Command-Line Interface
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blog
SASS How to set a Variable to equal nothing?
The Blog | Welcome to Adobe Blog