I have tried to compile multiple themes using same files. My folder structure is as below
-styles
green.scss
red.scss
-scss
-control1.scss
-control2.scss
I need the output of both control1 and control2 css files based on green and red themes.
var gulp = require('gulp');
var sass = require('gulp-sass');
var config = {
includePaths: [
'./styles/green.scss',
'./styles/red.scss'
]
};
gulp.src('./styles/scss/*.scss')
.pipe(sass(config).on('error', sass.logError))
.pipe(gulp.dest('./style/css/'));
I am new in gulp-sass and any one please suggest is there any option available in gulp-sass or node-sass to generate multiple themes?
I need to get the output as
-styles
-css
-green.control1.css
-green.control2.css
-red.control1.css
-red.control2.css
I would change the organization of your files to the setup below. I'll explain the new files next:
-styles
main-green1.scss
main-green2.scss
main-red1.scss
main-red2.scss
- colors
- green.scss
- red.scss
-controls
-control1.scss
-control2.scss
As for those new .scss files. Each file would import a color file and a control file. For example, main-green1.scss would be:
#import 'colors/green';
#import 'controls/control1';
And main-green2.scss would be:
#import 'colors/green';
#import 'controls/control2';
As long as the variable names in green.scss and red.scss are the same you'll end up with the desired result. Here's a more detailed example:
green.scss
$color: #00cc00;
$background: #003300;
red.scss
$color: #e50000;
$background: #330000;
control1.scss
body {
background-color: $background;
color: $color;
}
control2.scss
body {
background-color: $color;
color: $background;
}
You would change your Gulp script to build the new main- files. The compiled files would be:
main-green1.css
body {
background-color: #00cc00;
color: #003300;
}
main-green2.css
body {
background-color: #003300;
color: #00cc00;
}
main-red1.css
body {
background-color: #e50000;
color: #330000;
}
main-red2.css
body {
background-color: #330000;
color: #e50000;
}
Related
Github project
Hello every one ! I'm on an angular project and i'm stuck with my scss.
I have a mixin (in its own file mixins.scss :
BUTTON MIXINS
===================== */
#mixin btn($color:false,$bgColor:false,$size:false,$hoverBgColor:false){
button {
#if $color {
color: $color;
}
#if $bgColor {
background-color: $bgColor;
}
#if $size {
font-size: $size;
}
#if $hoverBgColor {
&:hover {
background-color: $hoverBgColor;
}
}
}
}
Also i have a global scss file with my variables :
$colors: (
primary-black: #000000,
primary-white: #FFFFFF,
medium-grey: #7A746E,
light-cream: #FFF7F0,
);
/* =====================
BUTTON VARIABLE
===================== */
$btnColor:(
btnHeaderFooterColor: map-get($colors, "primary-black"),
btnBody: map-get($colors, "light-red"),
);
When i want use my mixin for my button-component nothing happen, this is an example of my code.
button-component.scss :
#use "sass:map";
#import './../../../../styles/base/mixins';
#import './../../../../styles/base/global';
button {
.btn {
padding: 0.5rem 1.7rem;
border-radius: 1.8rem;
border-color: transparent;
&__headerFooter {
#include btn(map.get($btnColor, btnHeaderFooterColor));
}
}
}
I already tried #usebut i have the same result, my code doesn't appears in the browser inspector, i applied the class in my HTML, but if you want check the project the link is available just on top of this post.
I really appreciate your help because for me it's a mystery this situation !
Thanks you for reading me. :)
I have a scss file with my color scheme
_colors.scss
#import './variables';
$colors: (
p: $color-primary,
s: $color-secondary,
t: $color-tertiary,
q: $color-quartary,
);
#each $name, $hsl in $colors {
.c-#{name} {
color: $hsl;
}
.bg-#{name} {
background: $hsl;
}
}
And file with variables
_variables.scss
$color-primary: hsl(113, 99%, 53%);
$color-secondary: hsl(0, 7%, 19%);
$color-tertiary: hsl(0, 7%, 78%);
$color-quartary: hsl(2, 87%, 48%);
And finally
main.scss
#import './variables';
#import './colors';
body {
color: $color-tertiary;
background-color: $color-secondary;
}
So the question is why I can't use the classes generated in #each which should be c-p, bg-p, c-s, etc.
If I manually define for example c-p class
.c-p {
color: $color-primary;
}
It doesn't matter where I define it in _colors.scss or main.scss and either it before or after #each statement. It works just fine.
Your loop currently generates CSS classes like .bg-name and .c-name as you're using the string name instead of the variable $name. The following should work:
#each $name, $hsl in $colors {
.c-#{$name} {
color: $hsl;
}
.bg-#{$name} {
background: $hsl;
}
}
I have a scss file with over 20 lines of color variables. I want to create a css file with these variables to have one class for color and class for background-color.
Example:
from scss variable
$color-red: #FF0000;
to css
.color-red { color:#FF0000; }
.bg-color-red { background-color:#FF0000; }
Is there any Gulp plugin that allows me to do it?
any recomendation accepted but i need to do it with gulp if it is possible.
As #chriskirknielsen suggested, sass maps and the #each rule is a good choice here. This is the first time I have used these concepts but this works in my testing.
Your colors.scss file would look like this:
$colors: ("color-red": "#FF0000", "color-green": "#00ff40"); // etc.
#each $color, $value in $colors {
.#{$color} {
color: #{$value};
}
.bg-#{$color} {
background-color: #{$value};
}
}
The gulp-sass output in colors.css is:
.color-red {
color: #FF0000; }
.bg-color-red {
background-color: #FF0000; }
.color-green {
color: #00ff40; }
.bg-color-green {
background-color: #00ff40; }
See https://sass-lang.com/documentation/values/maps#do-something-for-every-pair
in the Header of my HTML-Page i set the following CSS Variables:
:root{
--data-color-primary: #ffcc00;
--data-color-secondary: #4b4b4b;
}
In my SASS-File i use it as follow:
DIV.color {
&.color-primary {
background-color: var(--data-color-primary);
}
&.color-secondary {
background-color: var(--data-color-secondary);
}
}
Now i try to set the font-color depending on the brightness of the background-color:
#function set-notification-text-color($color) {
#if (lightness($color) > 60) {
#return #000000;
} #else {
#return #ffffff;
}
}
DIV.color{
&.color-primary {
background-color: var(--data-color-primary);
color: set-notification-text-color(var(--data-color-primary));
}
}
But in my SASS-compliler i get the following i get the following Error:
Error: argument $color of lightness($color) must be a color
How is ist possible to hand over der CSS variable to the function.
My Problem is, the CSS Variables are set in the Backend of my CMS by User (Liferay 7) an will be rendered in a *.FTL-File and is printed in the HTML-Code.
$primary: ${clr_primary};
$secondary: ${clr_primary};
and then i cant use the SASS-Variable $primary in my SASS-File.
Use SASS variables in your CSS variables.
$primary: #ffcc00;
$secondary: #4b4b4b;
:root{
--data-color-primary: #{$primary};
--data-color-secondary: #{$secondary};
}
Now call your mixin
DIV.color{
&.color-primary {
background-color: $primary;
color: set-notification-text-color($primary);
}
}
Another options would be to create a mixin which retrieves the CSS variable
#function color($color-name) {
#return var(--data-color-#{$color-name});
}
Now call that function like so
DIV.color {
&.color-primary {
background-color: color(primary);
color: set-notification-text-color(color(primary));
}
}
Check out this link for usefull information about combining CSS and SASS variables
https://codepen.io/jakealbaugh/post/css4-variables-and-sass
If you need to change CSS variables outside of :root you can do the following
.class {
// sass-lint:disable no-duplicate-properties
#{--background}: transparent;
#{--background-focused}: transparent;
// sass-lint:enable no-duplicate-properties
}
and this compiles to
.class {
--background: transparent;
--background-focused: transparent;
}
I have variables $person-color and $animal-color in a separate variables.scss file which I want to use in my main.scss file.
What I want to achieve is the following CSS:
.person-container {
background: blue;
}
.animal-container {
background: red;
}
My SCSS looks like below:
$items: person animal;
#each $item in $items {
.$item-container {
background: #{$item}-color;
}
}
This won't work. But I want to expand the value of the variable in the string #{$item}-color. Is there a way to get the output above without using a map?
Partials need to start with an underscore ex. _variables.scss or else it will compile into a .css
_variables.scss
$person: red;
$animal: blue;
main.scss
#import 'variables';
$items: person $person, animal $animal;
#each $item in $items {
$key: nth($item, 1);
$value: nth($item, 2);
.#{$key}-container {
background: $value;
}
}
Edit: Now should give you the right results!