# sass

Published articles for sass.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## CSS and TailwindCSS Approaches to Styling Websites in 2024

DevFeed: [CSS and TailwindCSS Approaches to Styling Websites in 2024](<https://devfeed.tech/articles/styling-in-2024-34908.md>)

Original publisher: [Read original article](<https://frontendfocus.substack.com/p/styling-in-2024>)

Author: Mads Brodt

Published: 2023-12-27T16:00:42Z

Content type: opinion

Language: en

Sources: [Front-End Focus](<https://devfeed.tech/sources/front-end-focus.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Less](<https://devfeed.tech/topics/less.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Design system](<https://devfeed.tech/topics/design-system.md>)

Tags: [2017](<https://devfeed.tech/tags/2017.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [flexbox](<https://devfeed.tech/tags/flexbox.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [less](<https://devfeed.tech/tags/less.md>), [sass](<https://devfeed.tech/tags/sass.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>)

### AI overview

This opinion article examines approaches to styling websites in 2024. It argues that vanilla CSS has become more capable through features such as custom properties, CSS Grid, and CSS nesting, while TailwindCSS remains popular for reducing style conflicts and discouraging arbitrary values. The article also emphasizes that TailwindCSS still requires knowledge of underlying CSS concepts such as Flexbox, Grid, and the box model.

### Source excerpt

Hi again!

## Building a Bootstrap App with Rails 7 and SCSS Files

DevFeed: [Building a Bootstrap App with Rails 7 and SCSS Files](<https://devfeed.tech/articles/building-a-bootstrap-app-with-rails-7-and-scss-files-28284.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/rails/2022/06/22/building-a-bootstrap-app-with-rails-7-and-scss-files.html>)

Author: Fuzzygroup

Published: 2022-06-22T06:12:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [CSS](<https://devfeed.tech/topics/css.md>)

Tags: [app](<https://devfeed.tech/tags/app.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [rails](<https://devfeed.tech/tags/rails.md>), [sass](<https://devfeed.tech/tags/sass.md>), [scss](<https://devfeed.tech/tags/scss.md>)

### AI overview

A walkthrough of setting up a Rails 7 application with Bootstrap and SCSS files, including generating the app, adding sassc-rails, copying stylesheets, and managing import order for asset compilation.

### Source excerpt

As is too often the case, I find that the initial aspect of getting a modern app (Bootstrap, Tailwind, React) initially setup to be the most frustrating aspect of Rails. Given that I like to spin up new apps pretty regularly, well, I spend a lot of time being frustrated with an old man's grumbling of: It didn't used to be this hard. No it wasn't this hard. And while I still don't really understand asset compilation, I did recently put together a new app where I pulled in SCSS files using variables from a different app and I can start to see it. This blog post walks through a Rails 7 app using .scss files. Step 1: Rails New Here's your Rails 7 new command to generate a new app with Bootstrap: rails new scss_test1 --css bootstrap Yep. That's it. Whoa!!! There are also options to use Tailwind. I found this technique in the Saeloun article linked below and I will be forever grateful; seriously - thank you. Step 2: Add the Sassc-Rails Gem I believe this Gem is needed as sassc support is officially deprecated. But I might be wrong about this; front end stuff changes with every Rails release so if I'm wrong, well, sigh. gem "sassc-rails" NOTE: Please see the last section "That Mysterious Error"; you may not want this in your Gemfile or: Step 3: Copy In Your SCSS Files If you are pulling in SCSS files then you need to copy them into your: app/assets/stylesheets directory. They can exist elsewhere but that directory is for stylesheets so differing on this point confuses me. Modify Your Include Directives This is the tricky bit and where you simply have to experiment. The thing to understand is that asset compilation is just that - compilation.If you're old school enough that you understand the analogy of your stylesheet files becoming akin to a make file with all the dark magic that entails, perhaps that helps. In your stylesheets directory there will be an initial stylesheet file, for me, it was application_bootstrap.scss and then I had copied in a number of other styleshee

## Tackling Hugo Integration of Asciidoctor

DevFeed: [Tackling Hugo Integration of Asciidoctor](<https://devfeed.tech/articles/tackling-hugo-integration-of-asciidoctor-26075.md>)

Original publisher: [Read original article](<https://blog.arkey.fr/2020/04/23/tackling-hugo-integration-of-asciidoctor/>)

Author: brice.dutheil@gmail.com (Brice Dutheil)

Published: 2020-04-23T21:59:50Z

Content type: tutorial

Language: en

Sources: [The Coffee Workshop](<https://devfeed.tech/sources/the-coffee-workshop.md>)

Topics: [Hugo](<https://devfeed.tech/topics/hugo.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [sass](<https://devfeed.tech/tags/sass.md>), [script](<https://devfeed.tech/tags/script.md>)

### AI overview

This tutorial describes integrating Asciidoctor with Hugo and addressing rendering, syntax highlighting, CSS conflicts, Sass or SCSS overrides, and Font Awesome compatibility issues.

### Source excerpt

Integrate Asciidoctor as everyone should expect While Hugo comes with Asciidoctor support, they are in reality several issues to account for at this time: While basic rendering of asciidoc files works, we soon encounter problems ; the very first

## Migrating Right-to-Left CSS Generation from Sass to RTLCSS

DevFeed: [Migrating Right-to-Left CSS Generation from Sass to RTLCSS](<https://devfeed.tech/articles/css-done-right-post-rtlcss-28070.md>)

Original publisher: [Read original article](<https://tech.trivago.com/post/css-done-right-post-rtlcss/>)

Author: Christoph Reinartz Follow

Published: 2017-07-07T00:00:00Z

Content type: article

Language: en

Sources: [Trivago](<https://devfeed.tech/sources/trivago.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [migration](<https://devfeed.tech/topics/migration.md>), [PostCSS](<https://devfeed.tech/topics/postcss.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Automation](<https://devfeed.tech/topics/automation.md>)

Tags: [automation](<https://devfeed.tech/tags/automation.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [css](<https://devfeed.tech/tags/css.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [migration](<https://devfeed.tech/tags/migration.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

The article explains trivago's migration of right-to-left CSS generation from Sass mixins and variables to RTLCSS post-processing. It describes the motivations, including reducing source complexity, avoiding manual authoring errors, and removing shared RTL configuration requirements, along with the move to a Node-based PostCSS build stack.

### Source excerpt

Our first [right-to-left platform](https://www.trivago.co.il/) was released in 2014. We had developed a solution to generate right-to-left CSS with Sass mixins and variables as we have [described](https://tech.trivago.com/2015/04/27/right-to-left/) in a blog article. We used this approach for nearly 3 years but recently migrated the right-to-left CSS generation from pre-processing to post-processing with [RTLCSS](http://rtlcss.com/). With this article I would like to share the reasons for the migration as well as our experiences and lessons learned.

## React and Redux, Webpack 2 boilerplate

DevFeed: [React and Redux, Webpack 2 boilerplate](<https://devfeed.tech/articles/react-and-redux-webpack-2-boilerplate-37371.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/webpack-2-react-redux/>)

Author: Stanko

Published: 2016-11-24T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Boilerplate](<https://devfeed.tech/topics/boilerplate.md>), [React](<https://devfeed.tech/topics/react.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [Redux](<https://devfeed.tech/topics/redux.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [React Router](<https://devfeed.tech/topics/react-router.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [file](<https://devfeed.tech/topics/file.md>), [npm](<https://devfeed.tech/topics/npm.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [boilerplate](<https://devfeed.tech/tags/boilerplate.md>), [dev-tools](<https://devfeed.tech/tags/dev-tools.md>), [development](<https://devfeed.tech/tags/development.md>), [npm](<https://devfeed.tech/tags/npm.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [redux](<https://devfeed.tech/tags/redux.md>), [sass](<https://devfeed.tech/tags/sass.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

The article introduces a minimal React application boilerplate built with Redux and Webpack 2. It explains that the author extracted the boilerplate from a pet project after finding Webpack 1.x difficult to configure, and lists implemented, planned, and possible future features.

### Source excerpt

Currently, I'm working on a relatively small pet project. While setting it up, I decided to extract a webpack boilerplate from it. As whole JS community is moving really fast, I found very hard to set everything up using Webpack 1.x. One package would ask to update the other, that would break the third one, then that one... and so on. Luckily, I was able to set everything up using Webpack 2. It is still in beta, but I had no problems so far. You can find the boilerplate on GitHub. Implemented Features # React React router Redux Redux Thunk Immutable reducer data Webpack 2 (development and production config) Hot Module Replacement Babel - static props, decorators SASS with autoprefixing Webpack dashboard Linting Included es6-promise and isomorphic-fetch File imports relative to the app root Planned features # Redux Dev Tools Generating icon font from SVGs Preview production build Git hooks - lint before commit (or push) Future features # Universal may be added at some point. Universal rendering Server async data About # This boilerplate is a complete, but minimal React application. It includes reducers (redux), actions (sync and async), routing, SASS... My goal was to be ready immediately after cloning the repo (and running npm i). My plan is to reuse this as much as possible. It will updated so make sure you follow the documentation on GitHub.

## Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion

DevFeed: [Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion](<https://devfeed.tech/articles/implementing-photoshop-font-sizes-and-tracking-in-css-points-to-pixels-conversion-37272.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/font-size-and-tracking-points-to-pixels/>)

Author: Stanko

Published: 2016-09-08T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [conversion](<https://devfeed.tech/tags/conversion.md>), [css](<https://devfeed.tech/tags/css.md>), [function](<https://devfeed.tech/tags/function.md>), [mixins](<https://devfeed.tech/tags/mixins.md>), [photoshop](<https://devfeed.tech/tags/photoshop.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [points](<https://devfeed.tech/tags/points.md>), [sass](<https://devfeed.tech/tags/sass.md>), [scss](<https://devfeed.tech/tags/scss.md>), [tracking](<https://devfeed.tech/tags/tracking.md>)

### AI overview

A tutorial on converting Photoshop font sizes from points to CSS pixels and translating Photoshop tracking into CSS letter spacing using Sass functions and mixins. It explains when to use each construct and provides example Sass and generated CSS.

### Source excerpt

We've all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units. You can recalculate everything by hand and try to keep track of it. But we can use the goodies of SCSS to make that process a bit easier. Point to pixel ratio is 1pt = 1.333333px. We'll create SASS function to do conversion for us. And PhotoShop tracking works relative to the font size. One point of tracking is 1/1000 of the font size. For this one we'll create a mixin. // Converts pt to px @function pt-to-px($size-in-points){ @return #{ round($size-in-points * 1.333333) }px; } // Adds letter spacing to match photoshop tracking @mixin tracking($ps-tracking){ letter-spacing: #{ $ps-tracking / 1000 }em; } // Usage .Component { @include tracking(-5); font-size: pt-to-px(20); line-height: pt-to-px(30); } This will generate following CSS: .Component { letter-spacing: -.005em; font-size: 15px; line-height: 23px; } Note that function and mixin can do pretty much the same job. But it makes more sense to use mixins when including complete styles, and functions to return values. So conversion makes sense to be a function, as we can use it for font size, line height or anything else. Conversion of tracking to letter spacing is including a specific style, so keep it in a mixin.

## SASS random() and circle animation

DevFeed: [SASS random() and circle animation](<https://devfeed.tech/articles/sass-random-and-circle-animation-37345.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/sass-random-and-circle-animation/>)

Author: Stanko

Published: 2016-08-30T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [function](<https://devfeed.tech/topics/function.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [css](<https://devfeed.tech/tags/css.md>), [js](<https://devfeed.tech/tags/js.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A CSS-only circle animation uses JavaScript to create 50 elements and demonstrates Sass's random() function. The article explains its range behavior, examples using positive and negative offsets, and how generated values remain static in CSS until the next Sass compilation.

### Source excerpt

I decided to move my CSS playground to the CodePen, and this is the first one I made. Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it's redesign. This is CSS only animation (I used JS to create 50 elements though). And you can see the usage of SASS random() function. random() will return random integer between 1 and n, where n is the number you pass to it. Default param is 100. Note that random does not return 0. To get different random ranges just add or subtract your base. This will return number between 11 and 20. $random-number: random(10) + 10; Same thing with negative numbers, this one covers the range between -10 and 10. $random-number: random(21) - 11; Something to have in mind, new random numbers will be generated on every SASS compilation. But once generated, CSS will stay static, until the next compilation.

## Setting up Webpack, Babel and React from scratch - Part 2

DevFeed: [Setting up Webpack, Babel and React from scratch - Part 2](<https://devfeed.tech/articles/setting-up-webpack-babel-and-react-from-scratch-part-2-37349.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/setting-up-webpack-babel-and-react-from-scratch-part-2/>)

Author: Stanko

Published: 2016-08-29T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [React](<https://devfeed.tech/topics/react.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [css](<https://devfeed.tech/tags/css.md>), [es6](<https://devfeed.tech/tags/es6.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [sass](<https://devfeed.tech/tags/sass.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

Part two of a tutorial on setting up Webpack, Babel, and React covers adding SASS support, source maps, Autoprefixer, hot reloading, and additional ES6 features such as static class properties and decorators.

### Source excerpt

Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install it together with node-sass compiler, css and style loaders npm install --save-dev style-loader css-loader sass-loader node-sass Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files. Now we need to add a loader to webpack config file. ... { test: /\.scss$/, loader: 'style!css!sass' } ... This will handle importing SCSS files in our JavaScript code. So we need to import app.scss manually in the JavaScript code. You'll need to add only one line to your app.js. import '../scss/app.scss'; This includes your styles by calling loaders we defined in the webpack config. Restart your webpack, and voala, now we have styles and hot reloading for them. Try changing your styles to check it. Source maps # To enable source maps, we'll pass the sourceMap option to the sass and the css loaders. Enable devtool, and update the loader ... devtool: 'inline-source-map', // or 'source-map' module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap', } ] } ... If you want to read more, here's link to the official documentation Autoprefixer # Always use autoprefixer - I can't stress this enough. We'll need postcss loader, precss and autoprefixer npm install --save-dev postcss-loader precss autoprefixer At the top of our webpack config, require precss and autoprefixer const precss = require('precss'); const autoprefixer = require('autoprefixer'); Update our sass loader config and and postcss config ... module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap', } ] }, postcss() { return [autoprefixer, precss]; }, ... Restart webpa

## Lessons Learned at IBM Design

DevFeed: [Lessons Learned at IBM Design](<https://devfeed.tech/articles/lessons-learned-at-ibm-design-28801.md>)

Original publisher: [Read original article](<https://una.im/ibm-lessons/>)

Published: 2016-04-12T00:00:00Z

Content type: article

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [ibm](<https://devfeed.tech/topics/ibm.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [front-end-development](<https://devfeed.tech/topics/front-end-development.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Git](<https://devfeed.tech/topics/git.md>)

Tags: [engineering](<https://devfeed.tech/tags/engineering.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [front-end-development](<https://devfeed.tech/tags/front-end-development.md>), [git](<https://devfeed.tech/tags/git.md>), [ibm](<https://devfeed.tech/tags/ibm.md>), [sass](<https://devfeed.tech/tags/sass.md>), [testing](<https://devfeed.tech/tags/testing.md>)

### AI overview

A retrospective on lessons learned during nearly two years at IBM Design, focusing on enthusiasm for collaboration, interdisciplinary rapport, and an iterative design process of building, testing, and refining solutions.

### Source excerpt

I've learned so much during my time at IBM Design! This is a little wrap up post and an announcement about my next adventure.

## Jekyll and Gulp workflow

DevFeed: [Jekyll and Gulp workflow](<https://devfeed.tech/articles/jekyll-and-gulp-workflow-37301.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/jekyll-gulp-workflow/>)

Author: Stanko

Published: 2016-02-27T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Gulp](<https://devfeed.tech/topics/gulp.md>), [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Development](<https://devfeed.tech/topics/development.md>), [es6](<https://devfeed.tech/topics/es6.md>)

Tags: [development](<https://devfeed.tech/tags/development.md>), [es6](<https://devfeed.tech/tags/es6.md>), [gulp](<https://devfeed.tech/tags/gulp.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [sass](<https://devfeed.tech/tags/sass.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

This tutorial describes a Jekyll development workflow that uses Gulp to compile and watch SASS and JavaScript, run a local Jekyll server, proxy it through BrowserSync, and reload the browser on changes. The author notes that the setup may be outdated because they no longer use Jekyll.

### Source excerpt

Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer, ES6... I tried to find a boilerplate, but everything I found didn't match my needs. Usually people would run gulp tasks for SASS and JavaScript files, and on change run jekyll build, which is insanely slow. They would use BrowserSync to serve _site folder. So I did what programmers do - written my own. I quickly made usual gulp tasks: styles - to compile SASS and autoprefix it scripts - to transpile ES6 goodness, and concatenate JavaScript files serve - to start local server, watch for changes and auto reload First thing I did is that I was running jekyll serve in one terminal, and gulp serve with BrowserSync in the other. This was working decently, but I wanted to run only one command, and let the tasks do everything for me. That is where node child process comes in. import childProcess from 'child_process'; const spawn = childProcess.spawn; gulp.task('jekyll', function (){ const jekyll = spawn('jekyll', ['serve'], { stdio: 'inherit' }); }); This task spawns a child process from gulp. Nice thing is that we can start it, and gulp will kill it on exit. Now we have up and running Jekyll server, and proxy it to BrowserSync. But darn, injecting CSS files didn't really work. Server was expeting CSS file to come from /css/style.css, but browserSync.stream in gulp pipe would inject it from the _sass folder. I solved this by copying css file to the .tmp/css and adding .tmp to the serveStatic option of the BrowserSync. One thing I should mention, that I keep my SASS files in the _sass folder, and JavaScript in the _js one. Gulp watches changes on SASS/JS, and

## If You Know Sass, You Know ES2015

DevFeed: [If You Know Sass, You Know ES2015](<https://devfeed.tech/articles/if-you-know-sass-you-know-es2015-28834.md>)

Original publisher: [Read original article](<https://una.im/sass-es2015/>)

Published: 2016-02-23T00:00:00Z

Content type: comparison

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Babel](<https://devfeed.tech/topics/babel.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [programming-language](<https://devfeed.tech/tags/programming-language.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

This article compares Sass and ES2015, explaining how familiarity with Sass concepts can help developers understand modern JavaScript. It discusses language design similarities, string interpolation, and using Babel to transpile ES2015 for browser compatibility.

### Source excerpt

If you know some Sass, you're probably a lot further than you think to understanding and diving into the world of modern JavaScript. This post showcases some of the similarities.

## Hello World

DevFeed: [Hello World](<https://devfeed.tech/articles/hello-world-37279.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/hello-world/>)

Author: Stanko

Published: 2016-02-21T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Script](<https://devfeed.tech/topics/script.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [plugin](<https://devfeed.tech/tags/plugin.md>), [sass](<https://devfeed.tech/tags/sass.md>), [script](<https://devfeed.tech/tags/script.md>)

### AI overview

The blog introduces a planned series of weekly small JavaScript or CSS (SASS) plugins and scripts, ranging from proof-of-concept experiments to production-ready work.

### Source excerpt

Everything starts with a Hello World so does this blog. In the first couple of weeks, everything will be under heavy development, until I get it the way I want. As I really enjoy making stuff, I decided to try to make small JavaScript or CSS (SASS) plugin/script every week. Those are going to be both big and small, proof of concepts and production ready stuff.

## 2015 Year In Review & 2016 Resolutions

DevFeed: [2015 Year In Review & 2016 Resolutions](<https://devfeed.tech/articles/2015-year-in-review-2016-resolutions-28726.md>)

Original publisher: [Read original article](<https://una.im/2015-review/>)

Published: 2015-12-28T00:00:00Z

Content type: opinion

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Gulp](<https://devfeed.tech/topics/gulp.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [dev-tools](<https://devfeed.tech/topics/dev-tools.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [developer](<https://devfeed.tech/tags/developer.md>), [development](<https://devfeed.tech/tags/development.md>), [github](<https://devfeed.tech/tags/github.md>), [guide](<https://devfeed.tech/tags/guide.md>), [retrospective](<https://devfeed.tech/tags/retrospective.md>), [sass](<https://devfeed.tech/tags/sass.md>), [year-in-review](<https://devfeed.tech/tags/year-in-review.md>)

### AI overview

A personal retrospective of 2015 projects, talks, writing, podcasts, and work at IBM, followed by resolutions for 2016. The article highlights web and front-end experiments, Sass and Gulp tools, CSS libraries, pattern libraries, prototypes, and community activities.

### Source excerpt

It's time for my annual reflection and goal resetting! It's been a crazy year for sure.

## Why I'm Excited About Native CSS Variables

DevFeed: [Why I'm Excited About Native CSS Variables](<https://devfeed.tech/articles/why-i-m-excited-about-native-css-variables-29535.md>)

Original publisher: [Read original article](<https://philipwalton.com/articles/why-im-excited-about-native-css-variables/>)

Published: 2015-12-06T20:43:53Z

Content type: opinion

Language: en

Sources: [Philip Walton](<https://devfeed.tech/sources/philip-walton.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Chrome Canary](<https://devfeed.tech/topics/chrome-canary.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [chrome-canary](<https://devfeed.tech/tags/chrome-canary.md>), [css](<https://devfeed.tech/tags/css.md>), [experimental](<https://devfeed.tech/tags/experimental.md>), [feature](<https://devfeed.tech/tags/feature.md>), [platform](<https://devfeed.tech/tags/platform.md>), [sass](<https://devfeed.tech/tags/sass.md>), [web](<https://devfeed.tech/tags/web.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

### AI overview

The article argues that native CSS Custom Properties are fundamentally different from Sass variables. It explains that Custom Properties are dynamic CSS properties scoped to the DOM, enabling capabilities and design patterns that preprocessors cannot provide, while suggesting that developers may use both approaches together.

### Source excerpt

A few weeks ago CSS variables--more accurately known as CSS Custom Properties--shipped in Chrome Canary behind the Experimental Web Platform Features flag.[1] When Chrome engineer Addy Osmani first tweeted about the release, he was met with a surprising amount of negativity, hostility, and skepticism. At least, it was surprising to me, given how excited I am about this feature.

## Classy CSS: a Programmatic Approach to Sass Stylesheets

DevFeed: [Classy CSS: a Programmatic Approach to Sass Stylesheets](<https://devfeed.tech/articles/classy-css-a-programmatic-approach-to-sass-stylesheets-28779.md>)

Original publisher: [Read original article](<https://una.im/classy-css/>)

Published: 2015-11-15T00:00:00Z

Content type: opinion

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Front end](<https://devfeed.tech/topics/frontend.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [modular](<https://devfeed.tech/tags/modular.md>), [properties](<https://devfeed.tech/tags/properties.md>), [sass](<https://devfeed.tech/tags/sass.md>), [variables](<https://devfeed.tech/tags/variables.md>)

### AI overview

An opinionated article introduces Classy CSS, a programmatic, modular, scalable, and class-based architecture for Sass stylesheets. It explains the approach through a button example and discusses its relationship to BEM-like naming and Sass features.

### Source excerpt

An opinionated Sass architecture system for writing modular and scalable libraries. Also, a case in defense of extends.

## Sass Pixel Art

DevFeed: [Sass Pixel Art](<https://devfeed.tech/articles/sass-pixel-art-28836.md>)

Original publisher: [Read original article](<https://una.im/sass-pixel-art/>)

Published: 2015-05-03T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [HTML5 and CSS3 tricks](<https://devfeed.tech/topics/html5-and-css3-tricks.md>), [pixel](<https://devfeed.tech/topics/pixel.md>), [Programming](<https://devfeed.tech/topics/programming.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [css3](<https://devfeed.tech/tags/css3.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [pixel-art](<https://devfeed.tech/tags/pixel-art.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

This tutorial explains how Sass lists, matrices, maps, and list functions can generate pixel art using CSS3 multiple box shadows. It examines how individually positioned box shadows form pixels and how Sass data structures organize them.

### Source excerpt

Pixel art is so much fun! This blog post walks through how to read a matrix-like list with Sass and generate Mario pixel art from box shadows.

## My favorite old webdev tools

DevFeed: [My favorite old webdev tools](<https://devfeed.tech/articles/my-favorite-old-webdev-tools-32171.md>)

Original publisher: [Read original article](<https://adambard.com/blog/webdev-tools-rundown-2015/>)

Published: 2015-04-09T00:00:00Z

Content type: opinion

Language: en

Sources: [Adam Bard](<https://devfeed.tech/sources/adam-bard.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [Flask](<https://devfeed.tech/topics/flask.md>), [Django](<https://devfeed.tech/topics/django.md>), [static-site-generator](<https://devfeed.tech/topics/static-site-generator.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [CSS Framework](<https://devfeed.tech/topics/css-framework.md>), [Clojure](<https://devfeed.tech/topics/clojure.md>)

Tags: [clojure](<https://devfeed.tech/tags/clojure.md>), [css](<https://devfeed.tech/tags/css.md>), [django](<https://devfeed.tech/tags/django.md>), [flask](<https://devfeed.tech/tags/flask.md>), [frameworks](<https://devfeed.tech/tags/frameworks.md>), [sass](<https://devfeed.tech/tags/sass.md>), [static-site-generator](<https://devfeed.tech/tags/static-site-generator.md>), [tools](<https://devfeed.tech/tags/tools.md>), [webdev](<https://devfeed.tech/tags/webdev.md>)

### AI overview

An opinionated roundup of older web development tools the author has used for years. It discusses Middleman for generating static sites, Skeleton for lightweight CSS prototyping, Flask for small sites, and Django for applications that benefit from an all-in-one framework; it also mentions Clojure for high-performance API servers.

### Source excerpt

The way we make websites has changed a lot since I started doing it, and it's important to keep up-to-date on new tools and techniques. That said, I've been noticing that I've not spent as much time churning through new frameworks and whatnot as I used to - in fact, I've picked out a few tools that I've been using for years.

## 5 Great Uses for Sass Maps

DevFeed: [5 Great Uses for Sass Maps](<https://devfeed.tech/articles/5-great-uses-for-sass-maps-28768.md>)

Original publisher: [Read original article](<https://una.im/5-great-uses-sass-maps/>)

Published: 2015-03-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A SitePoint blog post covering five uses for Sass maps, along with thoughts on code.

### Source excerpt

Another blog post written for SitePoint about 5 great uses for Sass maps and other thoughts on code at the moment.

## Sass Director and Manifest Files

DevFeed: [Sass Director and Manifest Files](<https://devfeed.tech/articles/sass-director-and-manifest-files-28835.md>)

Original publisher: [Read original article](<https://una.im/sass-manifests/>)

Published: 2015-01-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [build](<https://devfeed.tech/tags/build.md>), [files](<https://devfeed.tech/tags/files.md>), [manifest](<https://devfeed.tech/tags/manifest.md>), [project](<https://devfeed.tech/tags/project.md>), [sass](<https://devfeed.tech/tags/sass.md>), [shell-script](<https://devfeed.tech/tags/shell-script.md>), [terminal](<https://devfeed.tech/tags/terminal.md>)

### AI overview

This tutorial explains Sass manifest files, which bring partial Sass files together in a main file that compiles into a cumulative CSS output. It also introduces Sass Director, a tool that generates the directories and partial files for a Sass project from one manifest file.

### Source excerpt

I created a tool that lets you architect your Sass project in a single location (your manifest file), and it will build all of the directories and partials for you! This blog explains what a Sass manifest file is, what it does, and why you should use one.

## Jekyll with Sass

DevFeed: [Jekyll with Sass](<https://devfeed.tech/articles/jekyll-with-sass-37790.md>)

Original publisher: [Read original article](<https://carlosbecker.com/posts/jekyll-with-sass/>)

Author: Carlos Alexandro Becker

Published: 2015-01-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Carlos Becker](<https://devfeed.tech/sources/carlos-becker.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [GitHub Pages](<https://devfeed.tech/topics/github-pages.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [github-pages](<https://devfeed.tech/tags/github-pages.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A blog post describes applying Sass to a Jekyll site to reduce four CSS requests totaling about 22K to one request of 12.8K. The author also reports that the approach works on GitHub Pages.

### Source excerpt

I followed @mdo's recent article "Using Sass with Jekyll", and wanted to point out the results.

## 2015 Resolutions

DevFeed: [2015 Resolutions](<https://devfeed.tech/articles/2015-resolutions-28725.md>)

Original publisher: [Read original article](<https://una.im/2015-resolutions/>)

Published: 2014-12-31T00:00:00Z

Content type: article

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Gulp](<https://devfeed.tech/topics/gulp.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Express](<https://devfeed.tech/topics/express.md>), [Meteor](<https://devfeed.tech/topics/meteor.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Vim](<https://devfeed.tech/topics/vim.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>)

Tags: [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [angular](<https://devfeed.tech/tags/angular.md>), [blog](<https://devfeed.tech/tags/blog.md>), [command-line](<https://devfeed.tech/tags/command-line.md>), [express](<https://devfeed.tech/tags/express.md>), [github](<https://devfeed.tech/tags/github.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [make](<https://devfeed.tech/tags/make.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [personal](<https://devfeed.tech/tags/personal.md>), [post](<https://devfeed.tech/tags/post.md>), [published](<https://devfeed.tech/tags/published.md>), [review](<https://devfeed.tech/tags/review.md>), [sass](<https://devfeed.tech/tags/sass.md>), [testing](<https://devfeed.tech/tags/testing.md>), [vim](<https://devfeed.tech/tags/vim.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### AI overview

A personal review of 2014 and a set of goals for 2015. The author describes projects, travel, speaking, open-source contributions, and progress in JavaScript, Sass, Gulp, Meteor.js, Express.js, Angular, Node.js, testing, Vim, WebGL, and 3D graphics.

### Source excerpt

This is a personal post about my 2014 in review (because a lot happened) and my goals for 2015. Happy New Year!

## ATX Sass

DevFeed: [ATX Sass](<https://devfeed.tech/articles/atx-sass-28773.md>)

Original publisher: [Read original article](<https://una.im/atx-sass/>)

Published: 2014-11-13T00:00:00Z

Content type: release

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [Website](<https://devfeed.tech/topics/website.md>)

Tags: [meetup](<https://devfeed.tech/tags/meetup.md>), [sass](<https://devfeed.tech/tags/sass.md>), [website](<https://devfeed.tech/tags/website.md>)

### AI overview

The Austin's Sass Meetup has launched a new website.

### Source excerpt

Our new website for Austin's Sass Meetup is live!

## Sass Bites #33: Una Kravets

DevFeed: [Sass Bites #33: Una Kravets](<https://devfeed.tech/articles/sass-bites-33-una-kravets-28818.md>)

Original publisher: [Read original article](<https://una.im/on-sass-bites/>)

Published: 2014-04-10T00:00:00Z

Content type: opinion

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>)

Tags: [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

Una Kravets says she appeared on Sass Bites this week.

### Source excerpt

I was on Sass Bites this week!

## Set up Flask with webassets

DevFeed: [Set up Flask with webassets](<https://devfeed.tech/articles/set-up-flask-with-webassets-32125.md>)

Original publisher: [Read original article](<https://adambard.com/blog/fresh-flask-setup/>)

Published: 2014-02-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [Adam Bard](<https://devfeed.tech/sources/adam-bard.md>)

Topics: [Flask](<https://devfeed.tech/topics/flask.md>), [Python](<https://devfeed.tech/topics/python.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [npm](<https://devfeed.tech/topics/npm.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [flask](<https://devfeed.tech/tags/flask.md>), [npm](<https://devfeed.tech/tags/npm.md>), [python](<https://devfeed.tech/tags/python.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A step-by-step tutorial for setting up a new Flask application with Python, Sass, CoffeeScript, Flask-Assets, webassets, Bower, and jQuery. It covers installation, project structure, asset bundles, preprocessing, and serving compiled static assets.

### Source excerpt

Flask isn't new, but it's really great, and it's definitely my first choice when starting a new Python app. Today I want to give you a quick tour of the tools I use to set up a new Flask app.

[Next page](<https://devfeed.tech/tags/sass.md?cursor=WyIyMDE0LTAyLTIwVDAwOjAwOjAwKzAwOjAwIiwgIjMwMjM2MjRhLWExMGMtNDk0Mi04NjM5LWVlY2EzMzFiOTUwNSJd>)