- This topic is empty.
-
AuthorPosts
-
April 11, 2014 at 6:53 am #167969sklokgietersParticipant
Hello all!
I’m trying to import my main SCSS file into my other modules using the import function.
I have the files as so:- root_directory -- home.html -- main.scss ---- sub_directory ------ module -------- module.scss -------- template.html ------ module -------- module.scss -------- template.html ...
So my master file is within the root, the additional modules are in completely different directories. I’m going to have a lot of different modules within a lot off variant directories.
I know I can use relative paths for this but this is very error-prone and I thin unnecessary. Is there another way to set something like a base URL/ file location for my main.scss for importing this file within all my various modules and templates?
Thanks!
Greetings Stefan
April 11, 2014 at 7:07 am #167970Paulie_DMemberI’m trying to import my main SCSS file into my other modules using the import function.
Shouldn’t that be the other way round?
Same problem I guess but your main SCSS should import all the sub-file/modules and your processor would then only compile the main SCSS file to CSS.
http://thesassway.com/beginner/how-to-structure-a-sass-project
April 11, 2014 at 7:43 am #167971sklokgietersParticipantThanks for your reply! As I see it this is the best way, ofcourse I could be wrong. My main concern is the scalability since my project will be not huge but HUGE. If you get my drift…
April 11, 2014 at 7:54 am #167973Paulie_DMemberAs I see it this is the best way, of course I could be wrong.
Not sure what you meant but if you are importing your main.scss into multiple files, you are repeating the same code in EVERY module…and that’s just (sorry) silly.
If the project is HUGE then it just means that you have to break it down into many more pieces as I see it.
April 11, 2014 at 8:21 am #167977sklokgietersParticipantThis main.scss files contains handy functions and mixins which I want to be available in my module SCSS files. Breaking down the project is not an option.
But getting back to my original question:
Is there another way to set something like a base URL/ file location for my main.scss for importing this file within all my various modules and templates?
April 11, 2014 at 8:41 am #167980Paulie_DMemberThis main.scss files contains handy functions and mixins which I want to be available in my module SCSS files.
They would be ‘available’ anyway.
You only need to define the mixin once in the Primary SCSS file and once you import all the subfiles under that mix-in any code that relies on the mix-in will just work.
But perhaps I’m misunderstanding your requirements.
Anyway, I don’t know of any method that will let you do what you are trying to do I’ll leave it to others with more knowledge than me…of which there are many.
:)
GL.
April 11, 2014 at 8:43 am #167981AlenParticipantYou do not need to include
main.scss
into your modules, just create a manifest file, something likecompile.scss
then within that file import the file that contains functions first then the rest of the modules.April 11, 2014 at 8:59 am #167984Paulie_DMemberYou do not need to include main.scss into your modules, just create a manifest file, something like compile.scss then within that file import the file that contains functions first then the rest of the modules.
Which is what I said….glad to see I wasn’t crazy but, again, perhaps I am missing something vital.
April 11, 2014 at 9:02 am #167985AlenParticipant@Paulie_D, i don’t know about the crazy part but you were def right with your answers. :)
April 12, 2014 at 5:15 am #168014sklokgietersParticipantCould you give me a example of such a manifest file? Or how I can create one?
Like I understand from you guys this file is globaly available? Or do I still need to include it in each SCSS file which want to make us of my main.scss?
I’m new to this so excuse me if I don’t get it right away…
April 12, 2014 at 6:04 am #168016Paulie_DMemberI don’t know if this will help you but here it is anyway.
http://www.sitepoint.com/architecture-sass-project/
The thing is that you have one file which imports all of the minor/sub-files in the right order which is then the only file complied into a single output CSS file.
So it might look something like just a long string of imports with just a few final tweaks at the end.
/* Vendor Dependencies */ @import "compass"; /* Authored Dependencies */ @import "global/colors"; @import "global/mixins"; /* Patterns */ @import "global/tabs"; @import "global/modals"; /* Sections */ @import "global/header"; @import "global/footer";
Stolen from here: https://css-tricks.com/sass-style-guide/
April 14, 2014 at 12:47 am #168081sklokgietersParticipantThanks for your reply and effort! I will look into it later this day.
Is there also such a thing as a base URL/ main file reference?
April 14, 2014 at 7:22 am #168087__ParticipantIs there also such a thing as a base URL/ main file reference?
There is no need for such a thing. Once imported, each file effectively becomes part of the main page, so there is no need to have a reference to it. Each succeeding file can be thought of as being literally copy-pasted at the point where the
@import
is.April 14, 2014 at 8:22 am #168089AlenParticipantHonestly, we (developers) like to over engineer shit. I mean, for a small website, there’s no need for decoupling your project to minuscule pieces.
What I’ve found my self doing recently, is just writing everything in one
.scss
file. Benefits of this, for me at least, once the variables have been defined or name of the mixin, you’ll get tab completion, if however you include the external file… you have to go back and try remember all those variable, and mixin names./rant
@sklokgieters, If I do decouple my code it looks like this:
master.scss
– is my manifest file (file that gets compiled)
base/
– Base folder where I keep all the default html elements (html, body, hr, etc.)
layout/
– Layout folder where (Major layout sections, grid, etc.)
modules/
– Modules folder (Widgets, etc.,)
utilities/
– Utilities folder (variables, mixins, functions, etc.,)My
master.scss
file might looks like:// Import Utilities @import 'utilities/variables'; @import 'utilities/mixins'; @import 'utilities/functions'; /** * whatever variables or mixins defined above, * will be available in the files below */ // Import Base @import 'base/_html'; @import 'base/_links'; @import 'base/_forms'; // Import Layout @import 'layout/_baselayouts'; @import 'layout/_grid'; @import 'layout/_pages'; // Import Modules @import 'module/_contactform'; @import 'module/_widget'; @import 'module/_share';
Also notice the naming convention, files with underscore are considered partials (files that get included in other places).
Hope that helps,
-Alen -
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.