press &lt;kbd&gt;CTRL&lt;/kbd&gt; + &lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;P&lt;/kbd&gt; in Submile Text below popup opens

[![enter image description here][1]][1]


Click on the **Package Control: Install Package**.which will open the below popup. Type **SCSS** in the search box. Look for exactly: **SCSS** (it may not be the first thing that comes up) and click on it.

[![enter image description here][2]][2]

again press &lt;kbd&gt;CTRL&lt;/kbd&gt; + &lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;P&lt;/kbd&gt; and search for SCSS and click on the **Set Syntax: SCSS**. that it your scss files will be colored accordingly

[![enter image description here][3]][3]


  [1]: https://i.stack.imgur.com/wmMW0.png
  [2]: https://i.stack.imgur.com/b8s8cl.png
  [3]: https://i.stack.imgur.com/yFiB0.png

There are two very popular packages: &#39;Sass&#39;, and &#39;SCSS&#39;. I started with the &#39;SCSS&#39; package, given that codegeek&#39;s 72+ answer suggests it, but I found that a large amount of my valid SCSS was just white.

The [&#39;Sass&#39;][1] package contains both Sass and SCSS, and is much more complete for SCSS than the package just called &#39;SCSS&#39;.

Steps to install:

1. &lt;kbd&gt;CTRL&lt;/kbd&gt;+&lt;kbd&gt;SHIFT&lt;/kbd&gt;+&lt;kbd&gt;P&lt;/kbd&gt; (Mac: &lt;kbd&gt;COMMAND&lt;/kbd&gt;+&lt;kbd&gt;SHIFT&lt;/kbd&gt;+&lt;kbd&gt;P&lt;/kbd&gt;)
2. Type &#39;`Package Control: Install package`&#39; and press &lt;kbd&gt;Enter&lt;/kbd&gt;. Wait several seconds
3. Type &#39;`Sass`&#39;, ensure the selected item is just &#39;`Sass`&#39;, and press &lt;kbd&gt;Enter&lt;/kbd&gt;.
4. You&#39;ll see installation status in the status bar at the bottom of the app. When finished installing:
4. &lt;kbd&gt;CTRL&lt;/kbd&gt;+&lt;kbd&gt;SHIFT&lt;/kbd&gt;+&lt;kbd&gt;P&lt;/kbd&gt; again
5. Type &#39;`Set syntax: SCSS`&#39; and press &lt;kbd&gt;Enter&lt;/kbd&gt;


  [1]: https://packagecontrol.io/packages/Sass

If you have the Sass extension installed (which supports both SASS and SCSS) and you want all `.scss` files to open with the newer SCSS syntax highlighting rather than the older SASS, then do the following:

- Open ***View -&gt; Syntax -&gt; Open all with current extension as...***
- Select ***Sass -&gt; SCSS***

Credit: http://joncaveman.com/2015/08/11/sublime-text-3-default-syntax-highlighting-for-file-types/

What is the implementation for this function:

    fn unbox&lt;T&gt;(value: Box&lt;T&gt;) -&gt; T {
        // ???
    }

The only function in the documentation that looks like what I want is `Box::into_raw`. The following will type check:

    fn unbox&lt;T&gt;(value: Box&lt;T&gt;) -&gt; T {
        *value.into_raw()
    }

This gives the error `error[E0133]: dereference of raw pointer requires unsafe function or block`. Wrapping it in an `unsafe { ... }` block fixes it.

    fn unbox&lt;T&gt;(value: Box&lt;T&gt;) -&gt; T {
        unsafe { *value.into_raw() }
    }

Is this the correct implementation? If so, why is it unsafe? What does it mean?

Perhaps this question shows my general uncertainty of how `Box`s actually work.

How do I get an owned value out of a `Box`?

I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/). 

Is the normalize.css applied right away after npm installing it? How would I make edits to it if I wanted to? 

Thank you in advance and will be sure to vote up and accept answer

How to use normalize.css using npm install with webpack?

I&#39;m using Sublime 3 editor. When I open a SCSS file it shows many red characters because it misjudged the syntax. When I press &lt;kbd&gt;CTRL&lt;/kbd&gt; + &lt;kbd&gt;Shift&lt;/kbd&gt; + &lt;kbd&gt;P&lt;/kbd&gt; and type `sass` or `scss` I get no option. I had to set syntax to CSS.  

Is there any way to set syntax to SCSS in Sublime 3?

How to set scss syntax in Sublime 3?

<p>I'm using Sublime 3 editor. When I open a SCSS file it shows many red characters because it misjudged the syntax. When I press <kbd>CTRL</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> and type <code>sass</code> or <code>scss</code> I get no option. I had to set syntax to CSS.</p>
<p>Is there any way to set syntax to SCSS in Sublime 3?</p>


My problem is that I want the flexbox with variable range width, and all works well, but not on the last row. I want the same dimension for all children even where the row is not full of children (the last row).

&lt;!-- language: lang-css --&gt;

    #products-list {
        position:relative;
        display: flex;
        flex-flow: row wrap;
        width:100%;
    }

    #products-list .product {
        min-width:150px;
        max-width:250px;
        margin:10px 10px 20px 10px;
    	flex:1;
    }

I created [a dynamic situation in **jsFiddle**][1]

My flex divs can shrink until 150px and grow up to 250px, but all must be with the same size (and obviously I want a CSS solution, with JS I know the way).


  [1]: https://jsfiddle.net/StepBaro/14ncacw6/

Targeting flex items on the last or specific row

I am a bit confused on the new bootstrap version since they changed dropdown menus to divs:

    &lt;nav class=&quot;navbar navbar-toggleable-md navbar-light bg-faded&quot;&gt;
      &lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNavDropdown&quot; aria-controls=&quot;navbarNavDropdown&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavDropdown&quot;&gt;
        &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item active&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Features&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Pricing&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item dropdown&quot;&gt;
            &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;http://example.com&quot; id=&quot;navbarDropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
              Dropdown link
            &lt;/a&gt;
            &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot;&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;

Do you guys have any idea to get a hover dropdown in the Dropdown link in that snippet without adding additional script code (only css and script from bootstrap)? I already saw the bootstrap css classes and I can&#39;t relate with the ones in bootstrap V3 (I accomplish this without adding jquery in V3). 

How to implement a Navbar Dropdown Hover in Bootstrap v4?

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I&#39;d try to get a handle of how to use it.

I&#39;ve tried to create a simple grid with one item `a` spanning the left side of all of the rows, with the other items (`b`, `c`, `d`, `e`, etc.) spanning the right side of individual rows. The amount of items spanning the right side of the rows is variable, so there might be any combination of `b`, `c`, `d`, `e`, etc., so I&#39;m using the `grid-auto-rows` property. As such, I cannot define a fixed number of rows for `a` to span, but I would like `a` to span *all* available rows.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-rows: auto;
        grid-template-columns: [left] 4rem [right] 1fr;
        margin: 0rem auto;
        max-width: 32rem;
    }
    #a {
        background: lightgreen;
        grid-column: left;
        grid-row: 1 / auto;
        justify-self: center;
    }
    #b {
        grid-area: auto / right;
        background: yellow;
    }
    #c {
        grid-area: auto / right;
        background: pink;
    }
    #d {
        grid-area: auto / right;
        background: lightskyblue;
    }
    #e {
        background: plum;
        grid-area: auto / right;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
        &lt;div id=&quot;a&quot;&gt;a&lt;/div&gt;
        &lt;div id=&quot;b&quot;&gt;b&lt;/div&gt;
        &lt;div id=&quot;c&quot;&gt;c&lt;/div&gt;
        &lt;div id=&quot;d&quot;&gt;d&lt;/div&gt;
        &lt;div id=&quot;e&quot;&gt;e&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

What should I do to make `a` span all rows without knowing how many rows there will end up being?

Items that span all columns/rows using CSS grid layout

I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.

I have built it at [Codepen.io][1] so you guys can play with it and let me know what works as I am about out of ideas...

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var currentAuthor = &quot;&quot;;
    var currentQuote  = &quot;&quot;;
    function randomQuote() {
      $.ajax({
          url: &quot;https://api.forismatic.com/api/1.0/?&quot;,
          dataType: &quot;jsonp&quot;,
          data: &quot;method=getQuote&amp;format=jsonp&amp;lang=en&amp;jsonp=?&quot;,
          success: function( response ) {
            $(&quot;#quote-content&quot;).html(&#39;&lt;h2 id=&quot;quote-content&quot; class=&quot;display-5&quot;&gt;&lt;i class=&quot;fa fa-quote-left&quot; aria-hidden=&quot;true&quot;&gt; &#39; + response.quoteText + &#39; &lt;i class=&quot;fa fa-quote-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/h2&gt;&#39;);
            $(&quot;#quote-author&quot;).html(&#39;&lt;p id=&quot;quote-author&quot; class=&quot;lead&quot;&gt;&lt;em&gt;&#39; + response.quoteAuthor + &#39;&lt;/em&gt;&lt;/p&gt;&#39;);
            
            currentAuthor = response.quoteAuthor;
            currentQuote  = response.quoteText
          }
      });
    }

    function openURL(url){
      window.open(url,&#39;Share&#39;, &#39;width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0&#39;);
    }

    function tweetQuote(){
          openURL(&#39;https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&amp;related=freecodecamp&amp;text=&#39; + encodeURIComponent(&#39;&quot;&#39; + currentQuote + &#39;&quot; - &#39; + currentAuthor));
    }

    $(document).ready(function () {
        randomQuote();

        $(&quot;#get-another-quote-button&quot;).click(function(){
            randomQuote();
        });

       $(&#39;#tweet&#39;).on(&#39;click&#39;, function() {
           tweetQuote();
       });
    });

&lt;!-- language: lang-css --&gt;

    html, body {
      background-image: url(&quot;https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg&quot;);
        background-color: #17234E;
        margin-bottom: 0;
        min-height: 30%;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
    }


    .btn-new-quote {
        color: #0C0C0D;
        background-color: transparent;
        border-color: #414147;
    }

    .btn-new-quote:hover {
        color: #0C0C0D;
        background-color: #9A989E;
        border-color: #0C0C0D;
    }

    #tweet {
        color: RGB(100, 100, 100);
    }

    #tweet:hover {
        color: RGB(50, 50, 50);
    }


    .jumbotron {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        opacity: .85;
        border-color:  RGB(50, 50, 50);
        padding-bottom: 8px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row justify-content-center align-self-center&quot;&gt;
            &lt;div class=&quot;col-sm-6&quot;&gt;
                &lt;div class=&quot;jumbotron vertical-center text-center&quot;&gt;
                    &lt;h2 id=&quot;quote-content&quot; class=&quot;display-5&quot;&gt;&lt;i class=&quot;fa fa-quote-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;i class=&quot;fa fa-quote-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/h2&gt;
                    &lt;p id=&quot;quote-author&quot; class=&quot;lead&quot;&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;
                    &lt;hr class=&quot;my-2&quot;&gt;
                    &lt;div class=&quot;row align-items-center justify-content-between&quot;&gt;
                        &lt;div class=&quot;col-sm-1-4 text-left&quot;&gt;
                            &lt;a id=&quot;tweet&quot; href=&quot;#&quot;&gt;
                                &lt;h2 class=&quot;display-4&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/h2&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-sm-1-4 text-right&quot;&gt;
                            &lt;button id=&quot;get-another-quote-button&quot; type=&quot;button&quot; class=&quot;btn btn-outline-secondary  btn-new-quote&quot;&gt;Don&#39;t Quote Me on This...&lt;/button&gt;
                        &lt;/div&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: http://codepen.io/cmseaton42/pen/EZMxem



Vertical Align Center in Bootstrap 4

I can scroll to 200px using the following


    btn.addEventListener(&quot;click&quot;, function(){
        window.scrollTo(0,200);
    })

But I want a smooth scroll effect. How do I do this?

How to window.scrollTo() with a smooth effect

In VS &lt;= 2015 we can use a WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Is there a similar extension that can compile Less/Sass on build?

How to compile Less/Sass files in Visual Studio 2017+

I&#39;m in the process refactoring an Angular application and as I&#39;m moving components around to new directory locations, I&#39;m finding that dealing `@import` paths in the components&#39; SCSS files is getting a bit tedious. 

For example, let&#39;s say I have the file `src/_mixins.scss` in the root of my application and the component `src/app/my-widget/my-widget.component.scss` imports the SCSS like so `@import &#39;../../mixins&#39;;`. All well and good.

But then I decide that `my-widget.component` is really be a &quot;shared component&quot; under another component `my-thingy.component`, so I create a `shared` folder under `src/app/my-thingy` and move everything that was in `src/app/my-widget` into it.

I *hope* you&#39;re still with me... So, now I&#39;ve got `src/app/my-thingy/shared/my-widget` and I modify my SCSS file to import `@import &#39;../../../../mixins&#39;`. 

**Note:** This is a simplified example. Some of the paths get relatively deep (no pun intended... *or was it?*) and all of these `.` and `/` are a bit much.

**TL;DR**

It would be *super-handy* if from the start I could have just imported  `_mixins.scss` relative to the root in all of my components&#39; SCSS files so I don&#39;t have to keep messing with the `@import` paths when refactoring. (e.g. Something along the lines of `@import &#39;~/mixins&#39;`). **Does something like this exist?**

What I&#39;ve tried (and, sadly, has failed):

 1. `@import &#39;~/mixins&#39;; /** I had real hope for this one **/`
 2. `@import &#39;mixins&#39;; /** Just being overly optimistic here **/`
 3. `@import &#39;~//mixins&#39;; /** Now I&#39;m just making stuff up **/`

*I understand that I&#39;m already going to have to modify my mod files to point to the new path of the component with all of this &quot;moving stuff around&quot;, but...  hey, one less thing, right?*

SCSS Import Relative to Root

I have the following Sass snippet in which I want the `&lt;thead&gt;` to float as the table scrolls. This works properly in Safari, but not in Chrome `Version 58.0.3029.110 (64-bit)`.

I know that Chrome has had on-again-off-again support for `sticky`, and currently supports it, but is it final? Is this a Chrome bug or do I need a different solution? (I prefer the CSS approach rather than Javascript because it&#39;s more performant.)

    .table {
      thead {
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
      }
    }

CSS-Only Sticky Table Headers In Chrome

I&#39;d like to use Bootstrap 4 with SASS in an Angular(4+) project created with Angular CLI.

In particular I need to:

- use SASS instead of CSS both as global style and Component-style
- compile Bootstrap SASS source together with my custom *.scss styles
- make sure that my custom styles override the Bootstrap source, so I can override the Bootstrap sources when needed, without editing the Bootstrap source itself (making it easy to upgrade the Bootstrap source version)
- add watch &amp; auto-recompile whenever any of my *.scss files change (both for components &amp; global style) to the `ng serve` script




How to use Bootstrap 4 with SASS in Angular

I know CSS very well, but am confused about Sass. How is SCSS different from CSS, and if I use SCSS instead of CSS will it work the same?

What is the difference between CSS and SCSS?

I&#39;ve noticed that in Sublime Text 3, that if I type a word and then double-space quickly after I&#39;m done entering the word in, it automatically places a period after the word

Something like

`obj` + two `spacebar` keystrokes

will result in

`obj.  `

I&#39;ve looked through the preferences and I see all the `auto_complete` keys, but even with auto completed disabled, Sublime persists in added that period.  How can I disable this behavior in Sublime?

Avoid auto-period character after quick type space in Sublime Text 3

is there a way to always ignore a folder... in project view.

I have multiple apps in one repo and have &#39;node_modules&#39; in each app 

    mainapp
    ├── microapp
    │	└── node_modules
    ├── microapp2
    │	└── node_modules
    ├── index
    ├── config
    └── assets

 
I want to exclude from search the `node_modules` folder when i search inside project in the above structure.


How do I exclude a folder from search in sublime text 3 permanently?

Today when I tried to run a simple code on Sublime Text 3, the following message appeared:

&gt; Python was not found but can be installed from the Microsoft Store: https://go.microsoft.com/fwlink?linkID=2082640

And when I type Python in CMD, it opens the Windows Store for me to download Python 3.7. This problem started today for no good reason, I didn&#39;t change or downloaded anything about Python and already tried reinstalling Python, and the Path is correct.

CMD opens window store when I type python

I have no idea why this has started happening but it is very annoying...

Basically, now when I copy CSS from Google Chrome Inspector, it formats it as follows:

    border-radius: 50%;
        width: 26
    px
    ;
        height: 26
    px
    ;
        color: transparent;
        margin: 0 auto;
        padding: 0;
        position: relative;

Instead of how it&#39;s always worked like so:

    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: transparent;
    margin: 0 auto;
    padding: 0;
    position: relative; 

Any idea on why this is happening and how I can fix it?


EDIT: I think it&#39;s to do with the latest Chrome update...

It seems it now has an option to set which metric you want to use, i.e. PX, EM etc...

Can this be disabled somehow?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/T8Tp1.png

Google Chrome Update - Issue with copying code from Inspector CSS

We already tried the approaches as listed below:

 - https://github.com/oliverlockwood/jenkinsfile-idea-plugin
 - https://st-g.de/2016/08/jenkins-pipeline-autocompletion-in-intellij

After having searched the web for many hours on multiple days, we still haven&#39;t found a helpful resource on this matter. Thus, it appears to make sense to ask a new question here.

We are developing our Java projects in IntelliJ idea and want to integrate our builds with Jenkins. When we create a Jenkinsfile in Idea, we do not get syntax highlighting or auto completion. Since we are new to Jenkins, those features would be really useful to us. How can we make Idea be more supportive with Jenkinsfiles?

If there is no way to get syntax highlighting and auto completion for a Jenkinsfile in idea, what other editors would be helpful?

Please note: 

 - we are working with java projects, not groovy projects.
 - We&#39;ve already tried the plugin https://github.com/oliverlockwood/jenkinsfile-idea-plugin. When the plugin is activated, the Jenkinsfile is recognized as such, but instead of syntax highlighting we get an error message, please see below.

        pipeline {
        agent { docker &#39;maven:3.3.3&#39; }
        stages {
            stage(&#39;build&#39;) {
                steps {
                    sh &#39;echo Hello, World!&#39;
                }
            }
          }
        }
Idea highlights the `p` of `pipeline` as error. The error message reads:

    JenkinsTokenType.COMMENT, JenkinsTokenType.CRLF or JenkinsTokenType.STEP_KEY expected, got &#39;p&#39;

Thanks for any help!

Content Type	Original Author	Original Content on Stackoverflow
Question	user31782	View Question on Stackoverflow
Solution 1 - Css	yasarui	View Answer on Stackoverflow
Solution 2 - Css	jameslol	View Answer on Stackoverflow
Solution 3 - Css	Ryan Wheale	View Answer on Stackoverflow

How to set scss syntax in Sublime 3?

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

How to use normalize.css using npm install with webpack?

How do I get an owned value out of a `Box`?

Attributions