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.
Related
i am struggling with breaktpoints in SASS.
I have this file structure
style.scss
_layout.scss
_variables.scss
I wanna use code breakpotints from _variables.scss in _layout.scss
_variables.scss
$screen-xl-min: 1200px;
#mixin xl {
#media (min-width: #{$screen-xl-min}) {
#content;
}
}
_layout.scss
#use 'variables';
nav {
height: 80px;
#include xl {
background-color: red;
}
}
style.scss
#use 'variables';
#use 'layout';
And I have error
SassError: Undefined mixin.
Can someone tell me, what am I doing wrong? Thanks a lot for a help!
Try and change
#use 'variables'
for
#use 'variables' as *;
Check the documentation: https://sass-lang.com/documentation/at-rules/use
In your example correct way will be write #include variables.xl {}
Or modify #use rule like #Café wrote
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
I want to create different css-themes for a WordPress theme by using theme setup files. The setup (simplified) would be as following:
/themes/_theme1.scss
/themes/_theme2.scss
/components/_file1.scss
/components/_file2.scss
/theme.scss
The idea is to enable easy theming by adding a class to the body of the document like .theme-theme1 or .theme-theme2. In the files _theme#.scss I want to define variables like text colour, font sizes and so on. In _file#.scss the actual styles are defined.
My question now is, how to iterate over the theme setup files while filling up the files.scss.
Sample idea, Background colour:
body {
###foreach themefile###
&.theme# {
background-color: $background-color;
}
###/foreach###
}
I know how to do this with only one theme available in the resulting CSS file, but I want to make ALL themes available in the resulting CSS. Feel free to ask more details as I am not sure if I explain me right.
Is there a way to create this stylesheet via some kind of foreach loops through variables in theme files or does it have to be done with extra scss-rules per theme file?
This is somewhat possible using a combo of #import with a #mixin to generate the styles. This method should produce minimal repeated code.
Here's how we'll setup the files.
- scss
- themes
- _theme1.scss
- _theme2.scss
- _theme.scss
- styles.scss
The _ prefix on some of the files prevent them from being compiled into CSS to keep our build nice and clean. Now let's go through the contents of the files:
_theme1.scss
$theme-name: 'theme1';
$primary-color: red;
$primary-font-size: 24px;
_theme2.scss
$theme-name: 'theme2';
$primary-color: blue;
$primary-font-size: 12px;
This is an oversimplified example but should give the basic idea. Each theme file will contain only variables.
_theme.scss
#mixin themestyle() {
body.#{$theme-name} {
p {
color: $primary-color;
font-size: $primary-font-size;
}
.bordered {
border: 3px solid $primary-color;
}
}
}
The themestyle mixin will contain all the styles for each theme, using the variables from the /themes/_theme*.scss files. The body.#{$theme-name} will create a selector like body.theme1 or body.theme2, depending on the current value of the $theme-name variable.
In this demo I'm styling on a p tag but this could easily be extended to all elements/selectors for your site. The important thing to remember is all styles need to be inside the body.#{$theme-name} selector.
Now the final, and least DRY part. The styles.scss file will import each theme file then call the themestyle mixin to generate the styles for each theme.
styles.scss
#import 'themes/theme';
/* Theme 1 Styles */
#import 'themes/theme1';
#include themestyles();
/* Theme 2 Styles */
#import 'themes/theme2';
#include themestyles();
The repeated #import/#include is required because it's not possible to #import within a loop or mixin, or this could be optimized a bit more.
Once styles.scss is compiled the output will be:
/* Theme 1 Styles */
body.theme1 p {
color: red;
font-size: 24px; }
body.theme1 .bordered {
border: 3px solid red; }
/* Theme 2 Styles */
body.theme2 p {
color: blue;
font-size: 12px; }
body.theme2 .bordered {
border: 3px solid blue; }
These themes can now be implemented by adding a class to the body tag, like <body class="theme1"> or <body class="theme1">.
Here's a Cloud9 project showing the setup.
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;
}
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.