Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other SASS file references

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #167969
    sklokgieters
    Participant

    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

    #167970
    Paulie_D
    Member

    I’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

    #167971
    sklokgieters
    Participant

    Thanks 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…

    #167973
    Paulie_D
    Member

    As 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.

    #167977
    sklokgieters
    Participant

    This 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?

    #167980
    Paulie_D
    Member

    This 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.

    #167981
    Alen
    Participant

    You 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.

    #167984
    Paulie_D
    Member

    You 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.

    #167985
    Alen
    Participant

    @Paulie_D, i don’t know about the crazy part but you were def right with your answers. :)

    #168014
    sklokgieters
    Participant

    Could 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…

    #168016
    Paulie_D
    Member

    I 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/

    #168081
    sklokgieters
    Participant

    Thanks 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?

    #168087
    __
    Participant

    Is 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.

    #168089
    Alen
    Participant

    Honestly, 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

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Other’ is closed to new topics and replies.