That is the eighth in our DecEmber sequence–”Countdown to The New Yr: 31 Days of Ember Addons”. We plan to focus on a brand new addon every day till the brand new yr, and we hope you may be a part of us for the enjoyable!
Day 8
ember-cli-sass is an addon that I at all times set up once I work on facet initiatives. It is that tremendous / crucial / <add your hype phrase of alternative right here>!
In all seriousness, let me inform you why I like Sass and why I encourage you to check out ember-cli-sass right this moment.
What It Does
ember-cli-sass makes use of Sass to preprocess stylesheets in your Ember app (or addon). That is only a fancy means of claiming you’ll have a better time expressing the way you wish to type your app.
The addon additionally helps widespread, superior use circumstances for Ember initiatives:
- Supply maps by default in improvement
- Assist for
outputPathsconfiguration - Skill to specify
includePaths - Skill to edit Sass in Chrome Dev Instruments
Why I Like It
There are two areas to look at right here: (1) why I like Sass, and (2) why I like ember-cli-sass.
Why I Love Sass
Sass (Syntactically Superior Type Sheets), which builds on high of CSS, supplies options that assist enhance my productiveness as designer and developer.
My most favourite characteristic is nesting, which lets me follow BEM (Block, Ingredient, Modifier). BEM helps me think twice about how I write elements and architect my app. It helps me envision how totally different elements will work together with one another and the way I’d keep away from leaking type.
PS. Variables are superior too!
Why I Love Ember CLI Sass
ember-cli-sass is a superb instance of zero-config. In a brand new Ember app, all it’s worthwhile to do is run ember set up ember-cli-sass, then change the file identify app/types/app.css to app/types/app.scss. You additionally get dwell reload with no further work!
As a result of there will likely be builders who’re studying Sass for his or her first time, I consider zero-config is a must have. Once I was in a coding bootcamp, I needed to check out Sass or Much less for a bunch mission. We ended up with plain CSS as a result of we had restricted time and had extra vital issues to do than determining learn how to set up and configure both. With out entry to nesting or variables (i.e. a conference), we did not have a simple time dividing work and collaborating with each other.
Conclusion
I believe Sass is a superb device that will help you take into consideration the way you wish to architect your app. ember-cli-sass helps you check out Sass right this moment!
I additionally encourage you to check out different instruments for styling and uncover what’s finest to your mission. This might imply a special framework similar to Tailwind, localizing types utilizing ember-css-modules or ember-component-css, and discovering a linter for stylesheets. I believe we’ve got made an excellent progress in bridging design and improvement, and am trying ahead to what the longer term holds subsequent.
Do you utilize ember-cli-sass? Or one prefer it? We would love to listen to about Ember addons that deliver you pleasure!
