I've created a project with compass+foundation
I have multiple .scss on my page and I want to use foundation mixins in all of them.
If I do the import settings, import foundation. It copies all the settings in each files, which is taking a lot of unnecessary space. I'm sure I'm doing something wrong here.
If you need to use Foundation's mixins in your own scss files you should indeed use the #import directive. However you shouldn't import the foundation.scss file.
Sass has a naming convention for files that are meant to be imported
(called “partials”): they begin with an underscore.
Only import the partials you need (I would be surprised that you need every single one).
For example I needed to use the "css-triangle" mixin from _foundation-global.scss in one of my files.
MyStyles.scss
#import "../foundation/foundation-global"; (no need for the leading underscore)
.myClass{
#include css-triangle(5px, #fff, top);
}
I'm sure you have read this, but I'll put the link just in case.
Related
I'm using Sass to style a new website.
Originally my style.scss (the main SCSS file which compiles) imported general.scss (where I defined variables) and the various pages (such as homepage.scss). It worked well. I than tried to refactor homepage.scss to just import Scss of its' various sections (such as section-a.scss). Surprisingly all the variables aren't recognized anymore by the Sass compiler (Prepros).
My questions are:
Can I import partials into partials in SASS?
Can I use variables declared in a partial which is imported to the main scss file (that which compiles) in all of the other partials?
Needless to say, all of the partial file names begin with an underscore.
Thanks!
It must have to do with the order you are placing your imports.
That should work something like this: (I don't remember what the SCSS syntax is... but this should explain)
// primary file master.scss or whatever importing partials...
#import 'reset';
#import 'variables';
#import 'styles-etc';
// variables file / importing other partials
#import 'variables/space';
#import 'variables/color';
#import 'variables/break-points';
// styles file
body {
background: $color; // from variables/color...
}
I've never ever suggested anyone use bootstrap... but if you look at it's structure you'll probably see a lot of this - as an example.
Yes, it is possible to import partials into partials in Sass. Also, there should be no problems using variables defined in one partial in any of the other partial as long as they are all imported directly or indirectly to the same main sass file.
The error I encountered was a result of not specifying the folder in which the homepage partials were located, when I imported them. The import code was:
#import 'partial';
While the code I should have used was:
#import 'home/partial'
This should be fine depending on your set up, just be sure to have your hierarchy set up in a way so that the imports flow logically so that you're not trying to access variables before they are defined and the likes.
That is more likely to be an issue if you're using a plugin / package that just grabs all the files from a folder at a time.
I normally just try to stick to having one file for importing everything in that way it is easier to manage. Each to their own though.
I am using SASS on my Symfony2 and I read few articles about recommended architecture of sass.
base/ – contains global styles, such as resets, typography, colors,
etc.
components/ – contains each self-contained component in its own .scss
partial
layout/ – contains styling for larger layout components; e.g. nav,
header, footer, etc.
pages/ – contains page-specific styling, if necessary
themes/ – contains styling for different themes
utils/ – contains global mixins, functions, helper selectors, etc.
vendors/ – contains 3rd-party styles, mixins, etc.
main.scss – output file that brings together all of the above parts
In examples they are loading all of files at the same time, but I am concerned that I should separate different page styles and their loading.
I wanted to ask if loading all of .scss files at once doesn't slow the page? Why separation is not mentioned? Inheritance of variables? Why?
Separation of files makes for easier development - not having to search through hundreds or even thousands of lines of SCSS whenever you want to make a minor change is much better - but don't worry; it won't slow down your pages.
When SASS compiles it merges the SCSS files into one CSS file and often minifies it at the same time.
I'm new to Sass and I'm having some trouble with workflow.
For instance, I've tried to position nav section a little bit lower. I managed that by creating new _style.scss and importing it in app.scss. This is the code from new file:
//* _style.scss
.top-bar-section {
padding-top: 1.1875rem;
}
It works, but when I try other things, I cannot override values from _top-bar.scss (there was no padding for .top-bar-section).
Clearly I'm doing something wrong. Could I (should I) make the changes in _settings.scss? Trouble is, I can't find the corresponding variable.
And if I understand correctly, I can't make changes in /bower_components.
OK, it turns out Foundation has dedicated app.scss for this.
So, you edit in settings.scss (here you make changes to what's already been styled) and app.scss (here you make your own additional styling).
I have couple of sass files:
_common.sass - everything that is used globally, including variables, mixins etc.
partials/_partial.sass - partial styles
homepage.sass - homepage specific
Now the problem:
If I import _common.sass into the partial/_partial.sass and then import partials/_partial.sass into the homepage.sass, well, _common.sass gets compiled twice. Bad.
The whole point is that the homepage.sass has to reference the _common.sass, so it could extend global class definitions and use mixins and os on, as well as the _partial.sass has to have access to global things from _common.sass. But _partial.sass itself has to be imported into the homepage.sass.
Sounds something very simple and unworthy, but Im having hard times solving that puzzle.
Edit (to clear things out):
// _common.sass
.sprite
background: url(sprite.png)
// _partial.sass
#import "common"
.link
#extend .sprite
// homepage.sass
#import "common"
.social
#extend .sprite
#import "partials/partial"
As you can see that both homepage and partial extend global class .sprite. This is what I'm trying to achieve. But in the end, homepage gets the whole content of _common.sass compiled per nested import (2 times, in particular example)
Layout of a 'master' SASS file
The way I normally do this is include the file at the start of my site.scss file.
site.scss
// variables, mixins, etc. at beginning
#import "common/_variables"
#import "common/_mixins"
#import "common/_sizes"
// ...
// your styles that use the variables, mixins, etc.
#import "modules/_blah"
// ...
Note that if the file contains only mixins, variables etc. then it is OK to include it multiple times as no output would result. For some text editors/IDEs you will need to do this for intellisense to kick in.
The _filename standard
SASS has a standard naming convention that a file that begins with an underscore _ isn't meant to be compiled, only used as a partial file for other files. Using this naming convention may stop compilation errors depending on what tools you're using.
I'll suggest the following: simply create a file that will add _common.scss initially.
// index.scss
#import "common"
#import "homepage"
// inside homepage
#import "partials/partial";
If you do so, I think that the things in common will be available for homepage and for partial, because they are imported above them. I.e. you don't need to import common inside homepage or partial.
_partial/_mixins.sass
page/generic.sass
#import "_partial/mixins"
page/specific.sass
#import "_partial/mixins"
I'm using SASS with Compass and I have a slight architecture problem right now as I put all my mixins into one file. Now each page have two linked SASS files (one generic) and (one specific to the page).
Both of these SASS files have an #import "_partials/mixins" which contains a collection of mixins. The problem is as you would expect I'm getting the entire mixins duplicated in both CSS files when I really only want to import that file only so I can use one or two mixins in it (just like I would expect when I import a library in any programming languages, compilation only uses what it needs from the library"
Is there a way when I perform the import on a file to specific exactly what gets loaded perhaps providing a mixin name?
In general, I think it is a bad idea to call mixins in partials you use in more than one place for the reasons you are having. It is much better to define the mixins in those partials, and call them only where you need them.
partials/_mixins.sass
=my-mixin
font-size: 2em
page/generic.sass
#import "_partial/mixins"
page/specific.sass
#import "_partial/mixins"
+mymixin