I would like to use a base stylesheet with the colours defined as dotless variables.
Then, depending on the color theme that I use I would like to change this colors.
- example of base stylesheet:
body
{
color: #brand_color;
}
- Example of specific stylesheet, depending in the color scheme I pick:
#import "../BaseStyleSheet.less.css";
#brand_color: green;
How can I achieve this?
You need to change the extension of your imported file to .less
Less only compiles imports if they end in .less if they end in something else it takes the content of the file literally and just inserts it in your file.
Also note that you may have to put the #brand_color: green declaration before the import so the imported file can access it.
The extension of the imported file should be ".less".
Changing the variable value after or before the import statement makes no difference, it just doesn't change the variable value, making what I wanted not possible.
"Imports will not have access to variables in the main reference Less file (or other referenced Less files in the main one). This ensures that imported Less files have no dependencies on where they are been used."
http://enginechris.wordpress.com/2009/11/23/my-thoughts-on-using-dotless-and-the-less-syntax/
Related
Basically, I want to use the styles that the rsuite library provides because I wanted to use a ranged date picker that it has.
The thing is that, for it to display properly, I need to make an import of the .css of the library rsuit.
I have a component with a .scss file and an index.tsx file where I import the .scss one in this way:
import './styles.scss';
Then, in styles.scss I import the library .css this way:
#use '../../../styles/breakpoints'; //These are other .scss we use.
#use '../../../styles/fonts';
#use '../../../styles/colors';
#import '~rsuite/dist/rsuite.min.css';
My problem is that, when I do this, it overrides basically everything. Changing fonts, paddings... and yes, the range date picker now works and shows properly, but I only want it to change, nothing more.
Any way I can fix this? Or any way to select what I want to import from the library .css
You can scope the imported stylesheet by importing it inside a style rule...
#someRandomID{
#import '~rsuite/dist/rsuite.min.css';
}
This will make the whole CSS work only for elements inside element with ID "someRandomID", this way it won't overwrite your styles.
Now you that you have imported the styles and that they do not impact yours, it will also not style the datepicker! The trick here would be to #extend with your class. I did not dig into rsuite, so let's say the class for the datepicker is indeed .datepicker. This means that it got included as #someRandomID .datepicker and we'd like to "alias" this as .datepicker only.
You can use #extend for this:
.datepicket{
#extend #someRandomID .datepicker;
}
You may need to do that for every styles tough, so I'm not sure it's gonna be very helpful. It would also have the very bad drawback of including the whole CSS for absolutely nothing, bloating your css file by huge amounts needlessly.
With all that in mind, I think the best bet for you would be to simply get the source CSS that you need from their github. https://github.com/rsuite/rsuite/blob/main/src/DatePicker/styles/index.less
For example I am trying to import .navbar-nav from bootstrap's _navbar.scss and not the whole _navbar.scss file to my compiled css file. Is there a way to do it?
Sorry if this was asked before.
You can try doing an extend:
.your-class{
#extend .navbar-nav;
}
However, this would only work if you had imported the _navbar.scss somewhere else or the bootstrap.scss.
Additional
// main.scss
#import ../wherever bootstrap file is/_navbar.scss;
#import _custom.scss;
// _custom.scss
.your-class{
#extend .navbar-nav;
}
One of the way to import .scss in javascript is
import { navbar-nav } from '_navbar.scss'
When using in your component you can do.
<div className={navbar-nav} />
if you want to import it in your .scss file then you can do.
#import '_navbar.scss'
.class {
#extend .navbar-nav
}
As you are learning Sass here are some explanations which may help:
Better wording helps ...
At first some wording to get a correct understandable communication here and anywhere else you are talking about coding:
SASS don't minify a given CSS, it writes the CSS. Minify means the process that a given CSS code is compressed by a postprocessor to a shorter way to write it, - i.e. comments and spaces will be removed ... But yes: as SASS writes CSS it is able to write code in a minified format.
What you mean is to 'reduce code' or 'avoid not needed code' as you only try to import, use and write! the only needed parts of a given module which is a good practice.
.navbar is a CSS class. SASS don't load CSS classes, it writes CSS classes. It doesn't matter if you 'write the code on your own to a SCSS file' or 'get the code from a framework/module' ... SASS writes the however prepared CSS classes to your CSS file.
What you mean is the SASS includes/imports files with code from a framework/module to write that code/classes to css. So yes: maybe you can say you 'load' that module/scss-file ... but you don't load as css class. (This is as important as 'classes' in coding allways means a special construct of excutable code which does something in your programm. CSS classes don't execute anything, in SASS they are content you want to write/output to css.)
Please: these wordings are important to understand each other and to understand the mechanic of the process how SASS works is going on as well.
Reducing code by importing only selected file is good practice
So, I am not sure if I did understand your question right:
No. You are not able to include/import/load a part of the code of a single scss-file only. If you do #import 'somefile.scss' you always get the whole code of the whole file.
Yes. you are able to include/import/load parts of a given framework/module as you are able to load only the special FILES(!) of a framework/module you need for your project.
Yes. That is a really good practice.
As you mentioned Bootstrap indeed is developed and allows you to do that. But head up. If you import i.e. the part navbar.scss (or other selected elements) it only works if you also load the other files navbar.scss depends on. That are almost variables, functions, mixins and sometimes needed JS components to this element as well. Please note, that importing the files the elements are based on (i.e. vars, functions, mixins) has to be done BEFORE you load the element (i.e. like navbars, grid,...) itself.
A way to organize your project
Yes. A good way to organize your project is to have a single(!!!) file which brings all the code together you write in other partial files yourself or which you import from other framework/modules.
In case of Bootstrap this can be (simplified example):
// ###> file: your 'custom.scss'
// Note: file is without leading underscore
// as this files GENERATES/WRITE the css to custom.css
// Files with underscore as _partial-footer-styling.scss
// are not compiled to write css on their own
// that files are only compiled to css when they are imported to files without underscore
#import 'path/your-own-vars';
// Note: technique importing files
// you don't need to write underscore and '.scss'
// Note: function of this file
// the file '_your-own-vars.scss' is to organize you needed vars special to your project
// it includes your own vars and bootstrap vars as well
// --> the Bootstrap vars in this file will overwrite the vars of Bootstrap which will be included next
#import 'bootstrap-path/functions';
#import 'bootstrap-path/variables';
#import 'bootstrap-path/mixins';
#import 'bootstrap-path/your-selected-component-1';
#import 'bootstrap-path/your-selected-component-2';
#import 'bootstrap-path/your-selected-component-3';
...
#import 'path/partial-your-own-additional-css-special-section';
#import 'path/partial-your-own-additional-css-footer-settings';
....
A detailed explanation how to include and use Bootstrap (partly if you like to do so) to your project is here: https://getbootstrap.com/docs/4.6/getting-started/theming/
I have a global CSS file that contains all generic CSS.
I want to be able to extend all the classes present in this global CSS file in any of my SCSS files.
Right now it throws an error .xyz class does not exist and build fails. I tried importing this file but still build fails.
Adding !options next to class is one way for the build to pass but is there any other better way?
Bit more context for Vue users. I use VueCli3. I use <style lang="scss"> for writing SCSS and want to use extend here. Vue documentation suggesting adding prependData for adding variables. I imported the global CSS in a SCSS file and imported that file in the prependData but Vue build still fails.
It sounds like you want to globally include a CSS file with content that the SCSS blocks in each component can read. (Variables, style definitions, etc).
#extend works like a variable, meaning SCSS needs the definition style to be available as part of its compilation. So that means getting "SCSS Global Variables" working should solve your Extend problem too.
In that case, you need to tweak how Webpack deals with your components. You can do it manually as described here. Or my preference is to use a Vue Cli plugin called vue-cli-plugin-sass-resources-loader. Make sure that your component <style> section contains lang="SCSS" though I assume you're already doing that.
Using #import CSS file into SCSS file not possible to #extend any class.
But you can follow below steps for extends class from your pure css code.
Convert .css file into .scss.
import that global.scss file into another .scss file.
Then after you can use #extend for extend class in new file.
If your file have more then 1k line of code then it will get trouble for extend class.
I search the proper way to do that in SASS, I don't know if it's possible.
For my exemple I've a website in laravel with 3 subdomains. These 3 subdomains will have the same site structure, but data and styles will be different.
In laravel I've a variable subdomain like that: {subdomain}.mysite.com
So if I go to green.mysite.com it will load for example green.css
I want to use sass in a modular way and have:
common.scss all styles common to all subdomains with undefined variables (like colors)
green.scss color variables and some stuff are defined here
purple.scss variables for purple theme
And for code example in common.scss I would have something like that:
#main-footer{
border-top: 4px solid $main;
}
And in green.scss:
/* COLORS */
$main: #8cc83d;
$second: #d38345;
Is this possible to do in particular way in SASS or I've to copy paste all my code which contain vars ? :/
create a sass partial called _vars.scss then in your main.scss import it before you use it.
ex:
_vars.scss
$color-main-theme: blue;
_header.scss
html {color: $color-main-theme;}
main.scss
#import "vars"
#import "header"
Then when your sass complies down your vars will be added correctly. As a bonus this makes it really easy to manage and change code from project to project.
As #Ennui says you'll need three separate _vars.scss files to accomplish what you want (included here for completeness and incase anyone doesn't look at the comments).
Basically what agconti says in his answer, but you need 3 separate
_vars.css definition files, and three separate main.scss files (one for each site) that each import the _common.scss main styles and the
_vars.css file for each respective color scheme. – Ennui 3 mins ago
Should be relatively simple, by I can't quiet figure it out.
I have this:
.parent
#include grid-row()
.main
#include grid-column(8)
.sidebar
#include grid-column(4)
The elements 'main' and 'sidebar' end up sitting right next to each other with no gutter.
I can see in the grid docs that there is a variable called $column-gutter, and that it has a default setting. But I can't see it's effect.
In the file _grid.scss I can see $column-gutter. It has a default value, and I have touched it. But it has no effect on side-by-side elements in a row. These elements have no gutters.
So how do I make use of that variable, or otherwise set gutter widths?
You should set values of the configuration variables prior to importing Foundation.
See http://compass-style.org/help/tutorials/configurable-variables/ :
Many Compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module. For example:
$blueprint-grid-columns = 12
#import "blueprint/grid"
Because of this, it is common to have one or more partials that set the constants first and get imported before any other imports in your stylesheet(s). This is commonly referred to as the "base" stylesheet and is usually named _base.scss
or _base.sass.
I had this same issue and in my case the problem was that I was never actually using the _settings.scss file. And since this was the case, none of my changes were being reflected on the site.
If this is the same for you, then what you need to do go to the screen.scss file, make sure its calling #import "app". Once this is confirmed, go to the app.scss file and at the top make sure you call #import "settings". Once you do this, the settings in the _settings.scss file should actually cause an affect on the gutter settings that you want to change.