1.3 Susy——CSS框架
Susy是一个基于Natalie Downe的 CSS Systems的CSS框架，通过 Sass实现，利用 Compass来简化，可用于静态网站以及各种框架应用。
Responsive layout toolkit forSass：Susy is an agnostic set of tools for creating powerful, custom layouts. We provide the language, but you provide all the opinions. Use a grid, don't use a grid, or use a combination of grids — it's all up to you.
Susy documentation
http://susydocs.oddbird.net/en/latest/
1.3.1 Install And Config
The only requirement is Sass, but Susy was built to be part of the Compass ecosystem, and we recommend pairing with tools like Breakpoint and Vertical Rhythms. Compass is still required for the Susy Onesyntax.
1.3.1.1 Simple Install
# command line
sudo gem install susy
1.3.1.2 Bundler or Rails
In order to use Susy 2 with Rails you must update your Gem file to use sass-rails ~> 5.0.0.beta1.This is because Susy 2 requires Sass >= 3.3 whilst Rails 4.1 and below include a version of sass-rails which does not support Sass 3.3. As you can seethe sass-rails requirement is still in beta so proceed with a drink in hand.
#
Gemfile
#
gem 'sass-rails', '~> 4.0.3'
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'susy'
# If
you want Compass:
gem 'compass-rails', '~> 2.0.0'
# config/application.rb
require 'susy'
# command line
bundle install
If you add Susy to an exsisting Rails app, follow the steps above, but use bundle update instead of bundle install.
#command line
bundle update
1.3.1.3 Compass
If you want to use Susy with Compass, start by installingCompass. Create a new Compass project:
# command line
compass create --using susy
Alternatively, add Susy toa current project
# command line
compass install susy
1.3.1.4 Grunt (and Yeoman)
You can enable Susy in Grunt by adding a line to your Gruntfile.js. You will need to add a line to either your Sass taskor, if you’re using Compass, your Compass task. To add Susy to the Sass task, edit your Gruntfile.js at the root level of your project and look for the Sass-related rules. Add require: 'susy' inside the options object:
// Gruntfile.js
sass:{
dist:{
options:{
style:'expanded',
require:'susy'
},
files:{
'css/style.css': 'scss/style.scss'
}
}
}
Assuming you’ve already installed Susy, it will now be added to the project and will not clash with Yeomans grunt rules.
To add Susy to the Compass task, edit your Gruntfile.js at the root level of your project and look for the Compass-related rules. Add require: 'susy' inside the options object:
//Gruntfile.js
compass:{
options:{
require:'susy',
...
}
}
}
Again, assuming you’ve already installed Susy, it will now be added to the project.
1.3.2 Quick Start
Once you have everything installed, you can import Susy into your Sass files.
@import "susy";
The basic Susy layout is composed using two simple mixins:
@include container; // establish a layout context
@include span(<width>); // lay out your elements
For example:
body{@include container(80em); }
nav{@include span(25%); }
If you want to lay your elements out on a grid, you can use the span mixin to calculate column widths:
nav{@include span(3 of 12); }
But you don’t have to do things the Susy way. We give you direct access to the math, so you can use it any way you like:
main{
float: left;
width: span(4);
margin-left: span(2)+gutter();
margin-right: gutter();
}
You can also establish global settings, to configure Susy for your specific needs. Create a $susy variable, and add your settings as a map.
$susy:(
columns: 12, // The number of columns in your grid
gutters: 1/4, // The size of a gutter in relation to a single column
);
There are many more settings available for customizing every aspect of your layout, but this is just a quick-start guide. Keep going to get the details.
1.3.3 参考链接
Build Web Layouts Easily with Susy
Susy-Getting Started
