CSS aspect-ratioプロパティの代わりをSassのmixinで作成する方法
aspect-ratioプロパティとは 指定した要素のアスペクト比を設定できるCSSプロパティ。 例えば aspect-ratio: 16 / 9; のCSSプロパティを要素に追加すれば16:9のアスペクト比を設定できる。 16:9 aspect-ratio: 16 / 9; レイアウトのアスペクト比の維持に便利なプロパティだがSafari 14.x以下では使用できない。 https://caniuse.com/mdn-css_properties_aspect-ratio Sassの@mixinでaspect-ratioを使用 aspect-ratioが対応ブラウザが少なく、そのままでは使用できないため、使用する際はpostcss-aspect-ratio-polyfillを使用する必要がある。 しかし、postcss-aspect-ratio-polyfillを使用するためにはNode
Staggered CSS Transitions | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Let’s say you wanted to move an element on :hover for a fun visual effect. @media (hover: hover) { .list--item { transition: 0.1s; transform: translateY(10px); } .list--item:hover, .list--item:focus { transform: translateY(0); } } Cool cool. But what if you had several list items, and you wa
Webpackerを導入してから外すまでをふりかえる - 弥生開発者ブログ
こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう！、さらば！ farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方
BEMSkel - A lightweight responsive CSS framework using BEM and SASS
Introduction BEMSkel, or short for BEM Skeleton, is a lightweight CSS framework using BEM and SASS. It's designed to provide a solid foundation for building a component-based web applications and user interfaces. It is written using the BEM (Block, Element, Modifier) naming convention to provide a consistent and strict naming convention which allows you to divide your user interface into independe
【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog
こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
Sass: Announcing Dart Sass
Over the past few months, I’ve been quietly working on a new project. Today I’m ready to announce Dart Sass to the world. It’s a totally new implementation of Sass, designed to be fast, easy to install, and easy to hack on. It’s not yet complete—I’m steadily working my way through sass-spec—so today I’m just releasing version 1.0.0-alpha.1. But it’s solid enough for you to download, play with, and
richbray.me | Web Redirect record
richbray.me This domain is registered for one of our customers. If this is your domain name, please visit this page to see how to register it as DNS zone into your account. Note: If you already have registered the DNS zone for your domain name, please wait for DNS propagation. Your web site will be displayed soon. It may take few minutes. * Do you know what the web redirect record is? Suggested ar
Colours With Sass Map
Here is a quick CSS snippet on how you can use Sass maps to create a colour list for your project. Sass maps are a nice way of creating lists, you can do multiple things with lists you can either loop through all of them or you pick a specific element from the list. If you've used other programming languages before a Sass map is essential an array of key value pairs. $map: (key1: value1, key2: val
Annotating Your (Critical) CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Wladston Ferreira Filho. We’ve covered critical CSS before, but the technique covered was specific to SCSS. Here Wladston covers the basics and introduces another way to do it, through PostCSS, and shows an example (with data) of the result. Critical CSS is a
Authoring Critical Above-the-Fold CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being “critical” – the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later. A clever idea, and one that is gettin
[Sass]４つの値を指定するだけでストライプ柄（縞模様）を実装するmixin
[Sass]４つの値を指定するだけでストライプ柄（縞模様）を実装するmixin 更新日: 2019/10/18 公開日: 2014/04/16カテゴリー: CSS ストライプ柄のサンプルChrome、FireFox、IE10、Safariで確認しました。 Opera、IE9以下は残念ながら動かず（背景が白色になります）。あとChromeで確認すると分かりますが、斜めのストライプ柄にした時に歪みます。（アンチエイリアスに弱い？） ストライプ柄のスタイルを吐き出すmixinmixinはSCSS用です。なるべく簡単に使えるよう最小限の構成（引数）にしてます。 @mixin stripeBg($type: 45, $color1: #fff, $color2: #000, $size: 10) { @if not(unitless($size)) { //サイズに単位が付いてたら削除 $_noun
![[Sass]４つの値を指定するだけでストライプ柄（縞模様）を実装するmixin](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0c3a257133c9db8b55ba25bc1e38926108132fd/height=288;version=1;width=512/https%3A%2F%2Fincrement-log.com%2Fwp-content%2Fuploads%2F2014%2F04%2Fmedium_9230132599.jpg)
Deep Get/Set In Maps | CSS-Tricks
When working on complex Sass architectures, it is not uncommon to use Sass maps to maintain configuration and options. From time to time, you’ll see maps within maps (possibly on several levels) like this one from o-grid: $o-grid-default-config: ( columns: 12, gutter: 10px, min-width: 240px, max-width: 1330px, layouts: ( S: 370px, // ≥20px columns M: 610px, // ≥40px columns L: 850px, // ≥60px colu
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
CSSをSassに変換してみる | SRIA BLOG – 宮城県仙台市のWEBシステム開発・スマホアプリ開発
こんにちは！Genius Barの一日の予約キャンセル数が気になる橋浦です。 今やWEB構築をする上で欠かすことのできないCSSですが、素のままでは正直コンテンツ量の多いサイトは作りづらいですよね。html側のマークアップのネスト(入れ子)が深くなるほどCSSの可読性も落ちていくので、頑張って作ってもその後のメンテナンスが面倒だったりして。 CSSは必要だけど、メンテナンス性も向上させたい… そんなニーズに答えてくれるのが、CSSプリプロセッサ。CSSプリプロセッサを使うことで、ごちゃごちゃになりがちなCSSの見た目をすっきりさせてメンテナンスがしやすくなります。 今回はその中でもSassを使うことを仮定して、じゃあ折角作ったCSSをSassに変換してみようじゃないかといった内容になります。 ※Sassの具体的な記述方法などは説明しない記事となりますのでご了承ください。 Sassに変換して
A Look at Different Sass Architectures — SitePoint
As the size and complexity of a project grows, you require some sort of logic to structure your Sass files. It helps to follow some agreed upon guidelines for creating files and folders when working in large teams and projects. Below is a review of some of the techniques in use today. Bootstrap-sass Bootstrap’s intention is to be a UI library for web developers to quickly get off the ground. It is
Architecture for a Sass Project — SitePoint
Remember when we used to do everything with nothing more than plain old CSS? All we had was a single CSS file, longer than a sleepless night. Yay! Thousands and thousands of lines — usually poorly written — of CSS where we were struggling to find the one value we had to change to fix some obscure and frustrating IE bug. Well those days are behind us, folks. Dealing with CSS has become more interes
How to structure a Sass project – TheSassWay.com
One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: styl
AcceCSS
AcceCSS A Sass Mixin That debugs & checks the accessibility of your designs This mixin will allow you to get an overview of all the zones of your layout, get a grayscaled version to check the contrast, as well as 8 different filters to emulate the most common coloblindness types Find it on Github! What we can call "The API" is the few parameters you will be able to change or combine to use the Acc
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
cssnextを使って最新のcss syntaxで開発するのが良さそう
ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
