I have the following in my scss file:
#import compass
$base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
html {
#include establish-baseline($base-font-size);
font-family: $lato;
}
but when I check my CSS, the #include establish-baseline rule doesn't output anything and I get no compilation errors. Anyone any idea what could be wrong?
The main problem:
In your case, you should put the imported file name "compass" between quotes:
#import "compass"
If you only want to import establish-baseline mixin use instead:
#import "compass/typography/vertical_rhythm";
Some tips:
It's not necessary to set $base-font-size: 16px because imported compass files comes with a $base-font-size: 16px !defaultvariable declaration
As #nyuen says you don't need to pass $base-font-size as an argument and you should move the #include establish-baseline out of the html.
Here is the modified code:
// you should use the file name to import between quotes
#import "compass";
// $base-font-size: 16px !default; it's already declared in compass
// $base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
// This include should be use out of any selector
#include establish-baseline();
html {
font-family: $lato;
}
I'm just learning about vertical rhythms as well, and here's my suggestion:
I think the syntax should be "#include establish-baseline;" (without the $base-font-size argument because when you include the establish-baseline mixin, it automatically looks for that argument, as well as $base-line-height), and you can also move that line out of your html selector to under the $base-line-height declaration.
Related
This is driving me mad.
I have a load of SCSS files and 1 variable file.
I include them in my core.scss like this:
#import url(https://fonts.googleapis.com/css?family=Roboto:900,700,500,300);
#import "global/variables";
#import "components";
#import "layout";
*:focus {
outline: none !important;
}
Inside my variables stylesheet, I have this:
$font-family: 'Roboto', sans-serif;
$primary: #000000;
$secondary: #E67F22;
$tertiary: #F1C40F;
$green: #27AE61;
$blue: #297FB8;
$silver: #B2BABB;
$white-sky: #F5F7F8;
$grey: #F0F2F2;
$clouds: #E5E8E8;
$midnight-blue: #2D3E50;
$wet-asphalt: #34495E;
$concrete: #7E8C8D;
Now I am creating another style sheet, which I have done like this:
$font-family: 'Gill Sans';
$green: '#000000';
#import "../global/variables";
#import "../components";
#import "../layout";
*:focus {
outline: none !important;
}
But neither the font or the colour has changed.
Does anyone know why?
This is because you are setting your updated variables before your generic ones. So your variables are actually overwritten, but not in the direction you want them to.
You need to do it this way to achieve your goal:
#import "../global/variables";
$font-family: 'Gill Sans';
$green: '#000000';
#import "../components";
#import "../layout";
*:focus {
outline: none !important;
}
Or better, to have another file for your customized variables.
How can I Include .scss file in another .scss file?
I was trying to write this in a file:
app.scss:
#include('buttons');
#include('dropzone');
body {
background: $primaryColor;
overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
height: 100%; /* Cover all (100%) of the container for the body with its content */
padding-top: 70px;
} /* more css code here */
and it returns an error : invalid css after #import
I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?
You can import it like this;
#import "../../_variables";
#import "../_mixins";
#import "_main";
#import "_login";
#import "_exception";
#import "_utils";
#import "_dashboard";
#import "_landing";
According to your directories and it will do what you want.
You can include a partial by doing this:
#import "partial";
The imported file needs an underscore, so sass will recognize it to be included: _partial.scss
You can use #use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
see how to using #use 'base'; in the styles.scss file
// styles.scss
#use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
you don't need to include the file extension.
#osherdo You have no need to add !important for overwriting bootstrap CSS.
body
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}
First of you need to verify from where bootstrap is rendering on the page and what is the weight of the bootstrap CSS file. After that you can place your 'css/app.css' file after bootstrap then it will work. Then you can easily overwrite the entire bootstrap CSS.
Ok, so it appears to be that my app.scss file collide with Bootstrap.css file.
Because I wanted the app.scss background property to apply, instead of the bootstrap css file. I've added !important in this property to override bootstrap style.:
body
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}
Also, gulpfile.js has been updated to suite my needs accordingly:
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
.styles([
'app.css'
], 'public/css/app.css');
mix.version([
'css/app.css'
]);
});
And that's how I fixed it.
I don't know why but while compiling with grunt or anything there is an error called invalid property name
#flotTip {
border: none !important;
font-size: $font-size-small !important;
line-height: 1px !important;
#extend .tooltip-inner() !important;
}
in the above code in the line-height it produces an undefined property. My task was to convert all less files into sass files. Used many solutions to convert all of them to sass as far as I can find. But this one I can't find any solution. Can anyone answer what might be the problem?
Extend is only for extending simple selectors, like class, element, or id. You cannot use !important with #extend. This is the correct way to use extend:
.foo {
color: red;
}
#flotTip {
#extend .foo;
}
You may be confused confusing extends with mixins, which also cannot use !important. This is the correct way to use mixins:
#mixin foo() {
color: red;
}
#flotTip {
#include foo();
}
The line-height: 1px !important; line looks fine. The problem is with the following line. If you're trying to include a mixin, use #include and don't prefix the mixin's name with . (dot). Also, don't put !important after it.
I would guess that you are using #extend incorrectly. See the docs here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works
I just started with sass and installed prepros. I tried to compile an .scss file and got an error:
Syntax error: Invalid CSS after " color: ": expected expression (e.g. 1px, bold), was "#blue;"
The .scss code:
.footer {
clear: both;
background-color: #blue;
}
I installed Ruby, and prepros.
SCSS uses $ to denote variables so it should be background-color: $blue;
It looks like your syntax is wrong. In Sass, # is for things like imports, media directives, partials (includes) and extends.
If you want to define a specific value for blue, and then reuse it, then the syntax is something like this:
$blue: #3333FF;
a {
font-weight: bold;
color: $blue;
}
If I'm using compass for CSS and use a function or mixin like:
#include background-image(linear-gradient(#a3cce0, #fff));
is there any easy way to have compass add !important to every line it generates?
You can include it inside the mixin like so:
#include border-radius(5px !important);
Compass will output the following:
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
UPDATE: new versions of sass support this syntax now:
#include border-radius(5px !important);
Just do this (as noted in #naoufal answer).
--- old answer ---
You can not use !important with compass mixings, but the culprit is not compass, you should blame sass for this.
#include border-radius(5px) !important; #=> SASS Syntax Error
Actually you can use a #function to handle the !important while keeping the flexibility of the mixing itself. For example:
#function is-important($important){
#return #{if($important, '!important', '')};
}
// by default we don't want the !important at the end
#mixin button-primary($important: false) {
font-size: 14px;
background: #fff is-important($important);
color: #000 is-important($important);
}
Hope it helps!
Just spent hours figuring this out but there is a quick trick you can do. At the top of your SASS file add the following:
$i: unquote("!important");
in your style do the following:
color: #CCCCCC $i;
output is:
color: #CCCCCC !important;
full sample:
$i: unquote("!important");
.some-style {
color: white $i;
}
output:
.some-style {
color: white !important;
}
This question came up in my search for a similar problem, it's spot on but I just wanted to add that Making a Sass mixin with optional arguments was another possible approach that I found useful.
Replace inset with important and pass !important in when you need it.
I had this problem last time and I overrided the compass style with a stronger selector. I just added an ID on my html element
span { #include border-radius(5px);}
span#no-radius { #include border-radius(0px); } // override