Hello I am trying to use SASS in a project, but have come across a problem and I was wondering if anyone could help?
I have created two style sheets. One called defaults.scss and one called styles.scss. In the defaults.scss I have declared the following:
$mainColor: #848484;
I then try to call the $mainColor in my styles.scss using the following:
nav ul {
list-style: none outside none;
margin: 0; font-size: 1.2em;
color: $mainColor;
padding: 50px 0 0 0;
font-weight: bold;
text-align: center;
}
But I get the following error message: Syntax error: Undefined variable: "$mainColor".
Can anyone see what I am doing wrong? I have compass running.
Thanks.
If understand correctly, you have two .scss files. What I normally do is have a styles.scss and in that file you import all of the other .scss style sheets. I think they call them partials or something. So that your main style.scss compiles all of the .scss files together into the .css file. Right now I don't think your two files are aware of each other. your main styles.scss should simply look like this:
#import "reset.scss";
#import "global.scss";
#import "structure.scss";
#import "colors.scss";
#import "etc.scss";
Make sure they are in your intended cascading order - because that is how they will be smushed together. In your case, default first and then main.
It gets tricky when you start adding media queries too - but this should fix you up I think.
In your html you just need to call your .css file that the whole operation outputs.
<link rel="stylesheet" href="css/style.css"> or wherever you have it going to. Just one.
Related
Is it possible to load property from class from different scss file? This side scss file is imported to main scss file. All properties are inherited, but margins, paddings, font styles not. Browser is not willing to load these properites. Are there any rules with extend?
Side scss file:
.section-headline {
font-size: em(30);
font-weight: 700;
line-height: auto;
color: $main-col-text;
margin-bottom: em(20);
}
Main scss file:
.i-headline {
#extend .section-headline;
}
In SASS you can declare classes in one file and import them into another without any problem, just make sure your import is done properly. And yes you can use #extend to access the rules of your imported selector.
Also try display: inline-block; and see if your margin/padding are working. Maybe you were trying to apply them to an inline element.
Does your em() function is imported somewhere ?
I found the problem. I have one scss file where are imported all scss sub-files. It looks like this:
#import 'gClass';
#import 'buttons';
#import 'general';
#import 'mixins';
#import 'typography';
#import 'pages/home';
In sub-file gClass is my class .section-headline. In pages/home is scss code with i-headline class. I tried to copy .section-headline to main scss file mentioned upper. In this case it works, but if i try to have .section-headline in gClass file, it doesnt.
I'm doing media queries in a seperate scss file named _media.scss, so I can seperate my main style.scss file from the media queries to make things easier to manage.
However it seems that because i import the _media.scss file at the top of the style.scss file then because of the nature of the cascading rules, the style.scss rules are overriding the _media rules as they come after the import.
To get the _media rules to take priority i'm having to add on !important to a lot of rules. I tried cutting and pasting all the media queries to the bottom of the style.scss file and it works without the !important flag.
Is there any way to give the _media partial priority over the style file so I fix this?
Code:
Inside the style.scss file:
#import 'config';
#import 'utilities';
#import 'form';
#import 'dropdown';
#import 'animations';
#import 'media';
.logo {
font-size: 2em;
}
Inside the _media.scss:
#media(max-width: 500px) {
.logo {
font-size: 1.5em;
}
}
Inside the chrome dev tools, i've got the same classes as above with font-size: 1.5em crossed out.
Not sure why 2em is taking priority?
In Bootstrap 4 there is a Sass varaible called $enable-rounded which
"Enables predefined border-radius styles on various components."
(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)
I have a requirement to remove the rounded corners on the Breadcrumb component, but I don't want to remove it from any other components. Therefore I can't use $enable-rounded to do what I need.
However, I don't know what the optimal way to do this is.
The Sass for _breadcrumb.scss contains this:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
list-style: none;
background-color: $breadcrumb-bg;
#include border-radius($border-radius);
}
How do I override #include border-radius($border-radius); without modifying _breadcrumb.scss?
All of the CSS for my app is condensed into 1 file (app.css) which is built from a Sass file (app.scss) which first includes the relevant Bootstrap 4 Sass files. So I could do something like this:
// app.scss
#import breadcrumb;
#import // other_bootstrap_sass_files
// CSS specific to my app
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Is there a smarter way to do this with Sass for Bootstrap 4?
I think that for your specific case where you want only breadcrumbs without border-radius and all other components still have it, your only solution is doing like you mentioned in your question:
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Personally I dont't see any other solution, only because you don't want to edit the original _breadcrumb.scss
If you look at the _variables.scss file, you can see all the variables that are set with !default - think of this as a preferences file. When the SCSS is compiled, your new values are swapped for the default values without having to overwrite the CSS.
Seems like $breadcrumb-border-radius: $border-radius !default; is what you want.
Two ways of resetting that value:
1) Make a copy of the _variables.scss file and place it in your project directory (I like changing the name to, say, _myvariables.scss ), look for that variable, remove the !default and change it to $breadcrumb-border-radius: 0;
OR
2) Make a file, say _myvariables.scss, that contains $breadcrumb-border-radius: 0; (and any other default values you want to change later on).
Next, import that new file BEFORE your bootstrap scss. In your example that would be your app.scss file:
// app.scss
#import myvariables.scss; //no underscore because it's a partial
#import // other_bootstrap_sass_files including the breadcrumb component
Now, when the SCSS is compiled, the breadcrumb radius will be set to 0 without changing anything else or overwriting css.
I'm relatively new to SASS and bootstrap. I use bootstrap with SASS and struggle a little bit with a concept.
I always used CSS like this: one base CSS-file with the basic layout (eq. base.css). Every template includes additionally a different CSS-file (eq. sitemap.css, team.css, news.css). This CSS-files only contain the parts of the respective templates. So I can overwrite the definitions in the previous files.
In SASS everything is compiled in one file. In combination with bootstrap I actually struggle with the concept I used until now.
Every time I want to add a new CSS-file to the existing definitions, I get an error because I have to reinclude the complete bootstrap structure. But if I reinclude it, the whole bootstrap code gets written into the additional files (eq. sitemap.css, team.css, news.css) too. If I include both files in my HTML-tree, the bootstrap definitions (like the whole normalize block) gets defined two or more times.
I have this setup:
- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
|-- base.css
└-- team.css
In base.scss I include the bootstrap stuff. I do also need the bootstrap stuff in team.scss, but not all the main stuff like the normalize things.
How do I achieve that? Is that even possible or do I have to switch my css needs by adding a css-class to the body tag (like body.team)? But then I have to carry the whole CSS stuff of every page in one file. Isn't this crab?
Edit to clear things up a bit:
This is in base.scss:
#import "settings/vars";
#import "vendors/bootstrap";
...
header {
#extend .container;
...
.contentbox {
margin-top: $mainGap;
}
...
}
...
and this is in team.scss:
header .contentbox {
#extend .sr-only;
}
It's absolutely clear that "#extend .sr-only;" doesn't work in team.scss because of the absence of bootstrap. But if I include bootstrap with
#import "vendors/bootstrap";
in the first line of team.scss, I would automatically add all the standard 16kb bootstrap things to team.css as well. However, these definitions are already in base.css. So I would have a preventable overhead.
I think I know there is no way to say: "Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway.". But perhaps?
What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!
but...
Since .sr-only and other are just provided as classes instead SASS mixins, you can't #include it, like you could do with the .transition mixin for example.
So, for the moment if you are using SASS, you have 2 options:
Import the Bootstrap module with the class you want to extend/reuse
//contain the .sr-only definition
#import "vendors/bootstrap/_scaffolding";
#import "vendors/bootstrap/_variables";
header .contentbox {
#extend .sr-only;
}
Copy/Paste the class from the Bootstrap source and extend it:
#import "vendors/bootstrap/_variables";
// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
header .contentbox {
#extend .sr-only;
}
What you're searching for is named a partial in Sass I guess:
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
FYI, in LESS it'd be an import option: #import (reference) "colors"
I'm running into problems with WordPress style.css files when trying to use then as .styl -files. The style.css from twentytwelve is the only one so far that works when I just change it from .css to .styl.
So for example when I copy-paste the style.css from theme twentyeleven or Nimble by ElegantThemes to a .styl -file, it won't compile and I get an error from CodeKit:
ParseError: /Applications/MAMP/htdocs/test/wp-content/themes/twentytwelve-child/style.styl:1454
1450| }
1451| article.feature-image.small .entry-summary p a {
1452| background: #222;
1453| color: #eee;
> 1454| display: block;
1455| left: -23.8%;
1456| padding: 9px 26px 9px 85px;
1457| position: relative;
expected "indent", got ";"
If I delete all the CSS from around it, the error just jumps to a different line of code.
I also get similar errors if I use css2stylus.com to make Stylus from CSS.
So for you people wiser than me:
How would one go about debugging Stylus? Is there a smart method for that? What if it's just copy-pasted CSS, and what if it's been compiled to .styl?
Any way to just make the style.css -files work by not compiling, other than loading separate files using one made with Stylus and the original CSS?
Do you think that this kind of problems are less likely to happen with i.e. SASS?
So for anyone using Stylus with WordPress, it would be very nice to share some thoughs!
Thank you very much.