    sass --watch a.scss:a.css --style compressed


**Consult the documentation for updates:**

 - https://sass-lang.com/guide
 - https://sass-lang.com/documentation/cli/dart-sass#style

If you are using [JetBrains][1] editors like [IntelliJ IDEA][2], [PhpStorm][3], [WebStorm][4] etc. Use the following settings in Settings &gt; File Watchers.
[![enter image description here][5]][5]

1. Convert **`style.scss`** to **`style.css`** set the arguments

        --no-cache --update $FileName$:$FileNameWithoutExtension$.css
    and output paths to refresh
    
        $FileNameWithoutExtension$.css

2. Convert **`style.scss`** to compressed **`style.min.css`** set the arguments

        --no-cache --update $FileName$:$FileNameWithoutExtension$.min.css --style compressed

    and output paths to refresh

        $FileNameWithoutExtension$.min.css

  [1]: https://www.jetbrains.com/
  [2]: https://www.jetbrains.com/idea/
  [3]: https://www.jetbrains.com/phpstorm/
  [4]: https://www.jetbrains.com/webstorm/
  [5]: http://i.stack.imgur.com/OehIj.png

If you&#39;re using compass:

    compass watch --output-style compressed

**There are some different way to do that**

    sass --watch --style=compressed main.scss main.css

or

    sass --watch a.scss:a.css --style compressed

or

By Using visual studio code extension **live sass compiler**


[see more][1]


  [1]: https://sass-lang.com/documentation/cli/dart-sass#style

Process.platform returns &quot;win32&quot; for Windows. On Windows a user&#39;s home directory might be C:\Users\[USERNAME] or C:\Documents and Settings\[USERNAME] depending on which version of Windows is being used. On Unix this isn&#39;t an issue.

Node.js - Find home directory in platform agnostic way

It&#39;s been clearly put, although opinion none the less, that forgoing curly brackets on a single line `if` statement is not ideal for maintainability and readability.

But what about this?

    if (lemons) { document.write(&quot;foo gave me a bar&quot;); }

It&#39;s even more compressed, and if expanded, the curly brackets won&#39;t be forgotten. Are there any blatant problems, and if not, what are the considerations? I feel like it&#39;s still very readable, at least as much as a ternary operator anyway. It seems to me like ternary operators aren&#39;t suggested as much due to readability, although I feel like that that conclusion isn&#39;t quite as unanimous.

The evil twin in me wants to suggest this, although the syntax obviously isn&#39;t meant for it, and is probably just a bad idea.

    (syntax) ? document.write(&quot;My evil twin emerges&quot;): &quot;&quot;;


JavaScript single line &#39;if&#39; statement - best syntax, this alternative?

Is there a way to run:

 `sass --watch a.scss:a.css`

but have `a.css` end up being minified?

How would I avoid having to run a separate minification step as I compile my stylesheet?

sass --watch with automatic minify?

Is there a way to run:
<code>sass --watch a.scss:a.css</code>
but have <code>a.css</code> end up being minified?
How would I avoid having to run a separate minification step as I compile my stylesheet?

Is there any functional difference between the CSS 2.1 `:after` and the CSS 3 `::after` pseudo-selectors (other than `::after` not being supported in older browsers)?  Is there any practical reason to use the newer specification?

:after vs. ::after

I am using an HTML `&lt;table&gt;` and I want to align the text of `&lt;td&gt;` to the center in each cell.

How do I center align the text horizontally and vertically?

How to center the contents of an HTML table?

What is the *best* way to preserve white space in HTML?  We have a lot of pages that bring down data from our database, and the data may have multiple spaces in it.  The rendered HTML elements that hold the data vary from anchor tags `(&lt;a&gt;), spans (&lt;span&gt;), table rows (&lt;tr&gt;, &lt;td&gt;, etc.`

The easiest thing to do right now would be to add a global css class like so:

    body a, span, tr, td { white-space: pre; }

I&#39;m wondering if there is a better way to implement this *without* assigning a class to each individual HTML element.


HTML/CSS - Best practice for preserving white space on certain elements?

I have a :before for an opening &#39;quote&#39; and an :after for a closing quote.

Now what I want is an :after:after for the &#39;cite&#39; reference but I cant get it to work.

Does anyone know if this is possible?

My code so far:-

    blockquote:before { content: &#39;\201C&#39;; }
    blockquote:after { content: &#39;\201D&#39;; }
    
    blockquote {
      font-size: 22px;
      line-height: 24px;
      text-indent:60px;
    }
    blockquote:before {
      font-size: 170px;
      margin-left: -136px;
      margin-top: 50px;
      opacity: 0.2;
      position: absolute;
      overflow:visible;
      float:left;
      width:135px;
    }
    blockquote:after {
      float: right;
      font-size: 170px;
      margin-right: 35px;
      margin-top: 33px;
      opacity: 0.2;
      overflow:visible;
      width:135px;
    }
    blockquote[cite]:after:after {
        display: block;
        text-align: right;
        content: &quot;\2014\ &quot; attr(cite);
        font-style: normal;
        font-size: 0.8em;
        }
        



Nesting pseudo-elements inside pseudo-elements

I am building a site using Twitter Bootstrap and have a 40px fixed position nav bar at the top of the page. I&#39;ve set some anchors to jump to the various H1&#39;s throughout the page, but the anchor targets end up partially obscured by the nav bar. Is there a way to offset the links to account for the navbar? I&#39;ve seen one suggestion to put each anchor inside its own offset div, but this seems like a lot of duplicative code and I&#39;m wondering if there is another way.  

If possible, I&#39;d prefer to do this just with CSS rather than jQuery, but any solution would be welcome. 

    .topbar {
       height: 40px;
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 10000;
       overflow: visible;
    }

    body {
      padding-top: 40px; 
         /* 40px to make the container go all the way to the bottom of the topbar */
         font-family: &#39;Proxima&#39;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
         font-size: 14px;
         line-height: 18px;
	      font-weight: normal;
	      color: #555;
	      background-color: #eee;
     }


Thanks! 

Fixed position navbar obscures anchors

I&#39;m trying to combine the use of a Sass variable with @media queries as follows:

    $base_width:1160px;

    @media screen and (max-width: 1170px) {$base_width: 960px;}
    @media screen and (min-width: 1171px) {$base_width: 1160px;}

`$base_width` is then defined at various points in the stylesheet width percentage-based measurements to produce fluid layouts.

When I do this, the variable seems to be recognized properly but the conditions for the media query are not.  For example, the above code produces an 1160px layout regardless of screen width.  If I flip-flop the @media statements like so:

    @media screen and (min-width: 1171px) {$base_width: 1160px;}
    @media screen and (max-width: 1170px) {$base_width: 960px;}

It produces a 960px layout, again regardless of screen width.  Also note that if I remove the first line of `$base_width: 1160px;` it returns an error for an undefined variable.  Any ideas what I&#39;m missing?

Using Sass Variables with CSS3 Media Queries

So, I have an `app/assets/stylesheets/` directory structure that looks something like this:

       |-dialogs
       |-mixins
       |---buttons
       |---gradients
       |---vendor_support
       |---widgets
       |-pages
       |-structure
       |-ui_elements

In each directory, there are multiple sass partials (usually *.css.scss, but one or two *.css.scss.erb).

I might be assuming a lot, but rails SHOULD automatically compile all the files in those directories because of `*= require_tree .` in application.css, right?

I recently have tried restructuring these files by removing all color variables and placing them in a file in the root `app/assets/stylesheets` folder (_colors.css.scss). I then created a file in the root `app/assets/stylesheets` folder called master.css.scss which looks like this:

    // Color Palette 
    @import &quot;colors&quot;;
    
    // Mixins
    @import &quot;mixins/buttons/standard_button&quot;;
    @import &quot;mixins/gradients/table_header_fade&quot;;
    @import &quot;mixins/vendor_support/rounded_corners&quot;;
    @import &quot;mixins/vendor_support/rounded_corners_top&quot;;
    @import &quot;mixins/vendor_support/box_shadow&quot;;
    @import &quot;mixins/vendor_support/opacity&quot;;

I don&#39;t really understand how rails handles the order of asset compilation, but it&#39;s obviously not in my favor. It appears none of the files realize they have any variables or mixins being imported, and so it throws errors and I can&#39;t compile. 

    Undefined variable: &quot;$dialog_divider_color&quot;.
      (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

    Undefined mixin &#39;rounded_corners&#39;.
      (in /home/blah/app/assets/stylesheets/widgets.css.scss)

The variable `$dialog_divider_color` is clearly defined in _colors.css.scss, and `_master.css.scss` is importing colors and all my mixins. But apparently rails didn&#39;t get that memo.

Is there some way I can fix these errors, or will I need to resort to putting all my variable definitions back into each individual file, as well as all the mixin imports?

Unfortunately, [this guy][1] doesn&#39;t seem to think it&#39;s possible, but I&#39;m hoping he&#39;s wrong. Any thoughts are greatly appreciated.


  [1]: https://stackoverflow.com/questions/8887824/persisting-scss-variables-in-rails-asset-pipeline

Proper SCSS Asset Structure in Rails

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color?  Ideally, I would like the mixin to take any form of color definition, and apply transparency:

    @include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
    @include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
    @include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);



Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

I am using SASS and found an inconvenience. This is an example of what I am trying to do: 

    .message-error {
        background-color: red;
	
        p&amp; {
            background-color: yellow
         }
      }

Expected CSS:

    .message-error {
        background-color: red;
    }
    p.message-error {
        background-color: yellow ;
    }

The idea: all elements with .message-error will be red, except if it is p.message-error. This is not real-life situation, just to show an example.

SASS is not able to compile this, I even tried string concatenation. Is there some plugin that will do exactly the same?

NOTE:
I know I can put another CSS definition like:

    p.message-error{....}

...under, but I would like to avoid that and use one place for all .message-error definitions.

Thanks.

SASS CSS: Target Parent Class from Child

I have this in my SCSS file:

&lt;!-- language: lang-scss --&gt;

    .class-a{
      display: inline-block;
      //some other properties
      &amp;:hover{
       color: darken(#FFFFFF, 10%);
     }  
    }
    
    .class-b{
      
     //Inherite class-a here
    
     //some properties
    }

In class-b, I would like to inherite all properties and nested declarations of `class-a`. How is this done? I tried using `@include class-a`, but that just throws an error when compiling.

Including another class in SCSS

How can I estimate the size of my JavaScript file after it is gzipped? Are there online tools for this? Or is it similar to using winzip for example?

How can I estimate the size of my gzipped script?

I&#39;m building a normal webpage which requires me to load about five CSS files and ten Javascript files.

 - When loading them separately in the HTML page, my webpage loads fine.
 - Now for production, I concatenated all the Javascript into a single file, in the order needed, and all the CSS into another file. But when I try to run the web page with the concatenated files it throws an error saying:

    `Uncaught TypeError: undefined is not a function`

On the line where jquery.min.js is being loaded in the concatenated Javascript file.

What can I do to mitigate this? I want to concatenate all files and minify them for production. Please help.


&lt;br&gt;
**EDIT:** I merged the Javascript and CSS in the order they were when they were being loaded individually and were working fine.

Uncaught TypeError: undefined is not a function on loading jquery-min.js

I was wondering, since Clojure Compiler and UglifyJS not only optimize code for size but also for performance (although I think size is the main priority), would my node.js app run faster if it was minified ? I know it may depend from app, but I&#39;m asking this in general.

Does it make sense to minify code used in NodeJS?

Is there an option to compile TypeScript code&#39;s output as minified? Or are we left to deal with that in a separate process? And does obfuscation affect the answer?

Is it possible to compile TypeScript into minified code?

*Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.*

I&#39;m currently trying to use Grunt.js to setup an automatic build process for first concatenating and then minifying CSS and JavaScript files.

I have been able to successfully concatenate and minify my JavaScript files, although each time I run grunt it seems to just append to the file instead of overwriting them.

As for the minifying or even concatenating CSS, I have been unable to do this as of yet!

In terms of grunt CSS modules I have tried using `consolidate-css`, `grunt-css` &amp; `cssmin` but to no avail. Could not get my head around how to use them!

My directory structure is as follows (being a typical node.js application):

 - app.js
 - grunt.js
 - /public/index.html
 - /public/css/[various css files]
 - /public/js/[various javascript files]

Here is what my grunt.js file currently looks like in the root folder of my application:

	module.exports = function(grunt) {
	
	  // Project configuration.
	  grunt.initConfig({
	    pkg: &#39;&lt;json:package.json&gt;&#39;,
	    concat: {
	      dist: {
	        src: &#39;public/js/*.js&#39;,
	        dest: &#39;public/js/concat.js&#39;
	      }
	    },
	    min: {
	      dist: {
	        src: &#39;public/js/concat.js&#39;,
	        dest: &#39;public/js/concat.min.js&#39;
	      }
	    },
	    jshint: {
	      options: {
	        curly: true,
	        eqeqeq: true,
	        immed: true,
	        latedef: true,
	        newcap: true,
	        noarg: true,
	        sub: true,
	        undef: true,
	        boss: true,
	        eqnull: true,
	        node: true
	      },
	      globals: {
	        exports: true,
	        module: false
	      }
	    },
	    uglify: {}
	  });
	
	  // Default task.
	  grunt.registerTask(&#39;default&#39;, &#39;concat min&#39;);
	
	};

So just to summarise I need help with two questions:

 1. How to concatenate and minify all my css files under the folder `/public/css/` into one file, say `main.min.css`
 2. Why does grunt.js keep on appending to the concatenated and minified javascript files `concat.js` and `concat.min.js` under `/public/js/` instead of overwriting them each time the command `grunt` is run?

----------

**Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x**

`Grunt.js` has moved to a new structure in `Grunt 0.4.x` (the file is now called `Gruntfile.js`). Please see my open source project [Grunt.js Skeleton](https://github.com/jasdeepkhalsa/gruntjs-skeleton) for help with setting up a build process for `Grunt 1.x`.

Moving from `Grunt 0.4.x` to `Grunt 1.x` [should not introduce many major changes](http://gruntjs.com/upgrading-from-0.4-to-1.0).

Content Type	Original Author	Original Content on Stackoverflow
Question	tester	View Question on Stackoverflow
Solution 1 - Css	tester	View Answer on Stackoverflow
Solution 2 - Css	Madan Sapkota	View Answer on Stackoverflow
Solution 3 - Css	Olivier Loynet	View Answer on Stackoverflow
Solution 4 - Css	MD SHAYON	View Answer on Stackoverflow

sass --watch with automatic minify?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

JavaScript single line 'if' statement - best syntax, this alternative?

Node.js - Find home directory in platform agnostic way

Attributions