Bootstrap 4 alpha
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re
Ruby Sass, LibSass – What's the Difference?
Just when you’re getting used to working with Sass, you hear about a new type of Sass called LibSass. Then you immediately start asking yourself: “What the heck is LibSass? Should I drop Ruby Sass and get on board with LibSass? Oh no — I’m behind on the new hotness!” Don’t worry, you’re not behind… As you’ll learn, Ruby Sass and LibSass are similar. The main differences are in the implementation,
@extendを使うべき時、@mixinを使うべき時 | POSTD
(編注：2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) 私がクライアントからよく受ける質問に 「@mixinと@extend、それぞれどのような時に使うべき？」 というものがあります。 “引数を使わない@mixinは悪である”。 これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使うべき時、@mixinを使うべき時、これらを見極めることにはもっと深い意味があるのです。 それでは詳しく考察していくことにしましょう。 私は普段、@extendは決して使わないようにとアドバイスしています。@extendには、一見したところ魅力的な特徴がたくさんあるのですが、注意しなければいけない点はそれ以上にあります。言ってしまえば 見かけ倒し だということです。 それでも@extendを使い
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点HTMLCSSSassscssCompass あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレな
Import once in Sass the 'Foundation way' | 4waisenkinder
Currently I am working on a huge so called “redesign”, which means to make a big e-commerce plattform responsive. But it is not only about fiddling a few media queries into some existant CSS. For me that is the perfect opportunity to clean up everything and build up a nice and modular CSS architecture. Each component separated into its own file. Margins, paddings, widths, colors, etc. controlled b
Getting to Know LibSass | Envato Tuts+
LibSass is getting more and more popular every day. Not a day goes by without someone claiming they have proudly moved their codebase over to LibSass. Oh, great. Do you feel a bit lost? Not quite sure what LibSass is, how it works and what the main differences are compared to the original Sass? Well worry not my friend, I have you covered. What is LibSass? Before explaining what LibSass is, let's
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
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
BugSnag's CSS Architecture
A few months ago, a number of designers and UI engineers, inspired by a popular blog post from GitHub’s Mark Otto, published articles on their approaches to writing and organizing CSS. In this post, I’m going to follow suit and take you through a breakdown of the tools we use, as well as the architecture of BugSnag’s CSS. There’s no surefire method for organizing CSS for all situations; the conten
Building a Logger Mixin in Sass | Envato Tuts+
I asked him what this mixin does, and he told me it's basically a wrapper for the @warn directive from Sass that checks whether or not the user is willing to print warnings from Neat in the console (based on a global variable). So I thought to myself why stop there? and started playing with the idea that same night. My idea was to build a wrapper for both @warn and @error (from Sass 3.4) to help l
SMACSS Your Sass Up
I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost? While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and p
Sassy Starter
A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS and Atomic Design for Sass (SCSS) projects. Do what you'd like with it :) Styles are broken down into the following groups: Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides Quick start Fork & clone the repo, or download zip file directly. Install dependencies – npm install. Watch for chang
Pushing BEM to the next level with Sass 3.4
With the release of the new parent selector in Sass 3.4 it is possible to deal with your selector as you do with lists. I thought this must be damn usable for your BEM (block element modifier) mixins. .test { @debug type-of(&); //returns list }Problems with the parent selector in Sass 3.3The parent selector has already been reworked in Sass 3.3. Since then you could combine the selector with any k
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - at-import/node-sass-import-once: Eyeglass style Import Once, but for all the things!
sass-eyeglass/eyeglass: NPM Modules for Sass
The Blog | Welcome to Adobe Blog
Sass Compatibility
usetakana.com Online
GitHub - idok/scss-lint-plugin: SCSS Lint plugin for intellij
