Editing article

Title

Summary

Content

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yQMlZSgr9xhSLAha_XMHIA.png" /></figure><p>To follow my <a href="https://medium.com/@krandles/thinking-about-css-with-react-b444e2ab91f6">last post</a>, about some of the different ways CSS styles can be defined in the context of a React web app, I wanted to look at some of the ways the basic feature set of CSS can be expanded upon using CSS preprocessors. For those who might not be familiar with the concept, a CSS preprocessor allows you to define selectors and styles using features that aren’t part of CSS syntax, that are compiled by the preprocessor into something your browser can understand, much like Babel allows you to write JavaScript using features that aren’t yet supported by browsers.</p><p>Many of the features provided by CSS preprocessors are shared by most of them, with minor differences in syntax, and I’ll discuss some of the more useful features below, but first, a brief overview of some of the most commonly used preprocessors.</p><h3>Sass</h3><p>Sass (Syntactically Awesome Style Sheets), created in 2006 and perhaps the most popular preprocessor, is written in Ruby and can be compiled server-side to valid CSS but, with the capabilities provided to us by tools such as Webpack, is more commonly compiled by your toolchain with the resulting CSS integrated into your build.</p><h3>Less</h3><p>Less (Leaner Style Sheets), described by its creators as “CSS, with just a little more”, is written in JavaScript and can be compiled at run time by the browser or the server to CSS or, as with Sass, compiled at build time by your toolchain. Less is backwards-compatible with CSS and shares the same syntax, so any valid CSS stylesheet is also a valid Less stylesheet.</p><h3>Stylus</h3><p>Stylus is a bit more than a simple preprocessor — it’s a language, written in JavaScript and running on Nodejs, that generates CSS. Offering built-in functions, support for conditionals and logical operators, and a whole host of other features, Stylus supports standard CSS syntax but also supports a much more terse syntax, allowing you to optionally leave out colons, semicolons, and braces in your stylesheets.</p><p>There are quite a few <a href="https://www.slant.co/topics/217/~best-css-preprocessors-postprocessors">other options</a> available for CSS preprocessing, but these three are by far the most widely used and well documented. So, now that we know a little about the most popular CSS preprocessors, what exactly do we get from them?</p><h3>Variables</h3><pre>// defining variables</pre><pre>$blue: #00f // Sass syntax<br>@blue: #00f // Less syntax<br>blue = #00f // Stylus syntax<br>--blue: #00f // CSS custom properties syntax</pre><pre>// using a variable in Sass</pre><pre>h1 {<br>  color: $blue<br>}</pre><p>Variables in CSS are no longer exclusive to preprocessors, having recently been added to native CSS where they’re known as custom properties, allowing for some <a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care">very powerful functionality</a>, and perhaps eliminating one of the best arguments for using a preprocessor. As you might’ve guessed, variables allow you to assign a value to a property with a name of your choice, and refer to that property by its variable name elsewhere</p><h3>Mixins</h3><pre>// A mixin in Stylus, used to simplify setting vendor prefixes</pre><pre>border-radius() {<br>  -webkit-border-radius: arguments<br>  -moz-border-radius: arguments<br>  border-radius: arguments<br>}</pre><pre>form input {<br>  padding: 5px;<br>  border: 1px solid;<br>  border-radius: 5px;<br>}</pre><p>Mixins allow you to define a set of CSS properties which can then be “mixed-in” with the properties defined under another selector, potentially saving a lot of time and effort if you need to apply the same properties in a number of different locations.</p><h3>Nested Selectors</h3><pre>// A nested selector in Less</pre><pre>.component {<br>  width: 300px;<br>  @media (min-width: 768px) {<br>    width: 600px;<br>    @media (min-resolution: 192dpi) {<br>      background-image: url(/img/retina2x.png);<br>    }<br>  } @media (min-width: 1280px) {<br>    width: 800px;<br>  }<br>}</pre><p>Nested selectors, as the name indicates, allow you to nest selectors within one another, allowing you to write much more concise CSS. The above selector, written without nesting, would require 5 separate selectors, and nearly twice as many lines. They also allow for more logical organization, letting you group all of the properties for the element you’re styling together, instead of potentially spreading them out over many areas of your stylesheet, as is commonly done when working on a responsive design.</p><p>So should you be using a CSS preprocessor? These are just a few of the many benefits afforded by adding one to your workflow, and whether it’s worthwhile to you probably depends on the scope of your project and the other technologies you’re working with. Most of the alternative methods for implementing styles in React apps that I explored in my last post might not integrate easily with these tools, or might render the benefits offered by them unnecessary, or less useful than they would otherwise be.</p><p><a href="http://lesscss.org/">Less Documentation</a></p><p><a href="https://sass-lang.com/guide">Sass Documentation</a></p><p><a href="http://stylus-lang.com/">Stylus Documentation</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1696472c9229" width="1" height="1" alt="">

Author

Link

Published date

Image url

Feed url

Guid

Hidden blurb

--- !ruby/object:Feedjira::Parser::RSSEntry
published: 2018-06-25 04:15:07.000000000 Z
carlessian_info:
  news_filer_version: 2
  newspaper: Kevin Randles on Medium
  macro_region: Technology
entry_id: !ruby/object:Feedjira::Parser::GloballyUniqueIdentifier
  is_perma_link: 'false'
  guid: https://medium.com/p/1696472c9229
title: Thinking About CSS, Part 2 — Preprocessors
categories:
- less
- sass
- css
- css-preprocessors
- stylus
content: '<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yQMlZSgr9xhSLAha_XMHIA.png"
  /></figure><p>To follow my <a href="https://medium.com/@krandles/thinking-about-css-with-react-b444e2ab91f6">last
  post</a>, about some of the different ways CSS styles can be defined in the context
  of a React web app, I wanted to look at some of the ways the basic feature set of
  CSS can be expanded upon using CSS preprocessors. For those who might not be familiar
  with the concept, a CSS preprocessor allows you to define selectors and styles using
  features that aren’t part of CSS syntax, that are compiled by the preprocessor into
  something your browser can understand, much like Babel allows you to write JavaScript
  using features that aren’t yet supported by browsers.</p><p>Many of the features
  provided by CSS preprocessors are shared by most of them, with minor differences
  in syntax, and I’ll discuss some of the more useful features below, but first, a
  brief overview of some of the most commonly used preprocessors.</p><h3>Sass</h3><p>Sass
  (Syntactically Awesome Style Sheets), created in 2006 and perhaps the most popular
  preprocessor, is written in Ruby and can be compiled server-side to valid CSS but,
  with the capabilities provided to us by tools such as Webpack, is more commonly
  compiled by your toolchain with the resulting CSS integrated into your build.</p><h3>Less</h3><p>Less
  (Leaner Style Sheets), described by its creators as “CSS, with just a little more”,
  is written in JavaScript and can be compiled at run time by the browser or the server
  to CSS or, as with Sass, compiled at build time by your toolchain. Less is backwards-compatible
  with CSS and shares the same syntax, so any valid CSS stylesheet is also a valid
  Less stylesheet.</p><h3>Stylus</h3><p>Stylus is a bit more than a simple preprocessor — it’s
  a language, written in JavaScript and running on Nodejs, that generates CSS. Offering
  built-in functions, support for conditionals and logical operators, and a whole
  host of other features, Stylus supports standard CSS syntax but also supports a
  much more terse syntax, allowing you to optionally leave out colons, semicolons,
  and braces in your stylesheets.</p><p>There are quite a few <a href="https://www.slant.co/topics/217/~best-css-preprocessors-postprocessors">other
  options</a> available for CSS preprocessing, but these three are by far the most
  widely used and well documented. So, now that we know a little about the most popular
  CSS preprocessors, what exactly do we get from them?</p><h3>Variables</h3><pre>//
  defining variables</pre><pre>$blue: #00f // Sass syntax<br>@blue: #00f // Less syntax<br>blue
  = #00f // Stylus syntax<br>--blue: #00f // CSS custom properties syntax</pre><pre>//
  using a variable in Sass</pre><pre>h1 {<br>  color: $blue<br>}</pre><p>Variables
  in CSS are no longer exclusive to preprocessors, having recently been added to native
  CSS where they’re known as custom properties, allowing for some <a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care">very
  powerful functionality</a>, and perhaps eliminating one of the best arguments for
  using a preprocessor. As you might’ve guessed, variables allow you to assign a value
  to a property with a name of your choice, and refer to that property by its variable
  name elsewhere</p><h3>Mixins</h3><pre>// A mixin in Stylus, used to simplify setting
  vendor prefixes</pre><pre>border-radius() {<br>  -webkit-border-radius: arguments<br>  -moz-border-radius:
  arguments<br>  border-radius: arguments<br>}</pre><pre>form input {<br>  padding:
  5px;<br>  border: 1px solid;<br>  border-radius: 5px;<br>}</pre><p>Mixins allow
  you to define a set of CSS properties which can then be “mixed-in” with the properties
  defined under another selector, potentially saving a lot of time and effort if you
  need to apply the same properties in a number of different locations.</p><h3>Nested
  Selectors</h3><pre>// A nested selector in Less</pre><pre>.component {<br>  width:
  300px;<br>  @media (min-width: 768px) {<br>    width: 600px;<br>    @media (min-resolution:
  192dpi) {<br>      background-image: url(/img/retina2x.png);<br>    }<br>  } @media
  (min-width: 1280px) {<br>    width: 800px;<br>  }<br>}</pre><p>Nested selectors,
  as the name indicates, allow you to nest selectors within one another, allowing
  you to write much more concise CSS. The above selector, written without nesting,
  would require 5 separate selectors, and nearly twice as many lines. They also allow
  for more logical organization, letting you group all of the properties for the element
  you’re styling together, instead of potentially spreading them out over many areas
  of your stylesheet, as is commonly done when working on a responsive design.</p><p>So
  should you be using a CSS preprocessor? These are just a few of the many benefits
  afforded by adding one to your workflow, and whether it’s worthwhile to you probably
  depends on the scope of your project and the other technologies you’re working with.
  Most of the alternative methods for implementing styles in React apps that I explored
  in my last post might not integrate easily with these tools, or might render the
  benefits offered by them unnecessary, or less useful than they would otherwise be.</p><p><a
  href="http://lesscss.org/">Less Documentation</a></p><p><a href="https://sass-lang.com/guide">Sass
  Documentation</a></p><p><a href="http://stylus-lang.com/">Stylus Documentation</a></p><img
  src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1696472c9229"
  width="1" height="1" alt="">'
rss_fields:
- title
- url
- author
- categories
- published
- entry_id
- content
url: https://medium.com/@krandles/thinking-about-css-part-2-preprocessors-1696472c9229?source=rss-d451d084d34a------2
author: Kevin Randles

Language

Active

Ricc internal notes

Ricc source

Show this article Back to articles