I have installed Foundation SASS using Bower. Then I have imported foundation and initialized it by the following commands on my main.scss:
#import "../vendor/foundation-sites/scss/foundation.scss";
#include foundation-everything(true); // Init the foundation
The problem is that, there's a setting file, _settings.scss, that foundation.scss import which I need to override. Since I shouldn't touch the files inside Bower directory,vendor/, I need to make those changes on my main.scss. And no, the _settings.scss doesn't make use of the !default functionality. A snippet of how the settings are defined is as follows:
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
Is there any way I can define a variable before the include just so that it doesn't ever get overwritten? Something like..
$global-font-size: 16px !important;
$global-width: 1000px !important;
$global-lineheight: 1 !important;
#import "../vendor/foundation-sites/scss/foundation.scss";
#include foundation-everything(true); // Init the foundation
Two cases, two way :
You must maintain a package in bower
I will use symbolic link to make things easy. Take a look about my project files.
I have install foundation with bower :
bower_component/foundation/scss/{...whatever}.scss
Then I would create a symlink to .bower_component/foundation/scss folder.
src/scss/foundation # this is a symbolic link to -> ./bower_component/foundation/scss
And I copy files I want to customize out of bower_component.
src/scss/my_settings.scss # copied from foundation/scss folder
And I add my own scss.
src/scss/main.scss
which import all my customization and foundation.scss all together
#import 'my_settings' ;
#import '...other_customization...'
#import 'foundation/foundation' ;
Then build src/scss/main.scss, and everything works well.
Then you can maintain foundation version with bower without worries. No matter what changes in bower_components/foundation, just make sure the folder name and relative path is right, everything will be fine.
Well, the version is not so important.
Ask yourself a question. What benefit you with foundation being maintained by bower? If there is no good reason for you, you could just move foundation out of bower_component folder and do any change you want.
Bower doesn't prescribe to the user its own build system, or to the
developer a method of including libraries (AMD, CommonJS, etc.) All
Bower does is install the right versions of the packages that the
project needs and their dependencies. In other words: it downloads
source files for the right libraries and everything they need into a
special folder. Everything else is up to the developer.
Quoted from : Artem Sapegin
Related
Folder structure:
Error description:
Sass version:
ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.
OS: MX Linux.
Sass is able to compile my code just fine if i don't use #use or #import.
Try importing like below with a relative path:
#use ./abstracts/resets
Here is an overview of how Sass imports files:
Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; #import "variables" will automatically load variables.scss, variables.sass, or variables.css.
⚠️ Heads up
To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use #import "susy" to load node_modules/susy/sass/susy.scss.
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
💡 Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
I'm currently using css-loader, node-sass, sass-loader and style-loader packages within webpack to compile my sass files, here is how my loader looks at the moment:
{
test: /\.scss$/,
loader: 'style!css!sass'
}
I want to use folder structure like this for my styles
styles
components/
main.sass
and somehow within main.sass I want to import everything from components folder so something like #import './components/**/*' is this possible via webpack?
You can prefix a Sass import with '~' to tell the Sass loader to use webpack's require() resolution on the import. Once webpack is in charge of the import you have some flexibility.
If you do a dynamic require, e.g. require('~./components/' + someVar + '.scss'), webpack can't evaluate the variable at build time and it bundles all the possible files in that directory, and the actual resolution of the require() happens at runtime (which can lead to errors at runtime if you've asked for something that doesn't exist). Not sure off the top of my head if that would give you what you need (all the files bundled) or if you would still need to explicitly require() each partial -- but if that's the case you could easily loop through all the files in the directory and require each one.
More on how you can leverage webpack's dynamic requires and loading context.
I want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
#import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the #import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it
I have a mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
I am trying to build a custom theme. I added the $base-color and $base_gradient properties to my resources/sass/app.scss and compiled it by issuing compass compile from the folder. The compilation worked and replaced the css/app.csss. However I am not seeing the changes reflected in my application. How do I change the theme with sass and compass?
Base gradient takes a - not a _
Then check that your var are defined after the line (should not matter for base-color but better to put them after)
#import 'sencha-touch/default/all';
Your vars should be defined like this :
$base-color: #7A1E08;
$base-gradient: 'glossy';
Check that you are in the [app-folder]/resources/sass/app.css and not in the sdk folder
When compiling you should see the following line
overwrite ../css/app.css
Empty your browser cache then reload your app.