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).
Related
I am working on a website hosted on GitHub pages using the Minimal Mistakes Jekyll theme. I am working on some basic customization - still trying to learn - so am starting out by practicing with some simple theme changes. I am starting out by reading through the Stylesheet portion of the documentation.
Here, I decided to start out with one of the first examples listed on this page, by trying to override the theme default for the link-color. Here I am having a bit of trouble however.
I started out by following the recommendations outline on this page. I made sure to navigate to the main.scss file in my website's repo and then add the line link-color: red; at the top of the file (making sure to add it above any of the #import statements). However, after adding this line, nothing seemed to change and the default link-color for the website still displayed as a light blue.
Not sure what I am doing wrong here. I have read a few things online which have suggested similar issues and provided varying degrees of advice/solutions with varying levels of complexity. I am very new to Jekyll themes and was just trying this out as a good first intro into more complex customization.
Does anyone have any idea what I might be doing wrong here or have any links to helpful examples, tutorials, or resources?
Also, here is the link to the Minimal Mistakes repo on GitHub and my forked version of the repo here.
This took me some time to find out :)
Reason:
You set a color and it gets always overwritten by $info-color because the !default flag is missing in https://github.com/eolesinski/eolesinski.github.io/blob/master/_sass/_variables.scss:
$info-color : #52adc8;
$link-color : $info-color;
From css-tricks:
!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null.
Solution:
Add !default after $info-color inside the $link-color definition to be able to overwrite $link-color on top of the main css file. New entry: $link-color: $info-color !default;
Or, change the link color directly in the _variables.scss file.
Default colors in Visual studio code:
Overwrite and result:
Details on how the theme works:
Your cloned version differs from the official repository. It also does not support skins. Not sure what else is missing. You cannot follow the docs in any case. You could update it to the official version.
The original repo imports the following sass files:
#import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
#import "minimal-mistakes"; // main partials
This results in the following import order (skipped irrelevant imports):
skin
variable (#import "minimal-mistakes/variables";)
reset (#import "minimal-mistakes/reset";)
The _config.yml file defines a skin (default by default, no color set):
minimal_mistakes_skin: "default"
Other skins (such as skins/_air.scss) define their own link color:
$link-color: #393e46 !default;
The variable CSS file (_sass/minimal-mistakes/_variables.scss) defines the default link color by using the $info-color (if not overwritten manually or by the skin before):
$link-color: mix(#000, $info-color, 20%) !default;
The reset CSS file (_sass/minimal-mistakes/_reset.scss) defines that links should use the variable:
a {
color: $link-color;
The <a> elements on the website's homepage (about.md) has inline style style="color:#4196ce". Inline style is considered the highest CSS specificity and is the value that will always be used over what is found in the stylesheets.
Note: !important is an exception to this rule and can override inline style.
To learn more see CSS Specificity by MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
If you decide to remove the inline styles, you would have to add $link-color: red; after the line #import "variables"; where $link-color is first defined. Putting your custom style before #import "variables"; will result in $link-color value being taken from _sass/_variables.scss.
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 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.
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.
I am designing a single page website and want the fixed nav links to change colour whenever the user scrolls to the specified location. Seems pretty easy to do, I thought it was pretty easy to do, but I am having problems making it work.
I only downloaded the Scrollspy JS Plugin, as I am not using the Twitter Bootstrap CSS. I just require the Scrollspy Plugin.
Could you check this jsFiddle and provide some guidance? I have already checked out the documentation here, but I've had no luck. Any help is greatly appreciated :)
http://jsfiddle.net/xjTpk/28/
Ignoring the serious issues with your use of JSFiddle1, and the typographic errors2, the principle things wrong are
You need the .nav class on the <ul> in the navbar, and
The #welcome is not an existing element, causing a JS error.
Here's a fixed demo:
JSFiddle
Oh, and you don't need both data-api and js to initialize the plugin; choose one.
1 Loading Bootstrap 2.0.2 + 2.0.4 at the same time; trying to include a <body> in the html panel
2 Using upperCamelCase on a function that doesn't need it: scrollSpy();
Key thing you are missing is you have to have a "nav" class on the ul element (or some other parent element) as that is used in the scrollspy code as part of a selector.
I couldn't get yours to work for some reason but here is a simplified example:
http://jsfiddle.net/UWzeD/5/
Your ul needs a nav class, but most important for scrollspy to work properly is that your target needs to be one level about the ul. Otherwise I've found that scrollspy doesn't work.