My experience with CSS preprocessors

/**
* GLOBAL
* TEXT SELECT
* CLEARFIX
* FONT FACES
* ELEMENTS
* USEFUL CLASSES
* HEADER
* NAVIGATION
* BREADCRUMB
* FOOTER
* HOME
* PAGES
* CONNEXION
* MEDIA QUERIES
* COOKIES
*/
/**
* GLOBAL
* — — — — — — — — — — — — — — — — — — — — — — — — — — -
*/

Enter Ionic

I had used LESS before, on a multisite Drupal project where “only the colours changed” according to the site. That was pretty much where I thought the interest lay in using preprocessors

A few useful snippets

I’ll share with you a few useful snippets I have found (mainly through reading the documentation or from kind people on stackoverflow).

How to organise your files

$font-path: “../fonts”;

// KEY FILES
@import “variables”;
@import “normalize”;
@import “lato”;
// GENERAL STYLES
* {
box-sizing: border-box;
}
html {
font-size: 16px;
height: 100%;
overflow-x: hidden;
}
body {
background: $light-grey;
color: $text;
font-family: ‘Lato’, sans-serif;
font-size: 100%;
line-height: 1.3;
overflow-x: hidden;
position: relative;
width: 100%;
/**/
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
// COMPONENTS
@import “elements”;
@import “components/panel”;
@import “components/box”;
@import “components/chart”;
@import “components/paginator”;
@import “components/datatables”;
@import “layout”;
@import “sidebar”;
@import “login”;
@import “dashboard”;
@import “users”;

Divide & Conquer

// COMPONENTS
@import “elements”;
@import “components/panel”;
@import “components/box”;
@import “components/chart”;
@import “components/paginator”;
@import “components/datatables”;
@import “layout”;
@import “sidebar”;
@import “login”;
@import “dashboard”;
@import “users”;

The &

.menu-toggle {
background: none;
border: 0;
display: block;
height: 30px;
outline: none;
padding: 0;
position: relative;
width: 30px;
span {
background: #fff;
display: block;
height: 3px;
margin: 0 auto;
position: relative;
transform: translateY(0);
transition: $transition;
width: 30px;
&:before,
&:after {
@extend span;
content: ‘’;
margin: 0;
position: absolute;
top: -9px;
}
&:after {
top: 9px;
}
.js-nav & {
background: transparent;
&:before {
background: #fff;
transform: rotate(45deg);
top: 0;
}
&:after {
background: #fff;
transform: rotate(-45deg);
top: 0;
}
}
}
}
.js-nav & {

Font sizes in REM

I put all my font sizes in rem, but it can be extremely annoying to calculate the size, and even more so when you have to modify someone else’s code. That’s why when I wrote just css, I declared the font size twice, once in px and then in rem, basically for more clarity.

font-size: (24 / 16) + 0rem;

In conclusion

I was wrong (kind of). I now try to implement sass as often as I can in my workflow. Coupled with a few well placed gulp tasks, you can rediscover the pleasure of writing css.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Neil Appleton

Neil Appleton

I’m a Senior Frontend Developer and newly certified Scrum Master. I love learning new things!!