I have a project based on twitter bootstrap 3 and I'm using the LESS file from bootstrap to take advantage of the mixins and breakpoint variables (like #screen-md).
In my own style.less file I imported:
#import "../less/bootstrap.less";
When I look at the output (style.css) there are more than 6000 rows. Is there a way to use the mixins from bootstrap 3, whilst still keeping an economic file size?
Now Available in LESS 1.5
You can import a file just for reference purposes, so:
#import (reference) "../less/bootstrap.less";
Will give you access to the mixins without actually including the code in your output css.
You can import only those LESS bootstrap files that you need.
bootstrap.less itself imports all other LESS files, that's why output is so huge.
Take a detailed look at the contents of 'less' directory.
The files you're looking for are probably mixins.less and variables.less.
bootstrap.less contains all other imports make your style.less like:
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// your styles here
NOTE when you import bootstrap.less in your style.less you will compile bootstrap + your styles
Related
Im looking for a trick to make my life easier. I want to style each component in my nuxtjs application with a similar color palette, but I do need to enter the color palette in each component. Tried to use scss for the first time. How do I put variables more globally and how to reach them?
I tried to put the code into assets/scss/styles.scss But components know nothing, about remote scss.
$color1: #808060;
$color2: #3D3D34;
$color3: #151510;
$color4: #090906;
As #jayce444 mentioned, this thread will give you multiple options to achieve the task.
However, you need to think before you take this approach. In general, you should import your variables file in each component SCSS:
<style lang="scss">
#import "<PATH_TO_ROOT>/assets/scss/styles.scss";
.someclass { color: $some-variable; }
</style>
By doing this, you will protect yourself for many uncertain future possibilities. Some of them are:
Splitting repository into multiple micro front-ends
Moving into Lerna like Mono repo setup
Reusing component in other code-bases
Being explicit is more maintainable than having magical auto/global imports. We, as developers, spend more time maintaining code than writing new code.
Alternately, another clean solution is not using vue-loader for managing SCSS. It means you should not use style tag inside .vue files.
Create one master style.scss file. For each component create dedicated .scss file. And import all these files into master style.scss like:
// External third party scss from node_modules
#import '~#material/button/button`;
// Base color style sheet (SCSS variable are global)
// By importing it here, all the subsequent .scss file have access to variables
#import './styles/colors`;
#import './components/component-1`;
#import './components/component-2`;
// .... Add remaining component
#import './components/component-n`;
There are a few advantages. Your stylesheet is no longer tied to the framework specific abstraction. You can reuse your style more easily with other code bases built on top of other frameworks. Of course, if you need to have Scoped-CSS which .vue files provide out-of-box, consider using BEM notation.
Finally, if you decide to import variables .scss file in each component, then you can use node-sass and webpack aliases to shorten the import path.
I know this is an old question but the answer still might help someone.
So to include the variables, mixins any SCSS style globally you need to load it using NuxtJS Style resource.
So for example you would have the settings.scss file in /assets/scss
$color-one: #fff;
$color-two: #000;
And you would import it in nuxt.config.js through styleResources object
styleResources: {
scss: ['assets/scss/settings.scss']
},
Make sure to read the Style Resources documentation for more info
I have multiple less files like variables.less, custom.less etc into variables.less files I have declared a #base variable and used in into different less file. Now we need to compile these less files using less.js and jquery so that if any user change #base color at run time then the theme change at run time. Is these any way to do it.
You can have all your .less files You want separately, then, make one to import and compile, for example libs.less
In that file, You may want to import all your other Less files; for example:
#import "common.less";
#import "variables.less";
#import "colors.less";
#import "otherlessfile.less";
Then compile... I use Winless, a very nice and easy to use compiler.
pd: This is my first answer here, regards ;)
Based from the Readme files of Mirage 2, it says here:
If you want to base your theme on an existing Bootstrap theme (like the ones at bootswatch.com) you can do so by using the standard Bootstrap color scheme and replacing the import of Bootstrap in bootstrap_color_scheme/_main.scss:
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
with an import of just its _variables.sccs file (those variables need to be defined, because they are used in _dspace-bootstrap-tweaks.scss):
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";
Then import the the css file(s) of your Bootstrap theme of choice below it. Depending on the theme you may also need to update the twbs-font-path function right above that import statement.
What I did:
Ok, so I activated the mirage2_bootstrap_color_scheme maven profile. Copied the bootstrap_color_scheme/_main.scss from dspace-xmlui-mirage2/src/main/webapp/styles/ into dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles.
I changed the text in _main.scss that says #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap"; into #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";, and then I copied the bootstrap.min.css that I downloaded from bootswatch.com and put it in the same directory with _main.scss and then I referenced it in _main.scss with an #import "bootstrap.min.css"; statement.
I'm having this error when running mvn package:
error styles/main.scss (Line 12: File to import not found or unreadable: variables.`
I also tried putting the _variables.scss under the bootstrap_color_scheme directory and used the #import "variables"; but I got the same not found or unreadable error.
Can someone guide me on how to correctly use the themes from bootswatch.com to apply to Mirage 2? An example and a simple walk through of using a sample theme from bootswatch.com would be great.
Thanks in advance.
I deleted my other answer because I was mistaken.
Here is an example of a working bootswatch theme:
https://github.com/antoine-atmire/DSpace/tree/mirage2%2Bbootswatch/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles
The /styles/bootstrap_color_scheme/_main.scss file gets copied to /styles/main.scss during the build process, so the #import statements should be relative to /styles/main.scss.
Bootstrap-sass has updated its paths, and the Mirage 2 docs are not yet updated.
_variables.scss is now stored here: "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss"
Depending on which version you're using, it can even be in another place.
A general recommendation is to look at the vendor folder in:
dspace/modules/xmlui/target/xmlui-*/themes/Mirage2/vendor/
Look for the path of the variables file there and use that path.
Im new to SASS and have a question, perhaps I'm not understanding correctly.
I have my base file (global.scss) and then several partial files. I'm working on a project currently and I want to define a few custom colors to use throughout (as in, I want to be able to define $color-navy as '#162a3e'). How can I set these variables and access them in my partial files and my base file?
I really hope this makes sense, I'll try and clarify more if needed.
First you make a file variables.scss with content like
$navy: #162a3e;
Next you just include this file at the beginning of each partial (and your global) as follows:
// Import this in any partial and in your global.scss
#import "variables";
// you have access to $navy ! yay
.saucy{
color: $navy;
}
Technically you can get away with just importing it in your global.scss if and only if you are just compiling global.scss (and not the partials as individual stylesheets) but that's a bigger topic. It doesn't hurt really to just import variables.scss every time.
I am trying to use LESS variables in Twitter Bootstrap but cant seem to get them to render in my application.css file
So when i setup bootstrap i installed
rails generate bootstrap:install --less
Which gave me my
bootstrap_and_overrides.css.less
So my understanding is that in this file i can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so
color: #white;
In my bootstrap.less file i call these
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
#import "twitter/bootstrap/variables.less";
and in my application.css file i call the bootstrap file
*= require bootstrap_and_overrides
Gemfile
gem 'less-rails'
This doesnt work and my variables are not being applied
Can anyone see anything that i am doing wrong?
any help appreciated
Thanks
... I can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so color: #white;
Hi, I'm not so familiar with using LESS inside Rails, so apologies if I'm off here.
I can only use less variables inside a file which will be compiled. So for example I can set
#white:#FFFFFF in a variables.less file
perhaps in a custom.less file I have
.light{
color:#white;
}
After I've compiled everything I can use the class .light in my CSS
So to address your quote above, you can set your less variables like
#white:#ffffff
and then you can use that variable in another less file which will be compiled, but not directly in a CSS file.