For example, this is in the codebase I'm working in:
#import core/mixins/retina-sprites!
What does this mean?
That is not part of the core Sass syntax. The only add-on I am aware of that uses that syntax is the import-once plugin:
#import "something";
#import "something!"; // this will be imported again.
The plugin prevents files from being imported more than once, but exclamation mark overrides this allowing you to import the file again. This plugin used to be a stand alone extension, but is now bundled with Compass by default.
Related
I created a new cli project with --style=sass and then defined some variables in the src/sass/styles.scss (no partials created) so they should be globally defined right? , so when i tried to use them in home.component.scss i got this error https://imgur.com/a/IckJL14
i then added a black border just to make sure normal css works and it did work , the problem is with sass ,
here's the angular.json
"styles": [
"src/sass/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/malihu-custom-scrollbar-
plugin/jquery.mCustomScrollbar.css",
"./node_modules/animate.css/animate.min.css",
edit: i then created a partial _variables.scss and in the component.scss i wrote #import '~sass/variables'; after importing them in the styles.scss like so #import './variables'; according to the guide from this link : https://scotch.io/tutorials/using-sass-with-the-angular-cli
still not working.
The best approach to achieve this, is creating a variable file and import this file in your scss files.
Like so:
#import "../../variables.scss";
or
#import "~variables.scss";
And in your styles.scss you just put a reference of your variable file!
If it's correct that you used the --style=sass option on project init, then that might be the problem. If you intend to use .scss files (which I would recommend), then you should have used --style=scss.
To fix this now, you can run the command ng set defaults.styleExt scss.
the answer was to simply add the full path to the component.scss like so,
#import "src/sass/~variables.scss"; instead of just #import "~variables.scss";
I am using bootstrap-sass. The node module is installed. I should expect I can, in any .scss file, use the below line to import into an appropriate sheet
#import 'bootstrap';
My understanding is what should happen is the compiler crawls up until it finds package.json, hops into node_modules, and finds the appropriate package. Instead I am getting the below error.
Error: File to import not found or unreadable: bootstrap
If I replace my import with a fully qualified path as below, then everything works gravily.
#import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
I am using gulp-sass to compile. Guessing I just have some minor config bits off but I can't figure out what it is.
Pass the path as an includes path....
Eg. It will look something like this if you're using gulp
.pipe(sass({
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']
}))
Then you should be fine to use:
#import 'bootstrap';
It will not import stuff like Javascript / Node.js. It will look for the bootstrap file in the same folder as the file which imports it. So yes, you need to use the long path or place the bootstrap file in the same folder.
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
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I have a simple Rake Pipeline setup that does nothing more than run "stylus" on my .styl files, using the rake-pipeline-web-filters gem. (The original pipeline does much more, but I've trimmed it down to the essentials for this question.
=== Assetfile ===
require "rake-pipeline-web-filters"
output "build"
input "app/style" do
# Compile Stylus to CSS
match "*.styl" do
stylus
end
end
This works fine for converting individual .styl files to individual .css files.
However, I am not able to use the Stylus #import command to import one file in another (necessary for mixins, among other things. Instead I get the error
ExecJS::ProgramError: Error: stylus:1
> 1| #import "appmixins"
2|
failed to locate #import file appmixins.styl
All the styl files are in the same folder, and when I execute stylus on the commandline using the npm version, the import works fine, so there's no syntax error.
Is this just something that's missing from the Stylus Filter in rake-pipeline-web-filters, or is there something I can do to make it work?
Ok, it looks like when I run the in Rake Pipeline in assumes all paths are starting from the directory I'm running the pipeline in, and so all the #imports have to be relative to that. Changing my imports to #import "app/style/appmixins" worked. This is different from what the NPM version of Stylus does, since it expects (and the docs specify) that all the paths are relative to the individual stylesheets. Not sure if I could have specified the block differently in the Assetfile to make this work as expected, but no matter, it all works for me now.