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.
Related
I would like to define some custom color in Laravel 6 but don't work.
My target is to add #dee2e6 color and called it custom-blue for whatever,
I try to add in 3 places and define it as a color and class. Only able to define
it as as a class. Here are my code.
_variables.scss
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f0b274;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
$brand-primary: #0040c0;
$lwcpa-blue: #cddde1; // custom color
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
$custom-blue: #cddde1;
.customcss{
color: #cddde1;
}
After " npm run dev " only one "#cddde1" in the public/css/app.css
public/css/app.css (last few lines)
.table .thead-dark th {
color: inherit;
border-color: #dee2e6;
}
}
.customcss {
color: #cddde1;
}
I try to search "#cddde1" in the public/css/app.css, only fine 1 entry, but I expect 3 entries.
Appreciated if anybody points out what is wrong. Thank you!
Laravel 6,
boostrap 4.5.2
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
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.
In addition to application.css.scss, I have multiple partials like homepage.css.scss. At the moment I have to add #import 'bootstrap' to each one of them in order to use bootstrap variables and mixins.
Let's say I want to change my default links colour to red, I'd add that to application.css.scss. But the links in homepage.css.scss will not be red because the bootstrap import will override it with blue.
In LESS, I can do #import (reference) "bootstrap", how can I do that in SASS?
The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass
LESS
lib.less
.class {
background: red;
}
main.less
#import (reference) "lib";
.anotherClass {
&:extend(.class);
}
SASS
lib.sass
%class {
background: red;
}
main.sass
#import "lib";
.anotherClass {
#extend %class;
}
CSS Output
.anotherClass {
background: red;
}
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;
}