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?
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 trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
I need to include css from external recourse into my result css. I use LESS preprocessor.
Is there the way to do this? For example,
.wrapper {
#import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
But that's not working for me. I get the same css:
.wrapper {
#import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
I want it to be:
.wrapper .hljs-comment {
color: #687d68;
}
.wrapper .hljs-variable,
.wrapper .hljs-attribute,
/* etc. */
CSS files are imported by leaving the #import directive as-is. If you want a CSS file to be treated as a LESS file (that is, inlined and namespaced) you should use #import (less):
.wrapper {
#import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}
You should be aware that the file will be downloaded every time the less file gets compiled, so compilation performance is less than optimal.
I'm using Google Fonts, and have imported it in less. Here is my code:
main.less
#container {
#import url(http://fonts.googleapis.com/css?family=Raleway:300);
.like {
font-family: 'Raleway', sans-serif;
}
}
This doesn't work. but if I put #import url(http://fonts.googleapis.com/css?family=Raleway:300); before #container, it does.
I'm guessing this maybe because of path, but I don't know why. How do I fix this?
"Your #imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the #import tag will cause your imports to fail. So be sure to do your imports before you do anything else." - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8
Direct from W3C:
"Any #import rules must precede all other at-rules and style rules in a style sheet (besides #charset, which must be the first thing in the style sheet if it exists), or else the #import rule is invalid." - http://www.w3.org/TR/css3-cascade/#at-import
Here's a fiddle: http://jsfiddle.net/setek/5QsvU/
This demonstrates that when #import is not the first line of a stylesheet/embed, it does not work. Try putting the #import first line, you can see what happens:
#sidebar a { color: #f00; }
#import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');
vs. just having:
#import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');
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.