SassのMixinを使って、単位、幅の値を自動的に計算 ｜ スターフィールド株式会社
はじめに この記事では、SassのMixinを使って、CSSのプロパティに値を適切な単位で自動的に適用する方法を説明します。SassはCSSの拡張言語であり、Mixinは再利用可能なスタイルのブロックを定義する機能です。Mixinを使用すると、同じスタイルを複数の場所で使い回すことができます。 具体的には、ビューポートの幅に応じて値を調整するためのVW単位や、親要素やコンテキストの幅に応じて値を計算するためのパーセンテージ単位を自動的に適用します。これにより、レスポンシブデザインを実現し、異なるデバイスや画面サイズに対応したスタイルを簡単に作成できます。 SassのMixinを使用して、VW単位やパーセンテージ単位を自動的に計算する方法を詳しく解説します。この方法を理解し、実際のプロジェクトで活用することで、効率的で柔軟なスタイルシートの作成が可能になります。 以下の項目を含めて、Sass
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
小数の桁数と丸め方を制御する 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
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック
テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えることができます。取り除くのは先頭行の上だけなので、先頭行の下やほかのテキスト要素はline-heightが適用されます。 Line-height Crop by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 先頭行だけを上に揃えるスタイルシート テクニックの解説 免責事項 はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとし
![[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbe5fdca5858448e042c50f10de1371724f1a1b4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018082000.gif)
Ruby Sass is Deprecated « Sass Blog
With the release of Dart Sass 1.0.0 stable last week, Ruby Sass was officially deprecated. I'll continue to maintain it over the next year, but when 26 March 2019 rolls around it will reach its official end-of-life. I encourage all users to start migrating away sooner rather than later. The Deprecation Period Over the next year, I'll continue to work on Ruby Sass in a limited capacity. I'll triage
QiitaのCSS構成2017 - Qiita
この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass) を使っています。 プリプロセッサーとして PostCSS を使わなくなった最大の理由は @apply ルールが仕様から落ちた ことです。@apply は Sass でいう引数なしの mixin みたいなもので、Chrome の Canary では実装されていた時期がありましたが、消えてしまいました。 おそらく CSS Nesting Module や CSS Extend Rule も落ちると思
Sass/SCSSコンパイルできるエディタ - dskd
公開日2017-09-19タグCSSここで言う「エディタ」とは主にウェブ制作に従事する人が使うソフトウェアを指している。コーダー白書 2016 の使用エディタのアンケート結果 PDF（p.28）を参考にし、彼らがよく使うと思われるエディタと気まぐれで思いついたエディタを中心に調査した。 gulp 使えやという話はこの記事ではしない。 Sublime Text Sass Build という ST 用のプラグインがあり、Install Package から利用可能。gem install sass が必要。そしてすなわちコンパイラは Ruby Sass。おかげで Compass も利用できるが、2017 年も後半の後半に差しかかろうというイマドキにあえて Compass を選ぶ理由はない。 Sass Build Atom あらかじめ Node.js と node-sass をグローバルにインス
Scooter - Scooter has been deprecated
Scooter was a SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox. You can still find Scooter on Github. Big thanks to Dan, Abraham, Hugo, Taylor, Muhammad, Alexander, Kaelig, Patrick, and Seiei for contributing. License Created by and copyright Dropbox, Inc. Released under the Apache license.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
【WordPress】Sass の @import が非推奨になるから、「おじいちゃん平成くさーいｗｗｗ」とキッズから馬鹿にされる前に遅ればせながら滑り込みで @use に書き換えてみたよ【editor-style.css】
開発者向けブログ・イベント | GMO Developers
レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS
VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め | カレリエ
Ask DN: How do you structure your SASS files in a large project? – Designer News
Sass Formatter - Visual Studio Marketplace