Skip to content

Commit

Permalink
makes SASS be Sass
Browse files Browse the repository at this point in the history
  • Loading branch information
Stu Robson committed Jan 8, 2015
1 parent a818354 commit 39bfb86
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 17 deletions.
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

[Demo](http://ianlunn.github.io/Hover) |
[Tutorial](http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/)
Expand Down Expand Up @@ -56,7 +56,7 @@ Example element after applying Hover.css effect:
<a href="#" class="hvr-grow">Add to Basket</a>
```

**Note**: As of `2.0.0` all Hover.css class names are prefixed with `hvr-` to prevent conflicts with other libraries/stylesheets. If using SASS/LESS, this can easily be changed using the `$nameSpace`/`@nameSpace` variable in `scss/_options.scss` or `less/_options.less`.
**Note**: As of `2.0.0` all Hover.css class names are prefixed with `hvr-` to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the `$nameSpace`/`@nameSpace` variable in `scss/_options.scss` or `less/_options.less`.

### Reference Hover.css

Expand Down Expand Up @@ -93,7 +93,7 @@ display: inline-block;
vertical-align: middle;
```

Should you wish to override this behavior, either remove the above CSS from Hover.css or change the `display` property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the SASS/LESS version of Hover.css, you can remove/comment out the `forceBlockLevel()` mixin found in `scss/_hacks.scss` or `less/_hacks.less`.
Should you wish to override this behavior, either remove the above CSS from Hover.css or change the `display` property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the Sass/LESS version of Hover.css, you can remove/comment out the `forceBlockLevel()` mixin found in `scss/_hacks.scss` or `less/_hacks.less`.

For more information about Transformable elements, see the [CSS Transforms Module](http://www.w3.org/TR/css3-transforms/#transformable-element).

Expand Down Expand Up @@ -146,8 +146,8 @@ The project consists of the following folders and files:
### scss/less

- **effects** - Contains each individual effect sorted into categorized folders
- **_hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less** - SASS/LESS Utilities
- **hover.scss/hover.less** - Development version of Hover.css in SASS and LESS flavours
- **_hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less** - Sass/LESS Utilities
- **hover.scss/hover.less** - Development version of Hover.css in Sass and LESS flavours

### Other

Expand All @@ -167,15 +167,15 @@ Aside from the above mentioned browsers, Hover.css is supported across all major

## Using Grunt for Development

Grunt is non-essential but can speed up development. With [Grunt installed](http://gruntjs.com/getting-started), run `grunt` from the command line to set up a development server accessed at [http://127.0.0.1:8000/](http://127.0.0.1:8000/). With Grunt running, SASS or LESS will be preprocessed (depending on whether you work out of the `scss` or `less` folder) and CSS files will be minified.
Grunt is non-essential but can speed up development. With [Grunt installed](http://gruntjs.com/getting-started), run `grunt` from the command line to set up a development server accessed at [http://127.0.0.1:8000/](http://127.0.0.1:8000/). With Grunt running, Sass or LESS will be preprocessed (depending on whether you work out of the `scss` or `less` folder) and CSS files will be minified.

**Note:** Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. The `prefixed(property, value)` SASS/LESS mixin should be used for browser prefixing instead. See [Using SASS/LESS for Development](#using-sassless-for-development) and [Using LESS for Development].
**Note:** Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. The `prefixed(property, value)` Sass/LESS mixin should be used for browser prefixing instead. See [Using Sass/LESS for Development](#using-Sassless-for-development) and [Using LESS for Development].

## Using SASS/LESS for Development
## Using Sass/LESS for Development

SASS/LESS are non-essential but can speed up development. Preprocess SASS/LESS with your favourite software or the environment provided via [Grunt](#using-grunt-for-development).
Sass/LESS are non-essential but can speed up development. Preprocess Sass/LESS with your favourite software or the environment provided via [Grunt](#using-grunt-for-development).

SASS/LESS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the `effects` directory. Hover.css also uses the following `.scss` and `.less` files:
Sass/LESS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the `effects` directory. Hover.css also uses the following `.scss` and `.less` files:

### _hacks
Contains hacks (undesirable but usually necessary lines of code) applied to certain effects. [Hacks explained here](https://github.com/IanLunn/Hover/wiki/Hacks-Explained).
Expand All @@ -185,7 +185,7 @@ Contains `prefixed` and `keyframes` mixins that apply the necessary prefixes you

Properties can be prefixed like so:

- SASS:
- Sass:
```css
@include prefixed(transition-duration, .3s);
```
Expand All @@ -198,7 +198,7 @@ The `prefixed` mixin is passed the property you want to prefix, followed by its

Keyframes can be prefixed like so:

- SASS:
- Sass:
```css
@include keyframes(my-animation) {
to {
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"authors": [
"Ian Lunn <hello@ianlunn.co.uk>"
],
"description": "A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.",
"description": "A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.",
"main": "css/hover.css",
"keywords": [
"Hover",
Expand Down
2 changes: 1 addition & 1 deletion css/hover-min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/hover.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
* Hover.css Copyright Ian Lunn 2014. Generated with SASS.
* Hover.css Copyright Ian Lunn 2014. Generated with Sass.
*/
/* 2D TRANSITIONS */
/* Grow */
Expand Down
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

<h1>Hover.css <a href="https://github.com/IanLunn/Hover/releases" class="sup" title="View release history">v2</a></h1>

<p class="intro">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.</p>
<p class="intro">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.</p>

<div class="social aligncenter">
<div class="social-button">
Expand Down Expand Up @@ -181,7 +181,7 @@ <h2>Curls</h2>
<div class="about">
<h2>About Hover.css</h2>

<p>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, SASS, and LESS flavours.</p>
<p>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.</p>

<p>For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, <a href="https://github.com/IanLunn/Hover/wiki/Hacks-Explained">please read the FAQ</a>.</p>

Expand Down

0 comments on commit 39bfb86

Please sign in to comment.