Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit sass docs for clarity #191

Merged
merged 1 commit into from
May 10, 2016
Merged

Edit sass docs for clarity #191

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 1 addition & 17 deletions docs/writing-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,6 @@ Sass is an extension of CSS that gives a load of extra features useful in produc

SCSS was chosen because you can paste CSS into it without breaking it which is useful for prototyping. Using SCSS means you can also use the [govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit) Sass libraries which include styles for colours, typography, cross-browser fixes and other things which are used across GOV.UK.

## We use Node Sass

The prototype kit uses [node-sass](https://github.com/andrew/node-sass), a node version of of [lib-sass](https://github.com/hcatlin/libsass). It's still a work in progress and so you may find a few things don't work, the most important of which is that [@extend](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend) mostly doesn't.

We found most other features are in and development is progressing quick enough to work with most prototypes (any bugs we found were quickly fixed). Note that `@extend` is used in just one place in the toolkit: the `clear-floats` @extend in [_shims.scss](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_shims.scss).

For the latest details of what's supported, check [this article](http://www.solitr.com/blog/2014/01/state-of-libsass/).

#### Why use Node Sass?

We use node-sass for one reason: to keep it as quick as possible to get up and running. It means you have only one thing to do, get Node. Do that and you can run the app.

#### Help, I need features Node Sass doesn't have yet

Your best bet is to use the Ruby version of Sass to compile your SCSS. Functionality for this out of the box will be added soon. Until then, check the docs on using the [Sass command-line tool](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass) or swap out the [grunt-sass](https://github.com/sindresorhus/grunt-sass) plugin for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass).

## Writing code

You write your Sass in [app/assets/sass](../app/assets/sass) and the prototype kit will compile it into the CSS used in your page (found in /public/stylesheets). The app watches your files so this will happen automatically.
Expand Down Expand Up @@ -51,6 +35,6 @@ The line `@import '_typography';` makes all the code in [_typography.scss](https

## Imports

Imports are done from either the toolkit's [stylesheets](https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets/) folder or the [app/assets/sass](../app/assets/sass) folder application.scss sits in. The later means you can create your own partial files to import.
Imports are done from either the toolkit's [stylesheets](https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets/) folder or the [app/assets/sass](../app/assets/sass) folder application.scss sits in. The latter means you can create your own partial files to import.

Note that the convention is to start the name of any partial with an underscore, like those in the toolkit.