Sass: Sass and Native Nesting
The stable release of Chrome 112, which is releasing today, is the first stable browser to add support for the new native CSS nesting feature. This feature—inspired by Sass's nesting—adds the ability to nest style rules in plain CSS, and even uses Sass's convention of & to refer to the parent selector. We here at Sass HQ are honored every time our language design inspires improvements in CSS itsel
CSS Flexbox のグリッドレイアウトがつくれる Sass Mixin ライブラリ「Flexbox Grid Mixins」をつくりました – シングスブログ
シングスブログ 中小企業のマーケティングやブランディングのコンサルティング。事業開発 (ビジネスモデルの開発)、デジタルマーケティングやウェブサイト改善など事業の持続的・長期的な成長・発展に貢献できるサービスを提供しています。 スタイルシートの Flexbox を使ってグリッドレイアウトが生成できる Sass Mixin「Flexbox Grid Mixins」をリリースしました。 グリッドを自由自在につくりたい どういうものかというと、以下のサンプルのような HTML と Sass があると、サクッとグリッドの CSS をつくってくれます。 HTML <div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> Sass @import 'node_modul
SASS (scss) の基本的な使い方
Dart Sass (scss) の基本的な使い方 Sass の公式サイトの Dart Sass のドキュメントを元に作成した基本的な使い方に関する覚書です。 公式に推奨されている実装環境が Dart Sass になって、@import や除算演算子としてのスラッシュの使用が非推奨（将来的には廃止）になり、@use や @forward が導入され、Sass 関数からビルトインモジュールへ移行されるなどの変更（Breaking Changes）があったため内容を書き換えました。 2021年12月21日 Dart Sass (scss) の基本的な使い方 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には SCSS 構文とインデント構文（Sass 構文
webpack StylusやSassでurl()を含んだCSSファイルなどをimportしたときエラーが出る。resolve-url-loaderで解決。 | e-joint.jp
StylusやSassでは、url() を使う際に、ベースとなるファイルからの相対パスを指定する必要があるけど、他のライブラリのStylus, Sass, CSSを読み込むとき、パスが通らずエラーが起こる。そんなときにresolve-url-loader 。 インストール。 resolve-url-loaderの使い方と注意点 webpack.config.jsでローダーを読み込む。ローダーの読み込みの順番は以下のサンプルのとーり。 注意点は、resolve-url-loader より前のローダーで soucemapが必須であること。以下のサンプルでは stylus-loader で sourceMap: true とする必要があります。でないと謎のエラーが起こってめっちゃハマる。というかめっちゃハマった。 test: /\.(styl|css)$/, use: [ { loader: M
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
【コーダー向け】webpackでSassをコンパイルする方法 | HPcode（えいちぴーこーど）
最初の構成ファイルとしては、以下のように配置していますので、同様に進めたい方は作成しておいてください。 dist・・・ビルド後の出力先フォルダsrc・・・ビルド前の出力元フォルダindex.html・・・静的HTMLファイルwebpack.config.js・・・webpackの設定ファイル index.htmlは以下のように配置しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack Test</title> <link rel="stylesheet" href="dist/css/style.css"> </head> <body>
まくまく Sass ノート | 天才まくまくノート
基本 Sass とは？Sass をインストールする SCSS ファイルの書き方の基本 SCSS ファイルでのコメントの書き方 Sass のインタラクティブシェルで Sass の演算結果を確認する 変数と値 SCSS で変数を使用する 文字列変数の引用符の展開ルール 変数のデフォルト値を設定する (!default) リスト変数を使用する リストの表現方法 リストをループで処理する (@each) リスト用の関数一覧 マップ変数を使用する マップの表現方法 マップをループで処理する (@each) マップ用の関数一覧 制御構文 SCSS 内での条件分岐処理 (@if-else, if関数) SCSS 内でのループ処理 (@for, @while) 応用 SCSS ファイルから別の SCSS ファイルをインポートする (@import) エクステンドでスタイルを継承する (@extend) M
webpackでcssとimageをバンドルする - Qiita
webpackはJavascriptとcssやimageを一緒にまとめることができるのが、GruntやGulpといった他のタスクランナーのように設定が煩雑にならない強み、と公式サイトで見た。 実際、それがどれほど便利なのかを試してみた。 以下は、es6+babel+webpackの環境を想定しています。 cssのバンドル css-loaderをインストール。Scssを使いたいのでsass-loaderもインストールします。 // es5 'use strict'; var webpack = require('webpack'); var path = require('path'); var env = process.env.NODE_ENV; var config = { module: { loaders: [ { test: /\.js$/, loaders: ['babel-l
デザイナーにもオススメ！シンプルですぐできるSass（SCSS）開発環境構築 | Black Everyday Company
ファミコン風CSSフレームワーク（NES.css）を開発するために、Sassの開発環境を整えたので共有したい。 ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。 しかし、Sassを使う上で避けては通れないものがある。 SassからCSSに変換する「コンパイル」だ。 フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツール
フロントエンドのビルドも『Laravel』におまかせ！スゴ腕API「Laravel mix」を使いこなそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんちには、ディレクターのエリカです。 Laravelを利用するときに、フロントエンド側ってどうしてますか？ 今回は、何かと便利なLaravel同梱API「Laravel mix」についてご紹介します。 「Laravel mix」とは？ Laravelの公式ドキュメントには、「多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPI」と紹介されてます。 つまり、sassを利用したcssの記述や、分割されたjavascriptファイルの統合およびトランスパイルなど、フロントエンドのサイト作成業務で主に利用するタスクがLaravelに最適化されたものです。昨今、とくにフロントエンドにおいては多種多様なアプローチがある中で、どのツールを選択したらいいか悩んでいる……そんなとき「Laravel m
Sassで色を調整する - Qiita
sassでベースカラーを元に色の変更を行う関数を忘れがちなのでメモ HSL［色相（Hue）、彩度（Saturation）、輝度（Lightness）］ベース Photoshop等で使用されるHSB(HSV)［色相（Hue）、彩度（Saturation）、明度（Brightness・Value）］ではない HSBで色を変換したいときは「Sassで色空間『HSB』を扱う関数を作った話」で関数を作成されています 色相の変更 adjust-hue($color, $degrees) 色相環の度数($degrees)を○○degで指定 // ベースとなる色 $base-color: #79a5e0; .adjust-hue { color: adjust-hue($base-color, 60deg); }
webpack/sass-loaderでimport毎に共通ファイルを読み込ませる - Qiita
Webpackを使ってReactなどのコンポーネントファイルから同じ粒度に分割したCSS/Sassを書いているとき、 Sassの変数やmixinなど、Globalにimportしておきたいファイルについて頭を悩ませることがあります。 sass-loader に data optionを設定するとうまいこと実現できます。 sass-loader/environment-variables 先に言っておくと、 data は node-sass を通して Libsass へオプションをそのまま通しているだけのようです。 node-sass/data サンプルコード Webpack設定 var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', pa
WordPress 有料テーマ Snow Monkey の基本的な構造について – CSS・エディタースタイル設計編
Snow Monkey アドベントカレンダー6日目の記事です。 昨日はさとうさんが「Snow Monkey オンラインセミナーに参加しました！」というタイトルで Snow Monkey オンラインコミュニティでライブ放送を視聴したときのことを記事にしてくださいました。とても嬉しくなる記事で、ライブ放送もやってよかったなと思いました。ライブ放送はまたやってみたいと思います！ 今日は Snow Monkey の CSS 設計や CSS・エディタースタイルに関する Tips なんかを書きたいと思います。 命名規則・CSS フレームワーク Snow Monkey は Basis という自作の Sass/CSS フレームワークを使用しています。Basis については今までいくつか記事を書いているので詳しくはそちらをご参照ください。 Basis は命名規則に FLOCSS を使っているので、Snow
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
超絶・超速のnode-sassでsassコンパイルのすすめ
さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他にいろいろ調べたらlibsassというライブラリがありsassをC・C++で実装したものということです。 Node、Ruby、Go、Python等の言語からも使えるようでしてnodeなら必ず入れるのでnodeで提供しているnode-sassを入れることにしました。nodeとnpmはセットなのでpackage.jsonのscriptsに記載して運営する方法をご紹介いたします。 gulpとかもありますがいろいろ入れたりするのが面倒なのでpackage.jsonだけで使う方法です。とてもシンプルで使いやすいですのでおすすめな方法です。 node-sass導入方法 node,npmは入っている状態での方法に
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSF3.0対応】Next.js + CSS Modules（Sass）にStorybookを導入し、諸々のセットアップを済まそう
How to use Bootstrap 4 media query mixins | Edd Yerburgh
With node-sass | Bulma: a modern CSS framework based on Flexbox
