I would like to customise Twitter Bootstrap using SASS. I have all my SASS files in my project. I was thinking that it would be a good idea to "override" all classes I use in html by using #extend of the really same class from Bootstrap.
This would give me the ability to upgrade the Bootstrap without warring if any class name has changed. All I can even change used classes quite easily later.
My custom Sass:
...
#import "bootstrap/buttons";
.btn {
#extend .btn;
}
...
The problem here is that the import put everything what is in that file to final css. I have the question if I should customise the class namespace like this way or if it is not a good idea and I should customise the framework just using the variables and further class customisation?
Thanks,
Mateo
Overhead won't be too big and if you keep imports before your "dependency injection" it should be all ok. But i don't know how useful it is in a long run. If they change class name then the properties also change and JS works with the native classes. Also it might have some potential problems with the override priority.
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
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've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.
I've edited #navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.
What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using #import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?
Did you read some info about configuration this gem?
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
Need to configure a variable or two? Simply define the value of the
variable you want to change before importing Bootstrap. Sass will
respect your existing definition rather than overwriting it with the
Bootstrap defaults.
$navbarCollapseWidth: 769px;
#import "bootstrap";
Or that is not what you need?
I've got an app that's using JQueryMobile and it's using the awesome ActiveAdmin extensively as well. While I love the ease and simplicity of the ActiveAdmin interface, I'd really like consistency with the rest of my app.
Is it possible (i.e. using standard ActiveAdmin and not modifying its sources) to re-skin ActiveAdmin to use the JQuery-Mobile look and feel?
Its very possible to reskin ActiveAdmin, though it would be a bit of a job to do, and there would likely be quite a number of things that can't perfectly be built to match a mobile presentation, especially if you don't want to get into overriding markup rendering.
You can always simply start adding styles of your own to the active_admin.css file that is generated for you. If you'd like to start without any of ActiveAdmin's styles at all, you can comment out the two sass imports in that css file:
#import "active_admin/mixins";
#import "active_admin/base";
Or at least just the base file. It may be intriguing to you in itself, or informative about the organization of the markup, to view your current admin pages without the base css, or with css turned off in your browser altogether. From that vantage point, you could begin to think through how the bare markup could be restyled to match a mobile presentation.
I'm getting used to working with compass and Haml now and it's pretty awesome. However, it would be great if the two could work more closely together. It seems not possible, however I might have overlooked it or didn't search properly.
I guess I mean something like this:
general variable file:
$container-id = "container"
$primary-column-id = "navbar"
Haml file:
!!! 5
%html(lang="en")
%head
%title
%body
#{$container-id}
%section#{$primary-column-id}
Compass file:
#{$container-id} {
width: 900px;
}
#{$primary-column-id} {
width: 400px;
}
From my research and usage, this is currently not supported (without some sort of custom outside solution). I agree that it would be an awesome feature in theory, but I assume it doesn't exist because of separation of concerns.
For example, specific Haml files would have to be aware of linkage to other specific Sass files when compiled, and pick up declared variables. This does happen Sass <- -> Sass, via partials. However, with the idea above -> the markup (Haml) is blending somewhat with the styling (Sass/Scss). Though they reference one another - they have different purposes. e.g. An ID in the DOM is an attribute of the object, whereas in the stylesheet the ID is the selector of the object.
A framework (such as Compass) could theoretically achieve something like this because it looks at projects - but it might be more appropriate to have a unified project wide config file (neither Sass nor Haml) for your variable declarations or something.
This'd be a great question to get Chris Eppstein's opinion on: https://stackoverflow.com/users/41221/chriseppstein