speed up wordpress theme development using sass


As a new sass WordPress theme designer, you would quickly learn the challenges of maintaining long CSS files while keeping them organized, scalable, and readable. You will also learn that many designers and front-end developers recommend using a CSS preprocessor language like Sass or LESS. But what are these things? and how do you get started with them? This article is an introduction to Sass for new WordPress Theme Designers. We will tell you what a CSS preprocessor is, why you need it, and how to install and start using them right away.

why wordpress with sass ?

  • speed up development
  • help organize your stuff
  • make less mistakes
  • save huge time for futre stuff

after For years CSS has been my favorite language to write while developing a website. after so The aspect of  design or the presentation layerof a website had always hit home with me.

The day I was introduced to Sass I was instantly turned off by it. I thought to myself—“Why earth would I make things more hard on myself when developing a website. I’ve got enough to deal with…

The CSS that we use , was really designed to be an easy to use stylesheet language. However web has evolved, and so is the need of designers to have a stylesheet language that allows them to do more with less effort and time. CSS preprocessor languages, like Sass, allow you to use features that are not currently available in the CSS such as using variables, basic math operators, nesting, mixins, etc.

how to use sass with wordpress theme?

now Most theme designers use local environment (mamp, xamp..etc) to help work on their themes before deploying it to a staging environment or a live server. Since Sass is a preprocessor language, you will need to install it on your local development environment.

.logo {
background: url("logo.png");
height: 100px;
width: 200px;
overflow: hidden;
text-indent: -9000px;
display: block; }

For the sake of this tutrial, you are going to need a blank theme. Simply create a new folder in /wp-content/themes/. name it ‘mytheme’ or anything else you want. Inside your blank theme folder create another folder and name it stylesheets. thanks!