少し前に重い腰をあげてようやく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や@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
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
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を使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
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では色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
先日某阪神ファンからタイトルの件のコードを見せてもらって感心したんだけど、すっかり忘れてしまったのでググったら似たようなのが出てきたので紹介します。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">
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 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
Sassの3.3.0.rc.xのバージョンは触っていなかったのですが、 先日カレントバージョンが3.3.0になり、手元の環境を3.3.0にしてみようと思い触っていました。
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ページを開く