From *Sass and Compass in Action*, by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis:

&gt; ### 1.3 What is Compass?
&gt;
&gt; Compass helps Sass authors write smarter stylesheets and empowers a community
of designers and developers to create and share powerful frameworks. Put simply,
**Compass is a Sass framework**, designed to make the work of styling the web
smooth and efficient. Much like Rails as a web application framework for Ruby,
**Compass is a collection of helpful tools and battle-tested best practices for Sass**.

(emphasis added)

Compass is an extension of Sass (as in Compass requires Sass).  It has its own compiler (instead of `sass --watch`, you use `compass watch`).  It has a large collection of mixins and functions that you&#39;ll find incredibly useful (while commonly pointed to for generating vendor prefixed CSS3 properties, it can do things like automatically generate spritemaps and the CSS to go with them).

Compass is also built in such a way that you can bundle your own *bootstrap* type library for easily deploying in multiple projects without the need to copy/paste the source for it in each one.

When I attempt to connect to a MySQL server from PHP, I see the following error:

&gt; Deprecated: The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /path/to/filename.php on line 123

The code on the referenced line is:

    mysql_connect($server, $username, $password);

I am certain that the arguments are correct, and this exact code has been working for years without problem.  Indeed, I obtained it from a well-sourced tutorial on PHP.

1. Why is this happening?

2. How can I fix it?

3. I understand that it&#39;s possible to suppress deprecation errors by setting `error_reporting` in `php.ini` to exclude `E_DEPRECATED`:

        error_reporting = E_ALL ^ E_DEPRECATED

 What will happen if I do that?

The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead

I have the following directory structure:

	/some_project
		source.js
		package.json

I would like to install the dependencies for some_project. 
I know I could cd into some_project and then run npm install 

But I was wondering if it&#39;s possible without changing the directory ?
Something like 
	
	npm install some_project/package.json 



	

npm - install dependencies for a package in a different folder?

I would like to start using Compass and Sass to speed up development. At the moment, I have installed Sass on a mac and instructed it to watch a Scss file for input, and a CSS file for generated output.

From many articles, Sass is used with Compass, I&#39;m wondering why that is the case and just what does Compass add that Sass comes without? If you can give an example, the better.

What are Compass and Sass and how do they differ?

<p>I would like to start using Compass and Sass to speed up development. At the moment, I have installed Sass on a mac and instructed it to watch a Scss file for input, and a CSS file for generated output.</p>
<p>From many articles, Sass is used with Compass, I'm wondering why that is the case and just what does Compass add that Sass comes without? If you can give an example, the better.</p>


In angularjs you have the [tag ng-src](http://docs.angularjs.org/api/ng.directive:ngSrc) which has the purpose that you won&#39;t receive an error for an invalid url before angularjs gets to evaluate the variables placed in between `{{` and `}}`.

The problem is that I use quite some DIV&#39;s with a `background-image` set to an url. I do this because of the excellent CSS3 property `background-size` which crops the image to the exact size of the DIV.

The only problem is that I receive a lot of errors for the exact same reason they created a ng-src tag: I have some variables in the url and the browser thinks the image doesn&#39;t exist.

I realize that there is a possibility of writing a crude `{{&quot;style=&#39;background-image:url(myVariableUrl)&#39;&quot;}}`, but this seems &#39;dirty&#39;.

I&#39;ve searched a lot and can&#39;t find the right way to do this. My app is becoming a mess because of all of these errors.



angularjs: ng-src equivalent for background-image:url(...)

I want to implement twitter bootstrap dropdown menu, here&#39;s my code:

    &lt;span class=&quot;dropdown&quot;&gt; 
    &lt;a href=&quot;#menu1&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; &gt;&lt;img class=&quot;left&quot; src=&quot;/static/img/topmenu_preferences.png&quot; /&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;a&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;b&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;c&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;d&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/span&gt;

Dropdown works good, my dropdown is placed next to right edge of the screen and when I click my dropdown-toggle, the list goes outside the screen. It looks like on the screen:

![enter image description here][1]

How can i fix it?


  [1]: http://i.stack.imgur.com/I7cor.png

Twitter bootstrap dropdown goes outside the screen

Q1. Suppose I want to alter the look of each &quot;item&quot; that a user marks for deletion before the main &quot;delete&quot; button is pressed.  (This immediate visual feedback should eliminate the need for the proverbial &quot;are you sure?&quot; dialog box.) The user will check checkboxes to indicate which items should be deleted.  If a checkbox is unchecked, that item should revert back to its normal look.

What&#39;s the best way to apply or remove the CSS styling?

Q2. Suppose I want to allow each user to personalize how my site is presented.  E.g., select from a fixed set of font sizes, allow user-definable foreground and background colors, etc.

What&#39;s the best way to apply the CSS styling the user selects/inputs?


How do I conditionally apply CSS styles in AngularJS?

Since you can underline any text in CSS like so:

```css
h4 {
  text-decoration: underline;
}
```

How can you also then edit the &#39;line&#39; that is drawn, the color you get on the line is easily specified as `color: red` but how does one edit the height of the line, i.e. the thickness?

Edit line thickness of CSS &#39;underline&#39; attribute

I have a fluid layout using Twitter&#39;s bootstrap, wherein I have a row with two columns.  The first column has a lot of content, which I want to fill the span normally.  The second column just has a button and some text, which I want to bottom align relative to the cell in the first column.  

Here&#39;s what I have:
    
    -row-fluid-------------------------------------
    +-span6----------+ +-span6----------+
    |                | |short content   |
    | content        | +----------------+
    | that           | 
    | is tall        |    
    |                |
    +----------------+
    -----------------------------------------------

Here&#39;s what I want:
    
    -row-fluid-------------------------------------
    +-span6----------+
    |                |
    | content        |
    | that           | 
    | is tall        | +-span6----------+    
    |                | |short content   |
    +----------------+ +----------------+
    -----------------------------------------------

I&#39;ve seen solutions that make the first span an absolute height, and position the second span relative to it, but a solution where I didn&#39;t have to specify the absolute height of my divs would be preferred.  I&#39;m also open to a complete rethink of how to achieve the same effect.  I&#39;m not married to this use of the scaffolding, it just seemed to make the most sense to me.

**This layout as a fiddle:**

http://jsfiddle.net/ryansturmer/A7buv/3/



How do I bottom-align grid elements in bootstrap fluid layout

I&#39;ve been refactoring my CSS to a SASS style sheet recently. I&#39;m using the [Mindscape Web Workbench extension][1] for VS2012, which re-generates the CSS each time you save your SCSS. I started with code similar to this:

&lt;!-- language-all: css --&gt;

    /* Starting point: */
    h1 { font-size: 1.5em; /* 24px &#247; 16px */ }

Then I tried to refactor it first to this:

    /* Recfator: */
    h1 { font-size: (24px / 16px)em; }

But this unfortunately produces:

    /* Result: */
    h1 { font-size: 1.5 em; }              /* doesn&#39;t work, gives &quot;1.5 em&quot; */

Notice the **extra space**, which I don&#39;t want there. I&#39;ve tried several alternatives, here are a few:

    h1 { font-size: (24/16)em; }           /* doesn&#39;t work, gives &quot;1.5 em&quot; */
    h2 { font-size: 24 / 16em; }           /* doesn&#39;t work, gives &quot;24/16em&quot; */
    h3 { font-size: (24px / 16px) * 1em; } /* works but &quot;* 1 em&quot; feels unnecessary */
    h4 { font-size: (24em) / 16; }         /* works, but without &quot;px&quot; it&#39;s not 
                                              really conveying what I mean to say */

I&#39;ve also tried these variants with variables (because I want those anyways), but that didn&#39;t change the situation much. To keep the examples in this question sleek I&#39;ve left out variables. However, I&#39;d happily accept a solution that relies on using variables (in a clean way).

I&#39;ve gone through the [relevant SASS documenation on &#39;/&#39;][2], and appreciate that this is a tough one for SASS because the &#39;/&#39; character already has a meaning in basic CSS. Either way, I was hoping for a clean solution. Am I missing something here?

PS. [This blogpost][3] does offer one solution, using a user defined function. That seems a bit heavy-weight though, so I&#39;m interested if there&#39;s &quot;cleaner&quot; solutions in line with my attempts above. If someone can explain the &quot;function approach&quot; is the better (or even only) solution then I&#39;ll accept that as an answer too.

PS. [This related question][4] seems to be about the same thing, though that one specically wants to do further calculations. [The accepted answer there][5] is my third workaround (multiplying by `1em`), but I&#39;d love to know if there&#39;s a different (cleaner) way if I&#39;m willing to forego the ability to do further calculations. Perhaps the method mentioned in said question (&quot;interpolation&quot;) is useful for me?

----------
***Bottom line:** how can you cleanly append the unit type (e.g. `em`) to the result of a calculation in SASS?*


  [1]: http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a
  [2]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division-and-slash
  [3]: http://erskinelabs.com/calculating-ems-scss/
  [4]: https://stackoverflow.com/q/15513395/419956
  [5]: https://stackoverflow.com/a/15514279/419956

Append unit type to the result of a calculation in Sass

I would like to include a sass compiler in my Flask application. Is there a generally accepted way of doing this?

Using sass with Flask and jinja2

I have an item class and a compact &quot;modifier&quot; class:

    .item { ... }
    .item.compact { /* styles to make .item smaller */ }

This is fine. However, I&#39;d like to add a `@media` query that forces the `.item` class to be compact when the screen is small enough.

On first thought, this is what I tried to do:

    .item { ... }
    .item.compact { ... }
    @media (max-width: 600px) {
      .item { @extend .item.compact; }
    }

But this generates the following error:

&gt; You may not @extend an outer selector from within @media. You may only
&gt; @extend selectors within the same directive.


How would I accomplish this using SASS without having to resort to copy/pasting styles?

Extending selectors from within media queries with Sass

I have started trying out Sass for my css work. In the directory where my Css file resides I see a &#39;.sass-cache&#39; folder too. Can any one tell me why is this folder created and is it safe if I delete it.

thanks,

Why does Sass cache folder get created

I dont know how to include SCSS file in my website but I have completely developed .scss file using notepad. Please let me know how to include it in my website?

How to include SCSS file in HTML

I&#39;m having a problem with my compass watch command - it worked fine up until a few days ago. I have made no changes to my config files.

I reinstalled Compass, used rvm to update Ruby. I checked my custom_require.rb file but I really don&#39;t know what to look for. It seems to be trying to load the file &quot;sass/script/node&quot; somewhere and from `http://sass-lang.com/docs/yardoc/Sass/Script/Node.html` I gather the filepath - but I have nothing there. 

    /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:60:in `require&#39;: cannot load such file -- sass/script/node (LoadError)
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:60:in `rescue in require&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:35:in `require&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in `&lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:2:in `block in &lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:in `each&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:in `&lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass/sass_extensions.rb:9:in `&lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass.rb:5:in `block in &lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass.rb:4:in `each&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/lib/compass.rb:4:in `&lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb:55:in `require&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/bin/compass:20:in `block in &lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/bin/compass:8:in `fallback_load_path&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/bin/compass:19:in `&lt;top (required)&gt;&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/bin/compass:19:in `load&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/bin/compass:19:in `&lt;main&gt;&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/bin/ruby_noexec_wrapper:14:in `eval&#39;
      from /Users/sampurcell/.rvm/gems/ruby-1.9.3-p194/bin/ruby_noexec_wrapper:14:in `&lt;main&gt;&#39;


Anyone have any ideas?

Why does &quot;compass watch&quot; say it cannot load sass/script/node (LoadError)?

I&#39;m trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:

    @import &#39;jqtouch&#39;;

    // Override variables
    $base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation ([Official Guide][1]) and in the jqtouch.scss file, which I import for costumizing.

I&#39;m running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.

I&#39;ve tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.

The ruby config file for compass seems to be unsuspicious.

Does anyone have an idea what goes wrong in the process so that my override values are ignored?


  [1]: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/

How to overwrite SCSS variables when compiling to CSS

When I attempt to install the latest version of compass (https://rubygems.org/gems/compass/versions/1.0.0.alpha.17), I get the following error.


    ERROR:  Error installing compass:
	ERROR: Failed to build gem native extension.

     ERROR:  Error installing compass:
      ERROR: Failed to build gem native extension.

        /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby extconf.rb
    checking for ffi.h... no
    checking for ffi.h in /usr/local/include,/usr/include/ffi... yes
    checking for ffi_call() in -lffi... yes
    checking for ffi_prep_closure()... yes
    checking for ffi_raw_call()... no
    checking for rb_thread_blocking_region()... yes
    checking for rb_thread_call_with_gvl()... yes
    checking for rb_thread_call_without_gvl()... yes
    checking for ffi_prep_cif_var()... no
    creating extconf.h
    creating Makefile

    make &quot;DESTDIR=&quot; clean

    make &quot;DESTDIR=&quot;
    compiling AbstractMemory.c
    compiling ArrayType.c
    compiling Buffer.c
    compiling Call.c
    Call.c:303:5: warning: implicit declaration of function &#39;rb_thread_call_without_gvl&#39; is invalid in C99 [-Wimplicit-function-declaration]
        rbffi_thread_blocking_region(call_blocking_function, data, (void *) -1, NULL);
        ^
    ./Thread.h:78:39: note: expanded from macro &#39;rbffi_thread_blocking_region&#39;
    # define rbffi_thread_blocking_region rb_thread_call_without_gvl
                                          ^
    1 warning generated.
    compiling ClosurePool.c
    compiling DataConverter.c
    DataConverter.c:43:1: warning: control may reach end of non-void function [-Wreturn-type]
    }
    ^
    1 warning generated.
    compiling DynamicLibrary.c
    compiling ffi.c
    compiling Function.c
    Function.c:479:33: warning: incompatible pointer types passing &#39;VALUE (void *)&#39; to parameter of type &#39;void *(*)(void *)&#39; [-Wincompatible-pointer-types]
            rb_thread_call_with_gvl(callback_with_gvl, &amp;cb);
                                    ^~~~~~~~~~~~~~~~~
    Function.c:102:46: note: passing argument to parameter &#39;func&#39; here
    extern void *rb_thread_call_with_gvl(void *(*func)(void *), void *data1);
                                                 ^
    Function.c:563:9: warning: implicit declaration of function &#39;rb_thread_call_without_gvl&#39; is invalid in C99 [-Wimplicit-function-declaration]
            rb_thread_call_without_gvl(async_cb_wait, &amp;w, async_cb_stop, &amp;w);
            ^
    Function.c:738:1: warning: control reaches end of non-void function [-Wreturn-type]
    }
    ^
    3 warnings generated.
    compiling FunctionInfo.c
    compiling LastError.c
    compiling LongDouble.c
    compiling MappedType.c
    compiling MemoryPointer.c
    compiling MethodHandle.c
    compiling Platform.c
    compiling Pointer.c
    compiling Struct.c
    compiling StructByReference.c
    compiling StructByValue.c
    compiling StructLayout.c
    compiling Thread.c
    compiling Type.c
    compiling Types.c
    compiling Variadic.c
    linking shared-object ffi_c.bundle
    clang: error: unknown argument: &#39;-multiply_definedsuppress&#39; [-Wunused-command-line-argument-hard-error-in-future]
    clang: note: this will be a hard error (cannot be downgraded to a warning) in the future
    make: *** [ffi_c.bundle] Error 1

    make failed, exit code 2

    Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.3 for inspection.
    Results logged to /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-13/2.0.0/ffi-1.9.3/gem_make.out


What&#39;s going on here? How do I install the latest compass without error?

Failed to build gem native extension (installing Compass)

I have a `:not` css selector in SASS mixin but it doesn&#39;t do anything:

**Code Snippet:**

    @mixin dropdown-pos($pos:right) {
      &amp;:not(.notip) {
        @if $comp-tip == true{
          @if $pos == right {
            top:$dropdown-width * -0.6;
            @include tip($pos:$pos);
          }
        }
      }
      &amp;.notip {
        @if $pos == right {
          top: 0;
          left:$dropdown-width * 0.8;
        }
      }
    }

The `.notip` class is being generated but no CSS is being generated for `:not(.notip)`.


Content Type	Original Author	Original Content on Stackoverflow
Question	Chiko	View Question on Stackoverflow
Solution 1 - Css	Jonathan de M.	View Answer on Stackoverflow
Solution 2 - Css	cimmanon	View Answer on Stackoverflow

What are Compass and Sass and how do they differ?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

npm - install dependencies for a package in a different folder?

The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead

Attributions