It is 6:37 AM and I am at an airport. This is where to best ideas happen right? I’ve been perusing the Internet to find some practical examples of Sass lists using list functions in production (somewhat unsuccessfully) and stumbled upon this really awesome CodePen by @shadowmint and @jackarmley. Hmm. Just the thing I needed for in-flight entertainment for the duration of the trip. I wanted to get
Lexing @import simple selector. type selector. child selector. attribute selector. adjacent selector. descendant selector. class selector. ID selector. Ruleset Sub-ruleset Interpolation Property name Property value list Nested properties. Comma-separated list Space-separated list @if , @else , @else if @for, from, through statement @while @mixin @mixin with arguments @include Flags: !default, !imp
(編注：2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) 私がクライアントからよく受ける質問に 「@mixinと@extend、それぞれどのような時に使うべき？」 というものがあります。 “引数を使わない@mixinは悪である”。 これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使うべき時、@mixinを使うべき時、これらを見極めることにはもっと深い意味があるのです。 それでは詳しく考察していくことにしましょう。 私は普段、@extendは決して使わないようにとアドバイスしています。@extendには、一見したところ魅力的な特徴がたくさんあるのですが、注意しなければいけない点はそれ以上にあります。言ってしまえば 見かけ倒し だということです。 それでも@extendを使い
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
# 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
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
_brightness.scss з 窪 �k)쪪 // Brightness math based on: // http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx $red-magic-number: 241; $green-magic-number: 691; $blue-magic-number: 68; $brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number; @function brightness($color) { // Extract color components $red-component: red($color
Sass Unit Testing 02 Apr 2014 We all know that testing is good, and most of us hopefully already write tests for our front-end JavaScript code – but is it needed for our Sass code as well? We need to think about long-term maintenance as our Sass projects and libraries gets more and more powerful. Just look at some of the things Sass can do today, things nobody would’ve imagined just a few years ag
a solution to control font-size relatively with media queries in Sass SCSS で media queries を使いながら、相対的に font-size を扱うよさ気な方法を思いついた。 I just conceived a good solution to control font-size relatively with media queries in Sass. settingsAt first, you can change… base font sizes, which is referenced by reading text like and othres… brakepoints for mediaqueries and here is the settings and mixins $font-si
このエントリーは、膨大にあるSublime Textのパッケージ群の中で、執筆に参加した『Web制作者のためのSublime Textの教科書』の中で紹介していないパッケージのList stylesheet variablesを取り上げます。 監修のこもりさんが、Web制作者のためのSublime Textの教科書のFacebookページにて書籍に掲載していないパッケージを続々紹介しているのですが、そこでList stylesheet variablesが取り上げられました。 "インストールしてプリプロセッサのファイルを開いて、「Ctrl＋Option＋Lキー（Windowsの方は、Ctrl＋Alt＋Lキー）」を押すとあら不思議、定義済みの変数がわらわらとリストされます。もちろん絞り込みもできるので、選択してEnterキーを押せばキャレットの位置に挿入されます。" ということで、パッケージ
Structuring your Sass Tuesday, March 25th, 2014 When setting up a new web project getting things right from the beginning is hugely important. Using Sass, style sheets can now be split into more manageable chunks without adding extra http requests. The Bear boilerplate (created following this earlier post) splits CSS into the following 5 sections… Vendor Base Framework Modules Theme Vendor – This
Discover Sass & Compass Extensions Find the perfect tool for your next Sass or Compass project. Add Your Own
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
