123

Posts tagged sass

The Unexpected @extended

Recently I ran into a nasty SCSS surprise. A single line of SCSS code that I inserted into my stylesheet bloated the output by almost 3x, taking it from 126kb to 379kb. Needless to say I was a bit...

Sass problem with 3.4.3

Hello everyone, I appear to be experiencing a problem with a relatively small piece of SASS which used to work up until version 3.4.3 (from my best understanding) and which appears in a few of my...

Popup windows without JavaScript

The other day I had this crazy idea. Popup/modal windows used in modern web design require JavaScript to be enabled in order to function. I wondered if you could get it working without JavaScript....

Popup windows without JavaScript, mark II

Some time ago, I wrote about how to make a popup window without JavaScript. Someone left this comment:

Keep in mind that this seriously **** up your history (and therefore your back button) – a...

Contextual heading sizes with Sass

Sass maps make it possible to create congruous, contextual CSS. As an example, let's look at heading sizes.

I try to keep the font-size differences in my headings uniform, i.e.:

  h1 { font-size:...

Magical Config Objects with Sass Maps

I’ve been spending a lot of time recently trying to harness the full power of Sass. I love the idea of CSS preprocessing, because it allows me to treat my frontend code like backend code, in a way....

Creating a Sass Theme Engine

Late last year, I was working on a project that required some elements of the page to be "theme-able" to match different live events being represented. Some background colors on...

Generating a Random Background Color in Sass

Here are some random colors:

  $blue: #3ea5ce; $green: #99c712; $yellow: lighten(#ffba00, 5%); $red: #E53B3A; 

Just so we're clear you can perform a function on a variable (took me forever to get...

Color Swatch Testing Tool

I do a lot of work that involves a high degree of pickiness when choosing colors. Slightly lighter or darker shades of colors is always something on my mind when contrasting color layouts and Sass...

Expandable Animated Loader

Welcome to my wonderful, magical, fantastic blog!

Well Ladies and Gentlemen, this is my first offical blog. We'll see how it goes. Today we're going to be building a simle loader animation...

Expressive BEM with Sass: a different approach

Disclaimer: This is just a thought about a different approach. I am by no means saying that this approach is better than anything else. :)

At first, I was intending to write some long-drawn blog...

Understanding CSS clip

Understanding CSS clip

CSS clip property is a little tricky to understand with its cordinate system. Personally, it was definitely not simple. So let's...

Expressive BEM with Sass Part II: A first draft of mixins

Hey there! Since writing about how you can write BEM a different way using Sass, the idea has gained some attention (thank you all so much, for all your feedback and motivating comments!).

Because...

Sass Color Maps

Naming things is tough. I find naming Sass color variables to be particularly problematic.

Consider the following:

  $red: #ff0000; 

Many might consider this to be a poorly named variable. What if...

Sycamore Tussock Moth Grid

Sycamore Tussock Moth Grid

Hey There!

You've likely come across this post wondering what the heck a sycamore tussock moth is. I'll tell you; it's a moth....

Practice of Responsive CSS for Hybrid Mobile App Webview

When dealing the hybrid mobile app with webview. It is necessary to define the devices size to dealing with the responsive in css.

At the very beginning, I use the mixins library by bourbon.io ....

CSS Background-Image Hover Effects

Getting the CSS Hover to Work was Fun!


KdjEQq

It works by using a combination of rgba and opacity, which gives us access to two different layers...

Rails Foundation 5 and Friendly Printing

rails opengraph' class="post-image

Switching Projects

I’ve decided to take a break for a few days on the Audio Pila! project due to some deadlines that have come blasting up. So in the mean time I’...

#2. Caniuse in the Terminal and SaSS vs Scss

Caniuse-cmd

Kat had checked out a new command line tool which pulls data from www.caniuse.com so you can easily find out browser compatibility in the command window. They have a pretty great tag...

Fixing TypeError: Cannot read property ‘1’ of null css minify

  Running "cssmin:minify" (cssmin) task [BS] File changed: ../css/app.prefixed.css >> TypeError: Cannot read property '1' of null Warning: CSS minification failed Use --force...

Randomization

Hello, World!

A while back, I was intrigued by a Trello background:

Trello background

I wanted to see if I could recreate something like that using CSS/Sass. Today, I finally made an attempt.

I...

Using imported CSS as Sass

In this article, the author hooks a post-install script to run after Bower installs or upgrades. One use case where this is handy is when you have a CSS file that you want to include in your own...

sass mixin

Sass reusable

Using SCSS to achieve vertical rhythm

Vertical rhythm is a typography concept to make a page easier to read. There are already a lot of posts explaining this: have a look here or here or here.

Implementing the correct sizes to...

Sassier z-index Management For Complex Layouts

In 2014, Jackie Balzer wrote an excellent piece for Smashing Magazine on using Sass to automatically manage the z-indexes of elements using lists.

I've been using this technique since an...

'Over & Above' SASS Z-Index simplification

Over & Above

Z-index Layer simplification

In most cases a design's z-index can be split into two:

Just over the layer below

And above everything else

Over & Above

Introducing ...

BEMantic: DRY Like You Mean It

Tim Baxter’s recent A List Apart article, Meaningful CSS: Style Like You Mean It, has once again re-ignited the debate that front-end developers who prefer to take an object oriented approach to...

Maintainable CSS based on SCSS

Introduction

I've been working with SCSS for quite some time now and can't code without it anymore. The main reason I'm using it is because of the ability to have seperate files, each...

Learning How To React

Came To A Conclusion

I ran into a little problem. I understood enough HTML to markup any page. I may not be a JavaScript master but simple interactions or behaviors aren’t a difficult task for me...

Truncate a String in CSS

  .whatever { max-width: [?]px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* optional */ } 

@extend versus @mixin

From Sass for Web Designers:

Where a mixin will write the same rules in each declaration it’s called from, @extend will create multiple, comma-separated selectors for shared styles. It’s good to...

Smarter Sass Media Queries

_mixins.scss:

  $retina-display: '(-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3)'; $breakpoints:...

Minecraft in SCSS

I love Minecraft. Almost as much as I love web development. The other day I saw a beautiful low-poly CodePen someone made in SASS, and naturally I looked at the code and saw that it was made in...

Getting started with Sass

Sass

Preface:

Sass is a great little helper for dealing with complex CSS and extending functionality, come along and learn SASS. A cool Css preprocessor that is supposed to give your Css...

My First Mixin

First things first, this mixin was written in the SCSS format. Sass format is a little different. You can check out the same mixin in Sass here.

So in a nutshell, mixins can be helpful when you...

What's so sassy about SCSS?

What’s so sassy about SCSS?

By Bill Searle — (Front-end Developer)

So you’ve been writing Cascading Style Sheets (CSS) and heard about SCSS? Well it was only a matter of time. If you’re...

Understanding @each in SASS

The helpful @each !

I've recently used this method at work because save me a lot of time and I know that some of you will find it banal but i wont to explain this awesome concept for the pepole...

Formatting Complex CSS

Format css with your spidey senses.

Deep down we all have our super tingly spidey senses for figuring things out in the best way possible. Now when I first saw idiomatic css by Nicolas Gallagher...

Simple physics using basic web techniques

I've always been a sucker for basic physics. You know, the stuff introduced in elementary school, teaching us how physical objects can react and interact with the world around it. Recreating...

Prepending <body> Classes to Nested Selectors with Sass Mixin

The Problem

It always feels a little hacky, but sometimes you need to control document-wide styles by adding a special class to the <body> element. A good example is a no-touch class, which...

Intro to Sass | SCSS101

basicsnestingvariablesmath@extendmixinsfunctions

Intro to Sass | SCSS101

Basics

"Sass" stands for Syntactically Awesome Style Sheets

The proper capitalizations are...

CSS Variables Are A Sometimes Food

I’m seeing developers switch from a pre-processor like Sass to PostCSS, because the modern specs now provide everything we need, such as CSS variables (or custom properties if you’re that way...

Level up your Sass with the ampersand

When was the last time you wrote vanilla CSS? As a front end developer, it's hard to imagine a world without CSS preprocessors and all of the functionality they provide. They give us features...

Sass Cheat Sheet

Ro Tite Duhg

storm troopers getting sassy

You've chosen Sass, huh? Well shoot, that's awesome! Sass puts CSS into hyperdrive with nesting, mixins, iteration functions, and much more. To get...

A sane way to set your web project colors

I am writing this article with the intention of sharing with others what i have learned working on various projects as a front-end developer. I'm sure most of you will read and nod the various...

Sass Maps, Loops, and CSS word scrambling!

Note: To understand this tutorial, it definitely helps to have some preliminary knowledge of Sass/SCSS and Sass loops. We also use the checkbox hack in this tutorial, so knowing that can help too!

...

Sass: Lists and Maps + Iteration

This is a reference for myself. When I first had to figure out how to use key/value maps in SCSS I recall it was a pain with more research than I enjoyed. Lists were easier, but I figured I'd...

Creating GitHub pages with React: Advanced

How to publish React project as GitHub pages ( with Sass + Redux + Routing )

1. Getting started with Create React App

Official : create-react-app

1-1. Quick Overview

  # Current path : ~/. npm i -g...

About node-sass-chokidar

About node-sass-chokidar

Official : node-sass-chokidar

1. Overview

A thin wrapper module around node-sass executable to use chokidar instead of Gaze when watching files.

2. Installation

  npm...

Use the Random() Function in SASS to Create Unique CSS Animations

Brief Intro

In August I created a Pen animation based on a Dribble illustration by artist Razvan Vezetue. I was able to bring his Floating Island Illustration to "life" not just through...

Sass Variable Scoping

A co-worker approached me with a curious question: "I've got a sass statement that I want to apply a variant to the parent, but still use it to house a class that I want to change based on...

Weird @extend side effects

I have this project that's using Bootstrap. Instead of importing the CSS and expanding the styles with my own, I'm importing the Sass styles and compiling to a single CSS file. It was upon...

Writing better CSS: my top 5 tools

Before I began my first job as a front-end developer, one of the things I really struggled with was knowing how I should be structuring my CSS.

Every site I was making at this point was quite...

SCSS - Basic Examples

Variables

  $primary-color: #111; body { background-color: $primary-color; } 

Nesting

  .fancy-wrapper { .fancy-box { width: 200px; height: 200px; display: inline-block; background: red;...

Tips for a Good Time When Extending CSS

Each of the points below have lived on a whiteboard in my house for months. I see them each day as I think about how CSS can be extended, and what the best way to design extensions to the web...

Experimental Flex-Gap Mixin

An experimental gird-gap solution, working for Flexbox

Sometimes I miss some things working with CSS (to be honest I work with SASS, haven't used Vanilla CSS for a long time)-anyways, Since CSS...

The Sassy CSS


In the far 2016 (even if it's not that far), I decided to approach Sass, a bit because I was curious about pre-processor and a bit because I was looking for more dynamicity on my CSS. From...