By including #import "compass/reset"; in my .scss file, I can have Compass automatically include a simple HTML5 reset. I'd like to use a different reset, so how can I add my own reset to Compass, or change the default one?
The simplest way would be to create a partial in the same directory like _reset.scss and import that.
The easiest way that would allow you to use it across projects would be to create your own Compass extension.
If you create a gem out of it (even just locally), you can just require it in your config.rbs and then #import it into your .scss files.
Related
I have a project that uses CoreUI and has a file structure that looks like this:
src
/scss
style.scss
/components
/Component
Component.tsx
Component.scss
The CoreUI library is built on top of Bootstrap and requires the style files to be imported independently. Those files are imported on the style.scss file like so:
#use '#coreui/coreui/scss/coreui';
#import '#coreui/chartjs/scss/coreui-chartjs';
However, when trying to import the first scss file above into Component.scss (using the #use directive as well) to reuse Bootstrap classes, the compilation time slows down quite considerably, making it really painful to make changes to any styles. I've already tried to use the #forward rule too, as well as importing the style.scss file into a partial and importing the partial without success.
There's probably a simple workaround for this but I haven't been able to find it. How can I keep the compilation times short when reusing sass files?
I'm looking to get started with Bootstrap 4 using SCSS. I think I have Bootstrap 4 with SCSS up and running but I would like to use a theme off of https://bootswatch.com. When I used their themes with BS3 it was straight forward LESS files that you just replaced. With BS4 they have a _variables.scss which is obvious to just replace but then they have a _bootswatch.scss file which I'm not 100% sure what to do with.
I assumed I would just put the _bootswatch partial file in the same location as all the other BS partial files. Then I added #import "bootswatch"; to the end of the bootstrap.scss file and recompiled but that did seem to work.
I've search and can't find any information on this. Their documents mostly show how to insert their precompiled files or use their CDN. There is very little about using their SCSS files.
I did some research and testing and finally got it to work. I wanted to post an answer for others with the same question. Hopefully this will help someone else.
I created a new MVC 5 project and then ran the following NuGet packages.
Install-Package bootstrap
Install-Package bootstrap.sass
This will register Bootstrap and create all of the partial scss files in the Content\bootstrap folder. I then created the Content\scss and copied the _variables.scss and _bootswatch.scss files to that folder.
In my site.scss file I added the following imports to the top of the file.
#import "scss/variables";
#import "bootstrap/bootstrap.scss";
#import "scss/bootswatch";
You'll have to be mindful of the order you place them in, any other order caused it not to work or throw an error due to where the variables are being created and called.
If you research about default! you'll learn that it is the opposite of !important causing that variable to only use that setting if another one is not found. In my mind it would be more accurate to remove the !default values from the Bootswatch _varaiables which is what I did. However, that ultimately didn't seem to affect anything. I still had to use the order above.
I then had to remove any reference to Bootstrap.css in the App_start\BundleConfig.cs file and make sure it references the site.min.css file which will include all the bootstrap classes. Using the Web Compiler plug in for Visual Studio, I had it create and compile the site.min.css for me.
I'm using webpack. I have lots of sass files. Each file imports "common.sass" file. I do not want to write #import "common.sass" in each file. How can I avoid of writing it in each file?
Maybe there is opportunity to add somehow string #import "common.sass" in each file?
You can't avoid the import, because each sass partial is being processed in isolation by your loaders. But, you can avoid having to add that line to each file. Baggage-loader is a loader that lets you specify other modules that should automatically be included when loading a module. It's pretty simple and flexible, and easy enough to fork and modify if you need to.
I've created a Gem which copies sass stylesheets to a specified install location. However, I'm now working on another Gem which will contain sass stylesheets which don't need to be copied to a project.
What I'm wanting to be able to do, if possible, is to add the path to the sass stylesheets within my gem and import them from there as opposed to including them in every single project which in the long term would be useless and potentially a headache to maintain.
For example, I create a gem called sassext which contains all the stylesheets. Then within my projects I can do the following;
#import 'sassext/foobar'
Ideally, I want to be able to use the sass --watch tools as opposed to create my own.
Cheers
P.S. Any links to relevant information/guides would also be appreciated.
I have started trying out Sass for my css work. In the directory where my Css file resides I see a '.sass-cache' folder too. Can any one tell me why is this folder created and is it safe if I delete it.
thanks,
By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all #imported into one large file.
Without a framework, Sass puts the cached templates in the .sass-cache directory. In Rails and Merb, they go in tmp/sass-cache. The directory can be customized with the :cache_location option.
If you don’t want Sass to use caching at all, set the :cache option to false.
You can configure the Sass cache location by setting a Sass option in your compass configuration file like so:
sass_options = {:cache_location => "path\to\tmp\sass-cache"}
Source: Sass reference
If your main problem is "inhibiting pushes to development environments when multiple developers use/change it", you can add it to your .gitignore file. As stated in the other answer, Sass cache files speed up compilation based on whether a Sass file has changed since last compile.
In my experience it's standard practice to consider them temporary files, and omit them from version control.