The problem is that my Sass code is generating duplicate declarations in the compiled CSS file.
My Sass code is organized in multiple partials, and I #import them into a final screen.scss file
I have a _placeholders.scss which contains %alignright and %alignleft.
I have a _content.scss file which uses these, so I #import "_placeholder.scss" at the top of that file and I do the same in _footer.scss. So I guess #import "_placeholders.scss" in 2 places is causing the duplication?
If I just #import "_placeholders.scss" at the beginning of screen.scss to make them globally accessible, then it messes with the order of the CSS declarations.
The first CSS selector to use a placeholder selector will be inserted at the order where I #import "_placeholders.scss", instead of where I #import "_conntent.scss".
For example, in screen.scss:
#import "placeholders";
#import "reset";
#import "typography"
#import "content" // uses placeholder %alignleft
#import "footer" // uses placeholder alignleft
Generated CSS:
/* Content styles that use placeholders */
/* reset styles */
/* typography styles */
/* expected order of content styles */
/* footer styles */
How do I avoid duplication and get the styles to be output in the correct place in the compiled CSS?
This is a place where you'd need to #include a #mixin rather than #extending a placeholder.
// in _placeholders.scss
#mixin alignleft {
text-align: left;
}
// in _content.scss
div.whatever {
#include alignleft;
}
// in _footer.scss
div.whatever-footer {
#include alignleft;
}
Related
How do I get media queries to work in bootstrap? I have a SCSS file, I think I need to import something but I have no idea what.
Error message:
Scss compiler error: Error: no mixin named media-breakpoint-up
Path: homepage.scss
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
You could #import the entire "bootstrap" scss, and then define the custom #include...
#import "bootstrap";
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
or, you can import functions, variables and mixins (since this includes only what is needed for the mixin)...
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
/* change col style on sm only */
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
#import "bootstrap";
It all depends on what other customizations you have.
https://codeply.com/go/3zTbKtczVd
Also see: How to extend/modify (customize) Bootstrap 4 with SASS
Here is my _custom.scss:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
//$body-bg: $gray-dark;
//$body-color: $gray-light;
$blue: #363636;
$component-active-bg: #484545;
$dropdown-bg: $brand-primary;
$dropdown-link-color: #c3c3c3;
$dropdown-link-hover-color: darken(#c3c3c3, 5%);
and bootstrap.scss:
// Core variables and mixins
#import "variables";
#import "mixins";
#import "_custom";
I am compiling it with the provided Gruntfile.js.
The resultant css file has no effect. Everything looks just like with the original css.
How can I test whether I am getting compilation process actually working?
Thanks
From the format of boostrap.scss I think you should have:
#import "custom";
Next, when you make your changes in _custom.scss, leave off the "!default" tag. For example:
// _variables.css
$blue: #0275d8 !default;
/// _custom.css
$blue: #002b5b;
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 have theme.scss SCSS file which contains something like that
// global variables
#import "variables";
// SCSS placeholders
#import "placeholders";
// basic HTML styles - links etc.
#import "basic";
// default layout styles
#import "layout";
/* COMPONENTS */
#import "components/layout/header"; // top page header
#import "components/layout/heading"; // main page heading
//etc. etc. a lot of another components
And it generates one output CSS file. Now I need to generate 3 different color themes (differenet CSS files). So I've created 3 SCSS files theme1.scss, theme2.scss and theme3.scss. They have the same content with only one difference:
#import "variables";
Variables will be specific for each theme. Yeah, everything works. But everytime I need to create another theme, I'll need to create another SCSS file and copy-paste whole includes from previous theme file. Is there any way how can I create my theme1.scss, theme2.scss, theme3.scss without creating 3 duplicated files?
You couldn't do it with #mixin, currently Import directives not working inside mixin becuuse of this issue https://github.com/sass/sass/issues/451
#mixin apply-theme($theme) {
#if $theme == 'red' {
#import 'variables-red';
} #else if $theme == 'green'{
#import 'variables-green';
} #else{
#import 'variables-defaults';
}
}
So currently you can do with it
$theme:'red';
#if $theme == 'red' {
#import 'variables-red';
} #else if $theme == 'green'{
#import 'variables-green';
} #else{
#import 'variables-defaults';
}
I'm following a new SASS structure guide here.
Trying to use the PX to EM mixin and seems like the variable isn't getting through.
But I have the base importing the mixins and the typography is imported last.
Main SASS file:
// Modules and Variables
#import "modules/base";
// Partials
#import "partials/normalize";
#import "partials/typography";
BASE.scss:
#import "colors";
#import "fonts";
#import "animation";
#import "mixins";
_mixins.scss:
/* PIXELS to EM */
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
// #include em(12);
#function em($pxval, $base: $em-base) {
#if not unitless($pxval) {
$pxval: strip-units($pxval);
}
#if not unitless($base) {
$base: strip-units($base);
}
#return ($pxval / $base) * 1em;
}
And finally _typography.scss:
// widget table headers
section header h1 {
font-family: LatoRegular;
font-size: em(18);
}
Error from CodeKit:
Syntax error: Undefined variable: "$em-base".
on line 6 of /assets/sass/partials/_typography.scss
from line 38 of /assets/sass/dashboard.scss
$em-base is not defined in any of your files.