DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Syntactically Awesome Stylesheets

Syntactically Awesome Stylesheets

Giorgio Sironi user avatar by
Giorgio Sironi
·
Aug. 16, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.81K Views

Join the DZone community and get the full member experience.

Join For Free

SASS is a layer of abstraction over CSS 3 style sheets, with a rationale similar to CoffeeScript's one. It is a more powerful language, which compiles to CSS 3; it's built starting from the CSS syntax and adding constructs, in the same way as old style PHP code was submerged into HTML pages.

Thus, a .css file is already a valid SASS file. However, SASS stylesheets are identified by the .scss extension, which is truncated to .css during compilation.

Note that in this article we will refer to the SCSS newer syntax, not the older ruby-like one. This syntax has the primary support from the tool, and retains compatibility with .css.

Tools

The sass binary is installable with a Ruby library (libhaml-ruby1.8 in Ubuntu) on Linux. Compilation is really easy:

sass style.scss:style.css

tranforms style.scss into the style.css CSS file.

sass --watch style.scss:style.css

does the same, and does not exit. Instead, it listens for modifications on style.scss to recompile when needed.

Examples

The markup this code works on are two simple block elements, each with a contained span.

<html>
<head>
    <link rel="StyleSheet" type="text/css" href="style.css" />
</head>
<body>
<div>
Lorem ipsum dolor <span>sit amet</span>...
</div>
<p>
Lorem ipsum dolor <span>sit amet</span>...
</p>
</body>
</html>

These examples are just a selection of the most important features, and the SASS documentation may help you discovering more. But when designing a new layer of abstraction, the question is what not to include, and SASS seems oriented to provide the best 80% of functionality.

Nesting

Selectors can be nested, in order to easy locate rules that apply to children elements.

p {
    span {
        color: #006699;
    }
}

Nesting can also be applied to properties: border and its derivates are ideal to demonstrate this, as the sass manual shows:

div
{
    border: {
        color: black;
        style: solid;
        top: {
            width: 10px;
        }
        left: {
            width: 5px;
        }
    }
}

 

Variables

Variables can be defined and then reused throughout the file, just like PHP or JSP variables in the page scope. Finally we get a "DRY" solution, since CSS is based only on inheritance and has to inherit a property from a more general selector everytime it needs to share a value.

$textColor: blue;
$highlightedColor: navy;

p {
    color: $textColor;
    span {
        color: $highlightedColor;
    }
}

 

Mixins

Think of mixins just as the inclusion of another, smalle file inside a selector.

@mixin readable-font {
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

div
{
    @include readable-font;
    background-color: #006699;
}

Self-explanatory, right? Mixins can also take parameters, so in that case they're more like functions (View Helpers, precisely) than plain old files.

Conclusions

SASS, just as CoffeeScript, is an innovation that takes place on the server-side: there is more freedom of what you can install there due to lower and lower costs of servers. Browsers are the bottleneck where new technologies cannot be deployed shortly.

You can always preprocess the files on deployment and only upload .css to the server, just as with coffeescript; you can also compile inside your web framework or not write anything to disk (after all, a PHP view is not written to disk when it's rendered.)

The language is mostly backward compatible, like in the case of PHP into HTML pages. It's as easy as pie: you can easily understand the language (but not write it ex novo) even if you have had no exposure to it beforehand. But the question is always the same: will the gains from the superior language outweigh the costs from the additional compilation step and tooling maintenance?

Sass (stylesheet language) Awesome (window manager)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Use Lambda Function URL To Write a Serverless App Backed by DynamoDB
  • How BDD Works Well With EDA
  • Top Soft Skills to Identify a Great Software Engineer
  • Enough Already With ‘Event Streaming’

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo