What is Sass?
Who uses Sass?
Here are some stack decisions, common use cases and reviews by members of with Sass in their tech stack.
CSS 3 is automatically built from easy to maintain Sass by splitting them into separate files and the final built and compiled CSS 3 will only be in 1 file for performance.
To make my CSS more efficient, better, and most importantly more fun! Sass
I use sass only to @import my components to have a better readability than all stuff put in one page of css Sass
Here are some stack decisions, common use cases and reviews by companies and developers who chose Sass in their tech stack.
For markup and style, I used Pug and Sass, since they’re the perfect match to me. I love the clean and strict syntax of both of them and even more that their structure is almost similar. Also, both of them come with an expanded functionality such as mixins, loops and so on related to their “siblings” (HTML and CSS). Both of them require nesting and prevent untidy code, which can be a huge advantage when working in teams. I used JSON to store data (since the data quantity on my website is moderate) – JSON works also good in combo with Pug, using for loops, based on the JSON Objects for example.
To send my contact form I used PHP, since sending emails using PHP is still relatively convenient, simple and easy done.
DevOps: Of course, I used Git to do my version management (which I even do in smaller projects like my website just have an additional backup of my code). On top of that I used GitHub since it now supports private repository for free accounts (which I am using for my own). I use Babel to use ES6 functionality such as arrow functions and so on, and still don’t losing cross browser compatibility.
Side note: I used npm for package management. 🎉
Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:
- Vue Styleguidist as our style guide and pool of developed Vue.js components
- Vuetify as Material Component Framework (for fast app development)
- TypeScript as programming language
- Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
- ESLint, TSLint and Prettier for coding style and code analyzes
- Jest as testing framework
- Google Fonts and Font Awesome for typography and icon toolkit
- NativeScript-Vue for mobile development
The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:
- Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
- Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
- Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
- Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
- Large scaling. Vue.js can help to develop pretty large reusable templates.
- Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
At labinator.com, we use HTML5, CSS 3, Sass, Vanilla.JS and PHP when building our premium WordPress themes and plugins. When writing our codes, we use Sublime Text and Visual Studio Code depending on the project. We run Manjaro and Debian operating systems in our office. Manjaro is a great desktop operating system for all range of tasks while Debian is a solid choice for servers.
WordPress became a very popular choice when it comes to content management systems and building websites. It is easy to learn and has a great community behind it. The high number of plugins as well that are available for WordPress allows any user to customize it depending on his/her needs.
For development, HTML5 with Sass is our go-to choice when building our themes.
Main Advantages Of Sass:
- It's CSS syntax friendly
- It offers variables
- It uses a nested syntax
- It includes mixins
- Great community and online support.
- Great documentation that is easy to read and follow.
As for PHP, we always thrive to use PHP 7.3+. After the introduction of PHP 7, the WordPress development process became more stable and reliable than before. If you a developer considering PHP 7.3+ for your project, it would be good to note the following benefits.
The Benefits Of Using PHP:
- Open Source.
- Highly Extendible.
- Easy to learn and read.
- Platform independent.
- Compatible with APACHE.
- Low development and maintenance cost.
- Great community and support.
- Detailed documentation that has everything you need!
Why PHP 7.3+?
- Flexible Heredoc & Nowdoc Syntaxes - Two key methods for defining strings within PHP. They also became easier to read and more reliable.
- A good boost in performance speed which is extremely important when it comes to WordPress development.
I use Laravel because it's the most advances PHP framework out there, easy to maintain, easy to upgrade and most of all : easy to get a handle on, and to follow every new technology ! PhpStorm is our main software to code, as of simplicity and full range of tools for a modern application.
Google Analytics Analytics of course for a tailored analytics, Bulma as an innovative CSS framework, coupled with our Sass (Scss) pre-processor.
To deploy, we set up Buddy to easily send the updates on our nginx / Ubuntu server, where it will connect to our GitHub Git private repository, pull and do all the operations needed with Deployer .
CloudFlare ensure the rapidity of distribution of our content, and Let's Encrypt the https certificate that is more than necessary when we'll want to sell some products with our Stripe api calls.
Asana is here to let us list all the functionalities, possibilities and ideas we want to implement.
When we rebooted our front-end stack earlier this year, we wanted to have a consolidated and friendly developer experience. Up to that point we were using Sass and BEM. There was a mix of HAML views, React components and Angular. Since our ongoing development was going to be exclusively in React, we wanted to shift to an inline styling library so the "wall of classnames" could be eliminated. The ever-shifting landscape of inline CSS libraries for React is sometimes difficult to navigate.
We decided to go with Glamorous for a few reasons:
As you may or may not know, Glamorous has ceased active development and been mostly superseded by Emotion. We are planning to migrate to either Emotion or @styled-components in the near future, and I'll write another Stack Decision when we get there!
This is my stack in Application & Data
My Utilities Tools
Google Analytics Postman Elasticsearch
My Devops Tools
Git GitHub GitLab npm Visual Studio Code Kibana Sentry BrowserStack
My Business Tools