CMST 386 Web Projects

Learn Preprocessing with SASS

Client-Side Versus Server-Side Preprocessing

When I first looked into preprocessing, I found it helps to separate the client-side kind from the server-side kind, because they solve different problems. Client-side preprocessing, like the SASS I used here, runs before the browser is ever involved, since I compile my .scss files down to plain .css on my own machine and the browser only sees the finished stylesheet. Server-side preprocessing happens back on the web server, where a language like PHP assembles the page and sends finished HTML out to the visitor. The reason the distinction matters is that CSS preprocessing is really a developer convenience, so the preparation is done ahead of time before anything ships, while server-side work runs live for each request. Either way, both approaches are about doing that work early so the end user gets something clean and fast (Sass, n.d.).

The SASS Features I Used

SASS gives me a handful of features that make a stylesheet feel more like real code, and I used several of them in this project. Variables came first, since storing my colors and spacing in names like $accent and $space means I set a value once and reuse it everywhere, which keeps the whole palette consistent. Nested variables took that further, because I put my breakpoints into a SASS map, which is basically a variable that holds nested key and value pairs, so my tablet and phone widths live in one place. Mixins are reusable blocks of styling, and my button mixin bundles the gradient, rounded corners, and shadow for the call-to-action so I can drop it in with a single line. Functions return a value I can use, so I wrote a small px-to-rem function that converts pixels into rem units, and that function leans on operators, which are just the arithmetic SASS can do, so the division and multiplication happen at compile time instead of in the browser. Overall, these features let me write less repetitive CSS while keeping everything much easier to maintain (Sass, n.d.).

From SASS Source to Compiled CSS

Here is a piece of my actual source, showing a variable, the nested breakpoints map, a mixin, and the function with its operators: 

$accent: #7c2d12;                 // variable

$breakpoints: (                   // nested variables (map)
  tablet: 768px,
  phone:  480px,
);

@function px-to-rem($px) {         // function + operators
  @return math.div($px, 16) * 1rem;
}

@mixin button($from, $to) {        // mixin
  padding: px-to-rem(14) px-to-rem(26);
  border-radius: 999px;
  background: linear-gradient(135deg, $from, $to);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

After I run the compiler, that same button mixin becomes plain CSS that any browser can read, with the arithmetic already worked out: 

.cta-button {
  padding: 0.875rem 1.625rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c2d12, #b45309);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

The complete SASS source for this project lives in the project3/scss/ folder, so the files I actually edit are style.scss, _variables.scss, _mixins.scss, and _base.scss. Running the compiler turns all of those into the single css/style.css file that both pages link.

References

Back to top