Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
Sassのメディアクエリmixinの決定版ライブラリ「Sass MQ」 ｜ Tips Note by TAM
以前、Sassの変数（Map）とmixinでメディアクエリを管理する記事を書きました。 Sassの変数とmixinで変更に強いメディアクエリをつくる 単純なmixinで導入はしやすいですが、min-widthとmax-widthのどちらも使いたい場合は変数とmixinを増やす必要があったり、@media (min-width: 768px) and (max-width: 1023px)のような条件には対応していませんでした。 「Sass MQ」はこれらの機能を備えている高機能で軽量なライブラリです。 「inuitcss」で採用されていたり、「Sass Guidelines」で紹介されていたりしています。GitHubで1578のスターも付けられています（記事執筆時点）。 Sass MQをインストールする npm・yarn・Bowerからインストールできます。 bower install s
[Sass][Design]remを使ったVertical Rhythm
前回、【Sass/SCSS】Modular Scaleを使ったフォントサイズの指定でModular ScaleをSass/SCSSで使う方法について紹介しました。今回はCSS3のremを使ってVertical Rhythmを実現する方法について紹介します。remは対象ブラウザがIE8以上であることが条件になりますが、IE8自体非対象でも良いでしょう。 Example Vertical Rhythmは以外と簡単です。実際にFunctionを作成して実装してみたサンプルがこちら。GRIDLOVERを参考に作成しました。 Function ベースラインを保持ておく変数（$base-line-height: <line-height>;）と行の高さを返すシンプルなfunction（vr([$lines = 1])）を用意します。functionは$base-line-heightと引数の$line
![[Sass][Design]remを使ったVertical Rhythm](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
最新版で学ぶ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
Sassの使い方 – 誰にとっても使いやすいCSSにするための工夫 ｜ Tips Note by TAM
CSS Niteで発表されたコーダー白書2016（19ページを参照）によると、業務でHTMLコーディングをしている人のうち、約70%がSassを日常的に使っているそうです。 CSSプリプロセッサーにはStylusやLESS、もしくはPostCSSのようなツールを使う場合もありますが、上記のアンケートの結果や色々なCSSフレームワークを見ていると、Sassがデファクトスタンダートであることは間違いないようです（Sassは基本的に.scssの記法を想定しています）。 Sassは多機能、でもすべてを使わないといけないわけではない Sassで書かれたコードを見ていると、読みにくいコードや複雑になりすぎているコードをよく見かけます。 SassはCSSにプログラミングの機能を持ち込んでいるので、できることは増えましたが、使い方次第で「書いた人が書いたときにだけ分かるコード」になってしまいがちです。 C
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
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
Sassline v2.0
Originally published May 25, 2014 I thought it was about time to get stuck back into developing Sassline, so over the last couple of weeks I’ve been spending my evenings playing with Sass 3.3 and seeing what it can do. Sass maps are certainly my favourite addition and turned out to be really useful for some things I planned to do. I didn’t know the best way to approach using them, as I obviously h
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
なんだかノウハウ溜まってきた感あるのでまとめる。 1. prefixの付与はautoprefixerに任せる方が良かった 基本的な部分だが、SCSSになんでもかんでもやらせようとするのはよくない。 例えば下記のようなprefix div { -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5); box-shadow: 0px 0px 10px rgba(255,0,0,.5); } sass/scssであればCompass、Bourbon、lessであればLESSPrefixerなど、mixinとしてprefix付与を提供してくれるライブラリがあったりするが、これよりもautoprefixerによる解決をおすすめしたい。 gulpなどを導入していな
Susy vs Neat - Sassグリッドシステム対決 - Qiita
Bourbonシリーズ Bourbonは軽量ライブラリ throughbot製 ドキュメントが丁寧 Star数: 2632 今回除外したもの Profound grid サイトが黄色い。 最終更新が5ヶ月前とあまり更新が活発でなさげ Star数: 902 あまり活発でなさそうなので除外。 用語 用語みたいなものが複雑な感じでぶれそうなので 一旦このドキュメントでは下記のように定義しておく。 column 12分割などしたうちの1つ span 複数のcolumnを含むブロック gutter columとcolumの間の空白の隙間 Installation どちらもgruntなら
Sass 3.4 is Out! — SitePoint
Only a couple of months after Sass 3.3, version 3.4 has already shipped under the code name “Selective Steve”. Quite an odd name but we’ll see that the name is pretty accurate since most new features are about selectors. The Parent selector & in SassScript “In SassScrwhat?” you ask. You can think of SassScript as the language of Sass. Sass is the eco-system, the preprocessor, while SassScript is w
Typesettings
How to setup You can either use the Sass versison or the Stylus version. There are three ways you can download both versions of Typesettings. Download the latest release Clone the repo: git clone https://github.com/ianrose/typesettings.git Install with Bower: bower install typesettings --save-dev Setup Sass To start using Typesettings @import the _typesettings.scss partial into your Sass project a
フロントエンドエンジニア（仮） - MOL
Developers Summit 2014：【13-D-3】 フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜 // SlideShare 2年前でWebデザイナーだった私がどのようにフロントエンドエンジニアなっていったのか。デザイナーにもなれず、エンジニアにもなれないどっちつかずな職種で自分のアイデンティティを模索し、日々の膨大なタスクに追われながら、フロントエンドのワークフロー(Grunt)、最適化（パフォーマンス）について考えたことを紹介します。 『（仮）が取れた時、運命の技術者に出会える・・・』 自己紹介 Koji Ishimoto - t32k.me Web Performance High Performance Web Design Coding Web Performance Long Life Web Performance Optim
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
Why Sass?
A note from the editors: We are pleased to present you with an excerpt from Sass For Web Designers by Dan Cederholm, available now from A Book Apart. I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I certainly don’t want to add extra complexity to my workflow. Go away! That was the thinking anyway. But the reality is that Sass (and other CSS preprocessors) c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
include-media: Simple, elegant and maintainable media queries in Sass
Sass • James Steinbach
Keeping RWD Simple & Sassy • James Steinbach
Sassとかまとめ
