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?
1 Correct answer
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
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!
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???)
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
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.
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 ...
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 ?
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

