Highlighted

SCSS not creating css file

New Here ,
Nov 13, 2017

Copy link to clipboard

Copied

Enhance your CSS with preprocessors |

I've been watching this video and trying following along. The narrator says that a CSS file is automatically created, but I'm not seeing it in my folder. I'm working with Dreamweaver CC 2018. What do I need to do to create a compiler? I just started learning SCSS this morning, however, I've written CSS for quite awhile. Do I need to have a CSS file set up?

Hi,

Below link might be helpful to you:

Using CSS preprocessors in Dreamweaver

steps to make a css file from scss file-

  • Make a site, Go to Manage site>CSS Preprocessor> General> click on "Enable Auto compilation on File save"
  • click on "Source and Output" choose "In the same folder as source"
  • Go to file>new SCSS> click on create
  • Write your code for SCSS file and save it
  • Go to Files Panel and refresh your site
  • A css file with the file name is created in the same folder where you have saved the file

Thanks

TOPICS
Learn Dreamweaver

Views

2.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

SCSS not creating css file

New Here ,
Nov 13, 2017

Copy link to clipboard

Copied

Enhance your CSS with preprocessors |

I've been watching this video and trying following along. The narrator says that a CSS file is automatically created, but I'm not seeing it in my folder. I'm working with Dreamweaver CC 2018. What do I need to do to create a compiler? I just started learning SCSS this morning, however, I've written CSS for quite awhile. Do I need to have a CSS file set up?

Hi,

Below link might be helpful to you:

Using CSS preprocessors in Dreamweaver

steps to make a css file from scss file-

  • Make a site, Go to Manage site>CSS Preprocessor> General> click on "Enable Auto compilation on File save"
  • click on "Source and Output" choose "In the same folder as source"
  • Go to file>new SCSS> click on create
  • Write your code for SCSS file and save it
  • Go to Files Panel and refresh your site
  • A css file with the file name is created in the same folder where you have saved the file

Thanks

TOPICS
Learn Dreamweaver

Views

2.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 13, 2017 0
Adobe Community Professional ,
Nov 13, 2017

Copy link to clipboard

Copied

This may help Using CSS preprocessors in Dreamweaver

What the above article does not say is that partials need to be preceded by an underscore as in _base.scss. The following image shows my folder structure where you can see that the partials (files with a preceding underscore) do not get compiled.

The following image shows (part of) the contents of styles.scss. Notice that the underscore and the extension (.scss) have been omitted.

You will also have to setup the site to include the paths as in

Good luck!


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 1
Community Beginner ,
Nov 27, 2017

Copy link to clipboard

Copied

THANK YOU!!! I did not know that partials have to be proceeded with _underscore. Spent several hours trying to get partials complied automatically into final css. Added underscore to my partials and worked fine. I did not notice this was documented anywhere. (New to scss so may be a requirement???)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 0
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

be aware that is is just Dreamweaver that works that way with partials files... when using sass in an external manner, you have to understand that

  • files using underscore as a first char wont be compiled in an CSS files, but will be compiled if imported in an other file
  • files imported in other SCSS files, can use underscore or not as a first char
  • files imported in other SCSS files can omit their extension, that way either SASS or SCSS files can be imported
  • files imported can be in CSS extension, but that will import the file as url()
  • what ever file is saved (imported or host) will fire to compile the given source folder

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 0
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

Please see http://sass-lang.com/guide which states

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 0
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

that is exactly what I said....

what I said more is that one can (and I often do that) use files with non underscore as first char... they will be either generated as a stand alone CSS file plus they also will be imported in the asking host... and DW doesn't allow that ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 0
Adobe Community Professional ,
Nov 27, 2017

Copy link to clipboard

Copied

to give you a sample... when developing I often use a developping CSS file just for testing prupose (like bring red square around nested data spread sheet and so on)...

when used on remote testing web server... the file is imported in the master css file... but when in production, I don't need it anymore... so there is a fork to import or not the developping CSS in within the master...

but all the main page developped internally still need the developping CSS as direct link access... so I still need the generated CSS file ...

do you get the point ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2017 0
Adobe Employee ,
Nov 13, 2017

Copy link to clipboard

Copied

Hi,

Below link might be helpful to you:

Using CSS preprocessors in Dreamweaver

steps to make a css file from scss file-

  • Make a site, Go to Manage site>CSS Preprocessor> General> click on "Enable Auto compilation on File save"
  • click on "Source and Output" choose "In the same folder as source"
  • Go to file>new SCSS> click on create
  • Write your code for SCSS file and save it
  • Go to Files Panel and refresh your site
  • A css file with the file name is created in the same folder where you have saved the file

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 0