Stack Overflow
Stack Overflow

Questions tagged [compass-sass]

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.

Overview

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup.

Features

  1. Experience cleaner markup without presentational classes.
  2. It’s chock full of the web’s best reusable patterns.
  3. It makes creating sprites a breeze.
  4. Compass mixins make CSS3 easy.
  5. Create beautiful typographic rhythms.
  6. Download and create extensions with ease.

Links

Related tags

1945 questions
20
votes
3 answers

Compass multiple css transitions

How can one do multiple css transitions like this Jsfiddle with Compass? What I am trying to do is basecly write this code below with Compass. -webkit-transition: top 0.3s ease-out, background .9s .5s ease-out; -moz-transition: top 0.3s…
halliewuud
  • 2,735
  • 6
  • 30
  • 41
19
votes
1 answer

Grunt doesn't launch : ">> ReferenceError: grunt is not defined"

I'm new to NodeJS and Grunt and I'm struggling to make this work. Here's what I get : $> grunt Loading "Gruntfile.js" tasks...ERROR >> ReferenceError: grunt is not defined Warning: Task "default" not found. Use --force to continue. Aborted due to…
Bertrand
  • 1,718
  • 2
  • 13
  • 24
19
votes
2 answers

SASS/SCSS object key value loop

Take a look at this example: @include font-face('Entypo', font-files('entypo.woff')); .icon { display: inline; font: 400 40px/40px Entypo; } .icon-star { @extend .icon; &:after { content: "\2605"; } } .icon-lightning { @extend…
onlineracoon
  • 2,932
  • 5
  • 47
  • 66
19
votes
3 answers

SASS/Compass Transitions

Is it possible to use Compass or SASS to output the following CSS transition that will output all the various vendor prefixes: -webkit-transition: all 0.3s ease-in-out; Can anyone point me to the correct library?
dagda1
  • 26,856
  • 59
  • 237
  • 450
18
votes
2 answers

How to have Assetic + sass work with Symfony2 in Windows?

I'm trying to get Assetic to run within Symfony 2.0.11 in order to use sass for css files. I've been fiddling around that issue for hours, and from what I gather the current assetic version (1.0.2) is screwed up and just can't work in windows. I…
mlarcher
  • 447
  • 1
  • 7
  • 16
18
votes
5 answers

How to add Compass syntax support to Jetbrains PhpStorm?

I'm using JetBrains PhpStorm, which is probably the most epic IDE I've ever used. The question is simple. How do I add Compass syntax support to it? I've got it installed, it renders and works, but PhpStorm still complains about undefined imports…
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
18
votes
8 answers

sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`

In section 2.2.2, "CSS and Sass", I'm told to put image-url('delete.png') in my sass. And so I have. However, it is generating CSS like background-image: url(/images/delete.png) instead of the thing that I'm told everywhere it should be generating,…
chadoh
  • 4,343
  • 6
  • 39
  • 64
17
votes
3 answers

How to use Compass filter mixin?

I'm trying to use filter mixin this way in SCSS: a { @include filter(grayscale(100%)); } But when I compile, I got this error: Undefined mixin 'filter'. I'm using the latest version of this Gem with Rails…
Caio Tarifa
  • 5,973
  • 11
  • 46
  • 73
16
votes
2 answers

How to handle scss and css in git?

I'm very new to scss and css so please bear with me. I've done some research but found conflicting information. I have 2 freelancers working on my project. Both freelancers make changes to: style.css style.css.map style.scss Everytime I merge…
Boosted_d16
  • 13,340
  • 35
  • 98
  • 158
16
votes
2 answers

Sass Mixin Error for IE specific filters like -ms-filter

I'm trying to make a button mixin like this: =default_button(!lighter, !darker) :border= 1px !lighter solid :background-color #e3e3e3 :background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, #d0581e …
kinet
  • 1,790
  • 3
  • 20
  • 32
16
votes
4 answers

How to use compass in phpstorm?

I'm aware of this question: How to add Compass syntax support to Jetbrains PhpStorm? but it doesn't help. I just opted for copying the files over, much easier in my project. But phpstorm still complains about compass. Without compass it compiles…
Tjorriemorrie
  • 16,818
  • 20
  • 89
  • 131
15
votes
1 answer

Background images path in Sass and Compass

This is mentioned in config.rb file images_dir = "images" I use 2 folder for images in my projects inside images folder images images/background/ images/content/ If any images is inside images/background/ folder then how i should add the path for…
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
15
votes
1 answer

How to access absolute path to Gruntfile within Gruntfile?

My Gruntfile.js contains a task for Compass: grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // FILE PATHS (custom) dir: { css: 'resources/styles/css', fonts: 'resources/fonts', html: …
Dan
  • 423
  • 4
  • 9
14
votes
4 answers

How to remove the hash from Compass's generated sprite image filenames?

Compass uses chunky_png to render the sprites. It adds a hash to the end of the file to force caches to download the new image sprites. Is there a way to turn this cache busting off?
Thomas Schultz
  • 2,446
  • 3
  • 25
  • 36
14
votes
2 answers

Compass Transform Mixin

I have the following CSS: .progress-bar { transform: rotate(0deg) scale(1) skew(-50deg) translate(2px); -webkit-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px); -moz-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px); …
Ryan
  • 6,027
  • 16
  • 52
  • 89
1 2 3
…
99 100