Merge branch 'stable'

* stable: (36 commits)
  Tweak the changelog.
  [CSS3] The box-shadow $spread value now defaults to using the browser default instead of 0.
  update the lockfile
  some todos
  Move the contributing guide to the tutorials section.
  add on-page anchors to the command line reference page.
  Better docs on the grid image command.
  Move the tutorials to the main nav... I don't think most people see it.
  Don't set the display in the box-flex mixin. This makes nested flex boxes annoying. Closes GH-207
  Add a note about the colorization change.
  Add a note about the compass validator
  Only colorize the action when logging results.
  Update to use the new compass validator during development.
  Fix broken test cases.
  Support true in addition to the inset keyword for the box-shadow mixin. Closes GH-206
  IE8 compat for :last-child selector
  Make the compass configuration file more self documenting by adding comments for preferred_syntax, output_style, and line_comments.
  Pass --no-line-comments to disable line comments.
  A little less noise during installation.
  Change the default Sass directory in standalone projects from src to sass. Closes GH-203
  ...

Conflicts:
	TODO.md
	VERSION.yml
	doc-src/content/CHANGELOG.markdown
	features/command_line.feature
	features/step_definitions/command_line_steps.rb
	lib/compass/commands/write_configuration.rb
This commit is contained in:
Chris Eppstein 2010-11-11 21:40:00 -08:00
commit b07f303d9b
45 changed files with 649 additions and 99 deletions

2
.gitignore vendored
View File

@ -21,3 +21,5 @@ coverage*
docs
doc-src/tmp
doc-src/.bundle
.bundle
devbin

View File

@ -4,7 +4,7 @@ gem "compass", :path => "."
gem "cucumber"
gem "rspec"
gem "rails", "~>3.0.0.rc"
gem "compass-validator", "1.0.0"
gem "compass-validator", "3.0.0"
gem "css_parser"
gem "sass"
gem "rcov"

View File

@ -4,6 +4,15 @@ FYI: I'm abandoning the even/odd release numbering scheme in favor of using prev
* 0.11.0.beta.N (tagged, new features expected)
* 0.11.0.rc.N (tagged, no new features expected)
MUST:
* A proper welcome page for blueprint projects (or delete it)
* Rails Integration
NICE:
* some extension commands
* Better help for commands and patterns
* Color Palette extraction and management commands
v0.11
=====
Planned Release Date: Aug 2, 2010

View File

@ -9,7 +9,7 @@ GIT
PATH
remote: /Users/chris/Projects/compass
specs:
compass (0.10.5)
compass (0.10.6)
haml (>= 3.0.4)
GEM

View File

@ -20,6 +20,28 @@ COMPASS CHANGELOG
* Some color defaults now use color functions instead of color arithmetic.
This may result in different output for those who have color customizations.
0.10.7 (UNRELEASED)
-------------------
* [Command Line] compass config -p <property> -- will now print out the configuration value
for that property for the current project
* [CSS3] Bug fix: In webkit, when the last gradient color stop was a percent less than 100%,
the intermediate values were being scaled to that value.
* [Command Line] You can now pass --no-line-comments to the Compass command line to disable
line comments.
* [Configuration] Make the compass configuration file more self documenting by adding comments
for `preferred_syntax`, `output_style`, and `line_comments`.
* Work around IE compatibility issues with the :last-child selector.
[Commit](http://github.com/jdsiegel/compass/commit/c1fb764dba9c54cc5d02f2f7de213fb21ac6ca09).
* [Command Line] Only the action is colorized in command line output now.
* [Command Line] Compass Validator has been upgraded and fine-tuned. It is now using the
"css3" profile to validate and provides a more consistent UI with other compass commands.
To upgrade: `gem install compass-validator`
* [CSS3] The box-shadow `$spread` value now defaults to using the browser default instead of 0.
Set $default-box-shadow-spread to 0 if you prefer the older behavior. Since the browser is supposed
to default to 0, you should see no change except less CSS output.
* [CSS3] The output order of the `box-shadow` mixin now matches the W3C specification.
The color and inset values used to be swapped.
0.10.6 (10/11/2010)
-------------------
@ -28,6 +50,8 @@ COMPASS CHANGELOG
* Make it easier to disable the asset cache buster: `asset_cache_buster :none`
* Can now set `$padding` to `false` to make the `horizontal-list` mixin skip the
padding properties.
* It is now possible to disable support for legacy IE browsers.
See [the docs](/docs/reference/compass/support/) for more information.
0.10.5 (08/29/2010)
-------------------

View File

@ -35,7 +35,7 @@ body_id: home
compass watch myproject
If you don't have TextMate, substitute the `mate myproject` part with the text
editor of your choice. Edit the `*.scss` files in the `src` directory.
editor of your choice. Edit the `*.scss` files in the `sass` directory.
These files are yours and you can change them as you see fit, delete them,
make new ones, etc. Compass will automatically compile them into css in the
`stylesheets` directory whenever they change.

View File

@ -0,0 +1,17 @@
---
title: Compass Cross-Browser Support Configuration
crumb: Browser Support
framework: compass
stylesheet: compass/_support.scss
classnames:
- reference
- core
- support
meta_description: Provides configuration options for the Compass Browser Support Matrix.
layout: core
nav_stylesheet: _compass.scss
---
- render 'reference' do
%p
You can configure the compass default browser support matrix by
setting these variables as needed.

View File

@ -1,7 +1,7 @@
/* Welcome to Susy. Use this file to define screen styles.
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
@charset "UTF-8"
@import defaults
@import slideshow
@import shared
@ -57,9 +57,6 @@ footer[role="contentinfo"]
background: #cccccc
cursor: default
+active-compass-nav("#home,.reference", "/docs/")
+active-compass-nav(".tutorial", "/docs/tutorials/")
#docs-nav
+pie-clearfix
+leading-border(1px, 0.25)
@ -108,6 +105,8 @@ footer[role="contentinfo"]
+active-docs("#home", "/docs/")
+active-docs(".core", "/docs/reference/compass/")
+active-docs(".blueprint", "/docs/reference/blueprint/")
+active-docs(".tutorial", "/docs/tutorials/")
#version
+adjust-font-size-to(14px)
@ -213,6 +212,8 @@ aside[role="sidebar"] + article
margin-right: 1.5em
&:first-child
+alpha
a.selected:before
content: ""
+ #page
+leader(1.5)

View File

@ -2,6 +2,8 @@
title: Best practices
crumb: Best practices
layout: tutorial
classnames:
- tutorial
---
### Use a Base stylesheet file

View File

@ -39,32 +39,37 @@ Extensions Commands
Project Commands
----------------
<a name="create"/>
### Create a new compass project
compass create path/to/project [--using blueprint] [--sass-dir=sass ...] [--project-type=rails]
<a name="init"/>
### Initialize an existing project to work with compass
compass init rails path/to/project [--using blueprint]
<a name="install"/>
### Install a pattern from an extension into a project
compass install blueprint/buttons [path/to/project]
<a name="compile"/>
### Compile the project's sass files into css
compass compile [path/to/project]
<a name="watch"/>
### Watch the project for changes and compile whenever it does
compass watch [path/to/project]
<a name="config"/>
### Emit a configuration file at the location specified.
compass config [path/to/config] [--sass-dir=sass --css-dir=css ...]
<a name="validate"/>
### Validate the generated CSS.
compass validate [path/to/project]
@ -72,22 +77,42 @@ Project Commands
Misc commands
-------------
<a name="grid-img"/>
### Generate a background image that can be used to verify grid alignment
compass grid-img W+GxH [path/to/grid.png]
Where:
<dl class="table">
<dg><dt><code>W</code> = </dt><dd>Width of 1 column in pixels.</dd></dg>
<dg><dt><code>G</code> = </dt><dd>Width of 1 gutter in pixels.</dd></dg>
<dg><dt><code>H</code> = </dt><dd>Height of the typographic baseline in pixels.</dd></dg>
</dl>
Examples:
# 40px column, 10px gutter, 20px height at <images_dir>/grid.png
compass grid-img 40+10
# 40px column, 20px gutter, 28px height at <images_dir>/grid.png
compass grid-img 40+20x28
# 60px column, 20px gutter, 28px height at images/wide_grid.png
compass grid-img 60+20x28 images/wide_grid.png
<a name="interactive"/>
### Enter into a console for testing SassScript in a compass environment.
compass interactive
<a name="stats"/>
### Print out statistics about your stylesheets
compass stats
<a name="version"/>
### Emit the version of compass
compass version
<a name="unpack"/>
### Unpack a framework or extension into your project
compass unpack <extension>
@ -95,18 +120,22 @@ Misc commands
Get Help on the Command Line
----------------------------
<a name="help"/>
### Get help on compass
compass help
<a name="help-extension"/>
### Get help on an extension
compass help extension_name
<a name="help-pattern"/>
### Get help about an extension pattern
compass help extension_name/pattern_name
<a name="help-command"/>
### Get help about a particular sub command
compass help command_name

View File

@ -0,0 +1,336 @@
---
title: Contributing Stylesheets
crumb: Contributing
layout: tutorial
classnames:
- tutorial
---
Contributing Stylesheets to Compass
===================================
Thank you for your interest in contributing to Compass. Our goal is to make it as easy
as we can for you to contribute changes to compass -- So if there's something here that
seems harder than it aught to be, please let us know.
If you find a bug **in this document**, you are bound to contribute a fix. Stop reading now
if you do not wish to abide by this rool.
**Step 1**: If you do not have a github account, create one.
**Step 2**: Fork Compass to your account. Go to the [main repo](http://github.com/chriseppstein/compass)
and click the fork button.
![Fork Me](http://img.skitch.com/20101015-n4ssnfyj16e555cnn7wp2pg717.png)
Now we're at a decision point. What kind of change do you intend to make?
* [Fix a typo (or some other trivial change)](#trivial-changes)
* [Documentation Changes](#documentation-changes)
* [Fixing Stylesheet Bugs](#stylesheet-bugs)
* [New Stylesheet Features](#stylesheet-changes)
* [Ruby Changes](#ruby-changes)
Here's some general information about the project you might find useful along the way:
* [Submitting Patches](#patches)
* [Project Structure](#project-structure)
* [Project Architecture](#project-architecture)
* [Command Line](#cli-architecture)
* [Extensions](#extensions-architecture)
* [Configuration](#configuration-architecture)
* [General Philosophy](#project-philosophy)
* [Stylesheet Conventions](#stylesheet-conventions)
* [Miscellaneous Stuff](#faq)
* [Setting up Git](#setting-up-git)
* [Using Compass while Under Development](#running-local-code)
* [Running Tests](#running-tests)
* [Recovering from a cherry-pick or a rebase](#recovering-from-rebased-or-cherry-picked-changesets)
<h2 id="trivial-changes">Making Trivial Changes</h2>
Thanks to Github, making small changes is super easy. After forking the project navigate
to the file you want to change and click the edit link.
![Edit Me](http://img.skitch.com/20101015-n2x2iaric7wkey2x7u4fa2m1hj.png)
Change the file, write a commit message, and click the `Commit` button.
![Commit Me](http://img.skitch.com/20101015-br74tfwtd1ur428mq4ejt12kfc.png)
Now you need to get your change [accepted](#patches).
<h2 id="documentation-changes">Making Documentation Changes</h2>
The compass documentation is stored in two places. First, the `doc-src` directory is
where the documentation lives -- however much of the documentation is generated
from comments in the Sass files themselves. More information on [changing
documentation][documentation]. Once your changes are pushed, please
[submit them](#patches).
<h2 id="stylesheet-bugs">Fixing Stylesheet Bugs</h2>
**Step 3**: If this is a bug you discovered. Please [report it][issues] before working on a fix.
This helps us better understand the patch.
**Step 4**: Get [the code](#setting-up-git) if you haven't yet done so.
**Step 5**: Fix the bug and commit the changes. Please make sure to mention the bug
id in your commit message like so:
Fixed the display of the fizzlebuzz in IE6.
Closes GH-123.
**Step 6**: Verify the fix in as many browsers as you can as well as against your own
project. How to [use compass while changing it](#running-local-code).
**Step 7**: Make sure the tests pass. More info on [running tests](#running-tests)
If the tests fail, fix the tests or the stylesheets accordingly. If the tests, don't
fail, that means this aspect was not well enough tested. Please [add or augment
a test](#writing-tests).
You're done. Please [submit your changes](#patches)
<h2 id="stylesheet-changes">Making Stylesheet Changes</h2>
It is a good idea to discuss new features ideas with the compass users and developers
before building something. Please don't by shy; send an email to the [compass mailing
list](http://groups.google.com/group/compass-users).
Many feature ideas are good but not obviously a good fit for the compass core library.
In these cases, you can and should create a [compass extension][extensions]. Sometimes
this is because the concept does not align with the [compass philosophy](#project-philosophy).
But sometimes it's just because we think the idea needs time to bake. [Documentation on
making extensions.][extensions]
**Step 3**: Get [the code](#setting-up-git) if you haven't yet done so.
**Step 4**: Add the feature -- contact the mailing list if you have any questions.
**Step 5**: Add a test case. More info on [writing tests for compass](#writing-tests).
**Step 6**: Documentation - Add or update the reference documentation. Add
an example of using the feature. See the [doc readme for details][documentation].
You're done. Please [submit your changes](#patches)
<h2 id="ruby-changes">Making Ruby Changes</h2>
At this time, if you're a rubyist who's planning on working on the ruby-side of
things, it's assumed you know how to read code and use standard ruby tools like
rake, gem, bundler, test/unit, cucumber, rspec, etc. If you have any questions,
please ask. No changes will be accepted without accompanying tests.
<h2 id="patches">Submitting Patches</h2>
If you are submitting features that have more than one changeset, please create a
topic branch to hold the changes while they are pending merge and also to track
iterations to the original submission. To create a topic branch:
$ git checkout -b new_branch_name
... make more commits if needed ...
$ git push origin new_branch_name
You can now see these changes online at a url like:
http://github.com/your_user_name/compass/commits/new_branch_name
If you have single-commit patches, it is fine to keep them on master. But do keep in
mind that these changesets might be
[cherry-picked](#recovering-from-rebased-or-cherry-picked-changesets).
Once your changeset(s) are on github, select the appropriate branch containing your
changes and send a pull request. Make sure to choose the same upstream branch that
you developed against (probably stable or master). Most of the description of your
changes should be in the commit messages -- so no need to write a whole lot in the
pull request message. However, the pull request message is a good place to provide a
rationale or use case for the change if you think one is needed. More info on [pull
requests][pulls].
![Pull Request Example](http://img.skitch.com/20101015-rgfh43yhk7e61fchj9wccne9cq.png)
Pull requests are then managed like an issue from the [compass issues page][issues].
A code review will be performed by a compass core team member, and one of three outcomes
will result:
1. The change is rejected -- Not all changes are right for [compass's
philosophy](#project-philosophy). If your change is rejected it might be better
suited for a plugin, at least until it matures and/or proves itself with the users.
2. The change is rejected, *unless* -- Sometimes, there are missing pieces, or
other changes that need to be made before the change can be accepted. Comments
will be left on the commits indicating what issues need to be addressed.
3. The change is accepted -- The change is merged into compass, sometimes minor
changes are then applied by the committer after the merge.
<h2 id="project-structure">Project Structure</h2>
compass/
bin/
compass - CLI executable
devbin/ - development scripts after installing the bundle
doc-src/ - source for documentation
docs/ - generated documentation
examples/ - fully working compass projects that you can explore
features/ - tests for compass
frameworks/ - All frameworks in this directory are loaded automatically
compass/ - The compass framework
stylesheets/ - The compass libraries
templates/ - The compass project templates and patterns
blueprint/
stylesheets/ - The blueprint libraries
templates/ - The blueprint project templates and patterns
lib/
compass.rb - The main compass ruby library
compass/
app_integration/ - integration with app frameworks
commands/ - UI agnostic support for the CLI
configuration/ - support for project configuration
exec/ - UI code for the CLI
installers/ - support for installing templates
sass_extensions/ - enhancements to Sass
functions/ - Sass functions exposed by compass
monkey_patches/ - Changes to sass itself
test/ - unit tests
<h2 id="project-philosophy">General Philosophy</h2>
1. Users specify their own selectors. Compass never forces a user
to use a presentational class name.
2. Compass does not require javascript. It is a CSS framework.
3. Compass core is "design agnostic". This is why compass core has no
grid framework -- grids are not design agnostic.
4. Compass frameworks are not special. If compass can do it, so should an extension
be able.
5. Sass is awesome -- Compass should make sass more accessible and
demonstrate how to use Sass to it's fullest potential.
6. Developing across browsers is hard and will always be hard. It takes
a community to get it right.
7. By default, Compass supports as many browsers as it can. Where it can't
it progressively enhances. Where it degrades, the documentation should
make a note. Deviation from this requires an excellent reason.
8. Compass is a proving ground for Sass features. The watcher and color
functions are examples of features that started in Compass and got
moved to Sass.
<h2 id="stylesheet-conventions">Stylesheet Conventions</h2>
1. All framework stylesheets are partials. Their filename begin with an underscore.
Otherwise, Sass will create stylesheets directly into the user's CSS directory.
2. Compass imports do not emit styles. There are a few limited exceptions to this like
the resets and base classes for inheritance.
3. Mixins with two-level defaults. Mixins often provide two levels of default
values. The first is a global default that can be overridden once. The second
is a default that can be overridden when the mixin is included.
4. Mixin argument names are part of the public API, make sure they are understandable and not
needlessly truncated or terse.
5. If adding a new folder of stylesheets, add a single stylesheet with the same name that
imports all of the stylesheets in the folder.
6. Try to avoid passing selectors as arguments. This is what mixins are for.
<h2 id="faq">Common Problems &amp; Miscellaneous Info</h2>
<h3 id="setting-up-git">Setting up Git</h3>
Please follow [these instructions](http://help.github.com/git-email-settings/)
to set up your email address and attribution information.
Download your git repo:
git clone git@github.com:your_username/compass.git
Set up a remote to the main repo:
cd compass
git remote add chriseppstein git://github.com/chriseppstein/compass.git
Getting recent changes from the main repo:
git fetch chriseppstein
<h3 id="running-local-code">Using Compass while Under Development</h3>
1. Use the bin script. `/path/to/compass/bin/compass` is a version of the compass
command line that uses the local changes you have made. You can add `/path/to/compass/bin`
to your `$PATH`, or refer to it directly.
2. Build and install a gem:
1. Edit VERSION.yml and add a build indicator like so (**Do not commit this change**):
---
:major: 0
:minor: 10
:patch: 6
:build: something-uniq-to-me.1
2. `gem build compass.gemspec`
3. `gem install compass-0.10.6.something-uniq-to-me.1.gem` -- If installing to your
system gems, you'll probably need to add `sudo` to the front. If you don't know
what that means, you probably need to add `sudo` to the front.
3. In a [bundled][bundler] environment, you can configure your gem to use compass
while you work on it like so:
gem 'compass', :path => "/Users/myusername/some/path/to/compass"
Bundler will perform some sort of charm on ruby to make it work.
4. Configuring ruby directly. If you're a ruby pro, you probably don't need to be
told that you can set compass on the load path like so:
export RUBYLIB=/Users/myusername/some/path/to/compass/lib
<h3 id="running-tests">Running Tests</h3>
1. Install development dependencies:
bundle install --binstubs devbin
2. Running core library and stylesheet tests:
rake run_tests
3. Running behavior tests
./devbin/cucumber
If stylesheet tests fail, the output of the test project is captured in
`test/fixtures/stylesheets/<project>/saved/` and the error message will report where
the error was. Here's an example:
![Stylesheet Test Failure](http://img.skitch.com/20101015-k4t11k8n7xs2r53ftjhrji629d.png)
<h3 id="writing-tests">Writing Stylesheet Tests</h3>
Compass has stylesheet tests to ensure that each stylesheet compiles, can be imported directly
without any other dependencies and that refactorings that should not affect the output, don't.
At some point, it would be great to have a test system that verifies that the stylesheets
*work correctly* in various browsers. If you have ideas for how to accomplish this in a sane
way, please let us know.
In the `test/fixtures/stylesheets` directory, there are a number of compass projects.
The tests work by adding or updating the sass files, running the tests to make sure they fail,
and then changing the expected css output to make the test pass. It is rudimentary, but as
a safety net, it has caught a number of problems that might have been missed otherwise.
If you add a new stylesheet to compass, please make sure to add a new test stylesheet
that only imports the newly added stylesheet and add rules that use the new features in that
stylesheet.
<h3 id="recovering-from-rebased-or-cherry-picked-changesets">You cherry-picked/rebased
my changes. What should I do?</h3>
Depending on any number of reasons, including but not limited to the alignment of the stars,
Your changes might not be merged into compass using a simple merge. For instance, we might
decide to place a change against master into stable instead, or we might squish all your
changes together into a single commit at the time of merge, or we might want a change you've
submitted but not a change that it was placed onto top of. In these cases, there are
a couple of ways you can react:
1. If you have some changes on a branch that were not yet accepted, but other changes on that
branch were accepted then you should run the following command (make sure to fetch first):
`git checkout branch_name; git rebase chriseppstein/master` (assuming the change was applied
to the master branch)
2. If all your changes on the topic branch were accepted or you don't care to keep it around
anymore: `git checkout master; git branch -D branch_name; git push origin :branch_name`
[pulls]: http://help.github.com/pull-requests/
[issues]: http://github.com/chriseppstein/compass/issues
[documentation]: http://github.com/chriseppstein/compass/blob/stable/doc-src/README.markdown
[bundler]: http://gembundler.com/
[extensions]: /docs/tutorials/extensions/

View File

@ -6,14 +6,6 @@
%div
%h1.vcard
%a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
%nav#compass-nav
%ul
%li
%a{:href => "/", :rel => "home"} compass
%li
%a{:href => "/docs/"} reference
%li
%a{:href => "/docs/tutorials/"} tutorials
%nav#docs-nav{:role => "navigation"}
.container
%ul
@ -23,6 +15,8 @@
%a{:href => "/docs/reference/compass/"} core
%li
%a{:href => "/docs/reference/blueprint/"} blueprint
%li
%a{:href => "/docs/tutorials/"} tutorials
/
%li
%a{:href => "/docs/plugins/"} plugins

View File

@ -0,0 +1,7 @@
- render 'main' do
- content_for :module_nav do
%ul= item_tree(reference_item(:stylesheet => "compass.scss"), :depth => 1, :omit_self => true, :headings => false)
%aside(role="sidebar")
%nav#local-nav
= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){false}, :heading_level => get_var(:heading_level){1})
%article= yield

View File

@ -136,7 +136,7 @@ def constants(item)
comment = nil
end
end
constants
constants.reject{|c| c.comment =~ /@private/}
end
def all_constants

View File

@ -1,3 +1,4 @@
require File.join(File.dirname(__FILE__), '..', 'downloader')
install_from_github('chriseppstein', 'yui-compass-plugin', 'yui')
install_from_github('chriseppstein', 'Compass-Layouts', 'compass-layouts')

View File

@ -32,6 +32,10 @@ h1 {
margin: 0.5em 0 1em;
text-align: center; } }
.inset {
@include box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset);
}
.gutter {
display: block;
float: left;

View File

@ -264,6 +264,7 @@ Feature: Command Line
| sass_path | $PROJECT_PATH/sass | normally |
| foobar | ERROR: configuration property 'foobar' does not exist | with a non-zero error code |
@validator
Scenario: Validate the generated CSS
Given I am using the existing project in test/fixtures/stylesheets/compass
When I run: compass validate
@ -284,12 +285,12 @@ Feature: Command Line
| sass/images.scss | 3 | 3 | 0 | 0 | 3 | 3 |
| sass/layout.sass | 0 | 0 | 0 | 1 | 5 | 10 |
| sass/legacy_clearfix.scss | 2 | 0 | 0 | 2 | 5 | 11 |
| sass/lists.scss | 9 | 0 | 0 | 9 | 35 | 111 |
| sass/lists.scss | 10 | 0 | 0 | 10 | 39 | 123 |
| sass/print.sass | 0 | 0 | 0 | 2 | 61 | 61 |
| sass/reset.sass | 4 | 1 | 0 | 2 | 190 | 664 |
| sass/utilities.scss | 2 | 0 | 0 | 2 | 3 | 9 |
| ------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
| Total.* | 61 | 12 | 0 | 60 | 344 | 975 |
| Total.* | 62 | 12 | 0 | 61 | 348 | 987 |
@listframeworks
Scenario: List frameworks registered with compass

View File

@ -1,4 +1,3 @@
require 'spec/expectations'
$:.unshift(File.expand_path(File.join(File.dirname(__FILE__), '../../test')))
require 'test_helper'
@ -242,4 +241,3 @@ end
Then /^I should see the following output: (.+)$/ do |expected|
(@last_result.strip + @last_error.strip).should == expected.gsub(/\$PROJECT_PATH/,Dir.pwd).strip
end

View File

@ -0,0 +1,25 @@
// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
$legacy-support-for-ie: true !default;
// Setting this to false will result in smaller output, but no support for ie6
$legacy-support-for-ie6: $legacy-support-for-ie !default;
// Setting this to false will result in smaller output, but no support for ie7
$legacy-support-for-ie7: $legacy-support-for-ie !default;
// @private
// The user can simply set $legacy-support-for-ie and 6 & 7 will be set accordingly,
// But in case the user set either of those explicitly, we need to sync the value of
// this combined variable.
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7;
// Support for mozilla in experimental css3 properties.
$experimental-support-for-mozilla : true !default;
// Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default;
// Support for opera in experimental css3 properties.
$experimental-support-for-opera : true !default;
// Support for microsoft in experimental css3 properties.
$experimental-support-for-microsoft : true !default;
// Support for khtml in experimental css3 properties.
$experimental-support-for-khtml : true !default;

View File

@ -18,7 +18,7 @@ $default-box-shadow-v-offset: 1px !default;
$default-box-shadow-blur: 5px !default;
// The default spread length.
$default-box-shadow-spread : 0 !default;
$default-box-shadow-spread : false !default;
// The default shadow instet: inset or false (for standard shadow).
$default-box-shadow-inset : false !default;
@ -36,7 +36,10 @@ $default-box-shadow-inset : false !default;
) {
$full : $color $hoff $voff $blur $spread;
@if $inset {
$full: $full $inset;
@if not ($inset == true or $inset == inset) {
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. The box shadow will be inset."
}
$full: $full inset;
}
@if $color == none {
@include experimental(box-shadow, none,

View File

@ -45,7 +45,6 @@ $default-box-flex: 0 !default;
@include experimental(box-flex, $flex,
-moz, -webkit, not -o, not -ms, not -khtml, official
);
display: block;
}
// Default flex group

View File

@ -3,10 +3,14 @@
// Provides a cross-browser method to implement `display: inline-block;`
@mixin inline-block {
@if $legacy-support-for-ie {
& { *display: inline; }
}
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
@if $legacy-support-for-ie {
*vertical-align: auto;
}
}

View File

@ -1,13 +1,4 @@
// Support for mozilla in experimental css3 properties.
$experimental-support-for-mozilla : true !default;
// Support for webkit in experimental css3 properties.
$experimental-support-for-webkit : true !default;
// Support for opera in experimental css3 properties.
$experimental-support-for-opera : true !default;
// Support for microsoft in experimental css3 properties.
$experimental-support-for-microsoft : true !default;
// Support for khtml in experimental css3 properties.
$experimental-support-for-khtml : true !default;
@import "compass/support";
// This mixin provides basic support for CSS3 properties and
// their corresponding experimental CSS2 properties when

View File

@ -1,3 +1,5 @@
@import "compass/support";
// The `zoom` approach generates less CSS but does not validate.
// Set this to `block` to use the display-property to hack the
// element to gain layout.
@ -7,6 +9,7 @@ $default-has-layout-approach: zoom !default;
// to gain the "hasLayout" property in internet explorer.
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
@mixin has-layout($using: $default-has-layout-approach) {
@if $legacy-support-for-ie {
@if $using == zoom {
@include has-layout-zoom;
} @else if $using == block {
@ -16,20 +19,28 @@ $default-has-layout-approach: zoom !default;
@include has-layout-zoom;
}
}
}
@mixin has-layout-zoom {
@if $legacy-support-for-ie {
*zoom: 1;
}
}
@mixin has-layout-block {
@if $legacy-support-for-ie {
// This makes ie6 get layout
display: inline-block;
// and this puts it back to block
& { display: block; }
}
}
// A hack to supply IE6 (and below) with a different property value.
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
@mixin bang-hack($property, $value, $ie6-value) {
@if $legacy-support-for-ie6 {
#{$property}: #{$value} !important;
#{$property}: #{$ie6-value}; }
#{$property}: #{$ie6-value};
}
}

View File

@ -32,6 +32,9 @@
// :last-child is not fully supported
// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
//
// IE8 ignores rules that are included on the same line as :last-child
// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
//
// Setting `$padding` to `false` disables the padding between list elements
@mixin horizontal-list-item($padding: 4px, $direction: left) {
@include no-bullet;
@ -43,7 +46,8 @@
right: $padding;
}
&:first-child, &.first { padding-#{$direction}: 0; }
&:last-child, &.last { padding-#{opposite-position($direction)}: 0; }
&:last-child { padding-#{opposite-position($direction)}: 0; }
&.last { padding-#{opposite-position($direction)}: 0; }
}
}

View File

@ -17,12 +17,18 @@
//
// `:last-child` is not fully supported.
// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).
//
// IE8 ignores rules that are included on the same line as :last-child
// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
@mixin comma-delimited-list {
@include inline-list;
li {
&:after { content: ", "; }
&:last-child, &.last {
&:last-child {
&:after { content: ""; }
}
&.last {
&:after { content: ""; }
}
}

View File

@ -20,8 +20,14 @@
&:last-child,
&.last {
border-right-width: 0px; } }
// IE8 ignores rules that are included on the same line as :last-child
// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
tbody, tfoot {
tr:last-child,
tr:last-child {
th, td {
border-bottom-width: 0px; } }
tr.last {
th, td {
border-bottom-width: 0px; } } } }

View File

@ -18,7 +18,7 @@ module Compass
def directory(dir, options = nil)
options ||= self.options if self.respond_to?(:options)
if File.exists?(dir) && File.directory?(dir)
logger.record :exists, basename(dir) unless options[:quiet]
# logger.record :exists, basename(dir) unless options[:quiet]
elsif File.exists?(dir)
msg = "#{basename(dir)} already exists and is not a directory."
raise Compass::FilesystemConflict.new(msg)

View File

@ -147,7 +147,7 @@ NEXTSTEPS
manifest.each_stylesheet do |stylesheet|
# Skip partials.
next if File.basename(stylesheet.from)[0..0] == "_"
ss_line = " = stylesheet_link_tag '#{stylesheet_prefix}#{stylesheet.to.sub(/\.sass$/,'.css')}'"
ss_line = " = stylesheet_link_tag '#{stylesheet_prefix}#{stylesheet.to.sub(/\.s[ac]ss$/,'.css')}'"
if stylesheet.options[:media]
ss_line += ", :media => '#{stylesheet.options[:media]}'"
end

View File

@ -7,7 +7,7 @@ module Compass
end
def sass_dir_without_default
"src"
"sass"
end
def javascripts_dir_without_default

View File

@ -16,6 +16,12 @@ module Compass
def description(command)
"Emit an imports suitable for passing to the sass command-line."
end
def usage
"Usage: compass imports\n\n" +
"Prints out the imports known to compass.\n"+
"Useful for passing imports to the sass command line:\n" +
" sass -r compass `compass imports` a_file_using_compass.sass"
end
def parse!(arguments)
if arguments.join("").strip.size > 0
raise OptionParser::ParseError, "This command takes no options or arguments."

View File

@ -20,9 +20,10 @@ module Compass
opts.on("--debug [PROPERTY]", "Debug your configuration by printing out details.") do |prop|
self.options[:debug] = prop.nil? ? true : prop.to_sym
end
opts.on("-p PROPERTY", "--property PROPERTY", "Print out the value of the given property") do |prop|
opts.on("-p PROPERTY", "--property PROPERTY", "Print out the value of a particular configuration property") do |prop|
self.options[:display] = prop.to_sym
end
super
end
end
@ -46,7 +47,7 @@ module Compass
if Compass.configuration.respond_to?(options[:display])
puts Compass.configuration.send(options[:display])
else
raise Compass::Error, %Q{ERROR: configuration property '#{options[:display]}' does not exist}
raise Compass::Error, "ERROR: configuration property '#{options[:display]}' does not exist"
end
elsif options[:debug]
puts "Configuration sources:"

View File

@ -95,7 +95,6 @@ module Compass
# Compile one Sass file
def compile(sass_filename, css_filename)
logger.record :compile, basename(sass_filename) unless options[:quiet]
css_content = logger.red do
engine(sass_filename, css_filename).render
end

View File

@ -8,7 +8,7 @@ module Compass
end
def comment_for_relative_assets
unless relative_assets
unless top_level.relative_assets
%q{# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
}
@ -17,6 +17,39 @@ module Compass
end
end
def comment_for_line_comments
if top_level.line_comments
%q{# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
}
else
""
end
end
def comment_for_output_style
unless top_level.output_style_without_default
%Q{# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
}
else
""
end
end
def comment_for_preferred_syntax
if top_level.preferred_syntax == :scss && top_level.sass_dir
%Q{
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass #{top_level.sass_dir} scss && rm -rf sass && mv scss sass
}
else
""
end
end
end
end
end

View File

@ -49,6 +49,10 @@ module Compass::Exec::ProjectOptionsParser
opts.on('--relative-assets', :NONE, 'Make compass asset helpers generate relative urls to assets.') do
self.options[:relative_assets] = true
end
opts.on('--no-line-comments', :NONE, 'Disable line comments.') do
self.options[:line_comments] = false
end
end
end

View File

@ -84,7 +84,7 @@ module Compass
to = targetize(install_location_for_stylesheet(to, options))
contents = File.new(from).read
if preferred_syntax.to_s != from[-4..-1]
logger.record :convert, basename(from)
# logger.record :convert, basename(from)
tree = Sass::Engine.new(contents, Compass.sass_engine_options.merge(:syntax => from[-4..-1].intern)).to_tree
contents = tree.send("to_#{preferred_syntax}")
to[-4..-1] = preferred_syntax.to_s

View File

@ -16,7 +16,8 @@ module Compass
:exists => :green,
:directory => :green,
:identical => :green,
:convert => :green
:convert => :green,
:unchanged => :yellow
}
@ -32,8 +33,9 @@ module Compass
def record(action, *arguments)
msg = ""
msg << color(ACTION_COLORS[action]) if Compass.configuration.color_output
msg << "#{action_padding(action)}#{action} #{arguments.join(' ')}"
msg << "#{action_padding(action)}#{action}"
msg << color(:clear) if Compass.configuration.color_output
msg << " #{arguments.join(' ')}"
log msg
end

View File

@ -45,7 +45,7 @@ module Compass::SassExtensions::Functions::GradientSupport
color_stops = color_list.values.map do |pos|
# have to convert absolute units to percentages for use in color stop functions.
stop = pos.stop
stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units
stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units && max.numerator_units != ["%"]
# Make sure the color stops are specified in the right order.
if last_value && last_value.value > stop.value
raise Sass::SyntaxError.new("Color stops must be specified in increasing order")

View File

@ -21,11 +21,10 @@ class CommandLineTest < Test::Unit::TestCase
def test_basic_install
within_tmp_directory do
compass "--boring", "basic"
assert File.exists?("basic/src/screen.scss")
assert File.exists?("basic/sass/screen.scss")
assert File.exists?("basic/stylesheets/screen.css")
assert_action_performed :directory, "basic/"
assert_action_performed :create, "basic/src/screen.scss"
assert_action_performed :compile, "basic/src/screen.scss"
assert_action_performed :create, "basic/sass/screen.scss"
assert_action_performed :create, "basic/stylesheets/screen.css"
end
end
@ -35,11 +34,10 @@ class CommandLineTest < Test::Unit::TestCase
define_method "test_#{framework.name}_installation" do
within_tmp_directory do
compass *%W(--boring --framework #{framework.name} #{framework.name}_project)
assert File.exists?("#{framework.name}_project/src/screen.scss"), "src/screen.scss is missing. Found: #{Dir.glob("#{framework.name}_project/**/*").join(", ")}"
assert File.exists?("#{framework.name}_project/sass/screen.scss"), "sass/screen.scss is missing. Found: #{Dir.glob("#{framework.name}_project/**/*").join(", ")}"
assert File.exists?("#{framework.name}_project/stylesheets/screen.css")
assert_action_performed :directory, "#{framework.name}_project/"
assert_action_performed :create, "#{framework.name}_project/src/screen.scss"
assert_action_performed :compile, "#{framework.name}_project/src/screen.scss"
assert_action_performed :create, "#{framework.name}_project/sass/screen.scss"
assert_action_performed :create, "#{framework.name}_project/stylesheets/screen.css"
end
end
@ -51,10 +49,9 @@ class CommandLineTest < Test::Unit::TestCase
Dir.chdir "basic" do
# basic update with timestamp caching
compass "--boring"
assert_action_performed :unchanged, "src/screen.scss"
assert_action_performed :unchanged, "sass/screen.scss"
# basic update with force option set
compass "--force", "--boring"
assert_action_performed :compile, "src/screen.scss"
assert_action_performed :identical, "stylesheets/screen.css"
end
end

View File

@ -24,6 +24,14 @@ class ConfigurationTest < Test::Unit::TestCase
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
CONFIG
Compass.add_configuration(contents, "test_parse")
@ -90,9 +98,13 @@ project_path = "/home/chris/my_compass_project"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
additional_import_paths = ["../foo", "/path/to/my/framework"]
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
EXPECTED
assert_equal "/", Compass.configuration.http_path
assert_equal expected_serialization.split("\n"), Compass.configuration.serialize.split("\n")
@ -120,9 +132,13 @@ project_path = "/home/chris/my_compass_project"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
additional_import_paths = ["../foo", "/path/to/my/framework"]
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
EXPECTED
assert_equal "/", Compass.configuration.http_path
assert_equal expected_serialization.split("\n"), Compass.configuration.serialize.split("\n")
@ -142,9 +158,13 @@ EXPECTED
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
sass_options = {:foo=>"bar"}
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
EXPECTED
assert_equal expected_serialization, Compass.configuration.serialize

View File

@ -3,7 +3,6 @@ a {
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
*vertical-align: auto;
margin: 0.7em 0.5em 0.7em 0;
border-width: 1px;
@ -15,6 +14,8 @@ a {
text-decoration: none;
cursor: pointer;
padding: 5px 10px 5px 7px; }
a {
*display: inline; }
a img {
margin: 0 3px -3px 0 !important;
padding: 0;
@ -28,7 +29,6 @@ button {
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
*vertical-align: auto;
margin: 0.7em 0.5em 0.7em 0;
border-width: 1px;
@ -42,6 +42,8 @@ button {
width: auto;
overflow: visible;
padding: 4px 10px 3px 7px; }
button {
*display: inline; }
button img {
margin: 0 3px -3px 0 !important;
padding: 0;

View File

@ -12,8 +12,7 @@
.hbox > * {
-moz-box-flex: 0;
-webkit-box-flex: 0;
box-flex: 0;
display: block; }
box-flex: 0; }
.vbox {
display: -moz-box;
@ -28,14 +27,12 @@
.vbox > * {
-moz-box-flex: 0;
-webkit-box-flex: 0;
box-flex: 0;
display: block; }
box-flex: 0; }
.spacer {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
display: block; }
box-flex: 1; }
.reverse {
-moz-box-direction: reverse;
@ -45,20 +42,17 @@
.box-flex-0 {
-moz-box-flex: 0;
-webkit-box-flex: 0;
box-flex: 0;
display: block; }
box-flex: 0; }
.box-flex-1 {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
display: block; }
box-flex: 1; }
.box-flex-2 {
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
display: block; }
box-flex: 2; }
.box-flex-group-0 {
-moz-box-flex-group: 0;

View File

@ -40,20 +40,25 @@
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
.linear-9 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
.linear-10 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
.linear-11 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(90%, #000000), color-stop(100%, #aaaaaa));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
.linear-12 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%);
background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
.radial-1 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
@ -90,6 +95,6 @@
background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 127, 127, 0.5)), color-stop(100%, #ffffff));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }

View File

@ -16,7 +16,9 @@ ul.horizontal {
padding-right: 4px; }
ul.horizontal li:first-child, ul.horizontal li.first {
padding-left: 0; }
ul.horizontal li:last-child, ul.horizontal li.last {
ul.horizontal li:last-child {
padding-right: 0; }
ul.horizontal li.last {
padding-right: 0; }
ul.wide-horizontal {
@ -37,7 +39,9 @@ ul.wide-horizontal {
padding-right: 10px; }
ul.wide-horizontal li:first-child, ul.wide-horizontal li.first {
padding-left: 0; }
ul.wide-horizontal li:last-child, ul.wide-horizontal li.last {
ul.wide-horizontal li:last-child {
padding-right: 0; }
ul.wide-horizontal li.last {
padding-right: 0; }
ul.right-horizontal {
@ -58,7 +62,9 @@ ul.right-horizontal {
padding-right: 4px; }
ul.right-horizontal li:first-child, ul.right-horizontal li.first {
padding-right: 0; }
ul.right-horizontal li:last-child, ul.right-horizontal li.last {
ul.right-horizontal li:last-child {
padding-left: 0; }
ul.right-horizontal li.last {
padding-left: 0; }
ul.no-padding {
@ -91,9 +97,10 @@ ul.inline-block {
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
*vertical-align: auto;
white-space: nowrap; }
ul.inline-block li {
*display: inline; }
ul.wide-inline-block {
margin: 0;
@ -110,11 +117,12 @@ ul.wide-inline-block {
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
*vertical-align: auto;
white-space: nowrap;
padding-left: 10px;
padding-right: 10px; }
ul.wide-inline-block li {
*display: inline; }
ul.inline {
list-style-type: none; }
@ -131,7 +139,9 @@ ul.comma {
display: inline; }
ul.comma li:after {
content: ", "; }
ul.comma li:last-child:after, ul.comma li.last:after {
ul.comma li:last-child:after {
content: ""; }
ul.comma li.last:after {
content: ""; }
ul.no-bullets {

View File

@ -33,6 +33,9 @@
.linear-11
+linear-gradient(color_stops(#dddddd 40%, black, #aaaaaa 50%))
.linear-12
+linear-gradient(color-stops(white, blue 33%, black 67%))
.radial-1
// A default radial gradient:
A centered gradient having the shape of the container (aka ellipse)