Diamond grid layout with Sass
Since I started my career on the web, I’ve been building websites that follow standard grid layouts. It got to a point where I was telling an intern at my company that developers think in rectangles. I mean, there’s nothing wrong with rectangular layouts. They’re like your mom’s Volvo, steady and reliable. But sometimes, it’s fun to try something different. I’m lucky enough to work with some aweso
Overview
Flexible layouts, done your way Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project. @include columns(); // Try changing the column
任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
Release the docs!
# Install SassDoc globally npm install sassdoc -g # Run SassDoc on your project sassdoc source/ Already using SassDoc? Upgrade to version 2 right away! SassDoc is to Sass what JSDoc is to JavaScript: a documentation system to build pretty and powerful docs in the blink of an eye. Among other things, SassDoc is: usable out of the box; highly customisable; blazingly fast; fully themable; integrated
A Vision for Our Sass
At a recent CSS meetup, I asked, “Who uses Sass in their daily workflow?” The response was overwhelmingly positive; no longer reserved for pet projects and experiments, Sass is fast becoming the standard way for writing CSS. This is great news! Sass gives us a lot more power over complex, ever-growing stylesheets, including new features like variables, control directives, and mixins that the origi
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
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Sass v3.4.0.rc.1とgrunt-contrib-sass
Sass v3.4.0.rc.1が出た。&の扱いが拡充したこととセレクターを扱う関数の追加がトピック。他に予告されていた変数スコープの改善も思ったよりも早く導入された。後方互換性を失う変更はあるものの、大体は問題なくコンパイルされる。けどコンパイラーのオプション他に変化があったため、それらをラップするツールで不具合が起こりやすい。例えばgrunt-contrib-sassが--load-pathと--sourcemapオプション辺りの変更に対応できておらず、例外を吐いて落ちたりする。 NoMethodErrorへの対策 普通に実行する場合は問題ないが、--load-pathオプション付きで実行しようとすると以下の様にSassコンパイラーがNoMethodErrorで落ち、タスクが止まってしまうことがある。 Running "sass:main" (sass) task NoMethodEr
Sharing Data Between Sass and JavaScript with JSON | Viget
Traditionally stylesheets describe the majority of the presentation layer for a website. However as JavaScript becomes necessary to present information in a stylistically consistent way, it becomes troublesome to keep these mediums in sync. Data visualizations and break-point based interaction are prime examples of this; something I bumped into on my most recent project. I should note that this is
Handy Sass Mixins - Web Design Weekly
Mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful. I have also added the mixins to GitHub. If you have any favourite mixins, thou
Responsive Web Design In Sass Using Media Queries In Sass 32 – TheSassWay.com
A syntax to SCSS uses its @media = 700x600x40:body = green, and foreground =… To generate a Sass Syntax, please contact Sass Syntax using this url and a screen name (width: (000) 700px). Image: @media (width *= 700px); body: green; background: green. Table of contents what is @media in sass?what is media scss?how do you structure a media query?can we use media query in sass?where do media queries
Sache: Find Sass and Compass Extensions for your next project
Discover Sass & Compass Extensions Find the perfect tool for your next Sass or Compass project. Add Your Own
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass: Dart Sass is On Chocolatey
Browser and Device specific CSS Styles with SASS and LESS mixins
GitHub - dnomak/font-awesome-scss: Font Awesome Scss Core (Unofficial)
Sass Compatibility
GitHub - at-import/jacket: Conditional Styles with Sass. Dress you CSS appropriately.
BEM modifiers: multiple classes vs @extend
howtohp.com
