I use stylus and scss in my project.
Is it possible to have one common variables file that I can use with both?
I have tried:
variables.scss
$primary: #00A9E0
main.styl
#import 'variables.scss"
which obviously did not work because of the different syntax
Move your variables to _variables.scss(partial file) and import it.
#import 'variables';
Related
In Less I can do something like this
#basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "#{basePath}less.less";
So I tried to do the same thing in Sass
$basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "${basePath}less.scss";
// Syntax error: File to import not found or unreadable: ${basePath}less.scss.
and
#import "#{basePath}less.scss";
// Syntax error: File to import not found or unreadable: #{basePath}less.scss.
Is there a way to do this in Sass?
You can't use conditional stuff for imports in SASS.
Consider creating a Compass extension out of your project.
You cannot use variables in import paths as already mentioned. What you can do is use the -I or --load-path option to specify a directory to search from.
sass --watch sass/:css/ --load-path ../../path/to/library/
Let's say you have a directory structure like this:
themes
hotdog
_variables.scss
classic
_variables.scss
styles.scss
Your styles.scss should have import paths that are relative to the provided load-path(s):
// note the import here doesn't contain themes, hotdog, or classic
#import "variables";
#debug $foo;
Your commands would look something like this:
# hotdog
sass styles.scss hotdog.css --load-path ./themes/hotdog/
# classic
sass styles.scss classic.css --load-path ./themes/classic/
See the Sass options documentation for more information.
Is it possible? I've using scss with react and I've to create many .scss files, what's annyoing is that I always have to #import variable although it's global.
First create a entry point scss file name "app.scss"
Then create "_variables.scss" file which will contain all variables.
Then you create other component files like "_header.scss, _button.scss" ...
Then import the _variables.scss file in app.scss.
app.scss
#import "variables.scss" /*Note that this should be before any other components*/
#import "header"
#import "button"
...
Importing it at the top will ensure that all remainig components will
have acess to the variables
Then import the app.sccs file in your reactjs app.
First some background. We have a main sass file main.scss where we are basically just importing other scss files.
/* ==========================================================================
Base
========================================================================== */
#import "base/colors";
#import "base/variables";
#import "base/typography";
#import "base/layout";
#import "base/font-icons";
#import "base/base";
#import "base/ie-fixes";
Later we import components too from outside of the styles folder because we have a components like development approach where we have components with it's .js .html .scss files "bundled" in a folder.
Now the question. Say I have such a component e.g /account. In account.scss I am using variables from styles/base/variables if I write the account.scss file with #import "../../styles/base/variables" then I am duplicating code for the sass output IF i have other rules defined in the variables.scss and NOT only true variable declarations. Okay, in variables.scss I should only have variables but say in colors.scss I may have variable declarations as well as rule declarations e.g
$grey: grey;
.grey { color: $grey; }
Now if I import colors my output sass file will contain .grey { .. } at least two times so it is duplicated. Okay, let's split colors up and move rules into a different file and let variables declarations only. Then I can freely import the file without duplication.
Now my question is why would I import? Is there any benefit of importing variable decalarions into account.scss outside of documentation?
I hope I was clear I tried to be as clear as I could.
You already answered your own question:
Okay, let's split colors up and move rules into a different file and
let variables declarations only. Then I can freely import the file
without duplication.
I would always separate mixins from functions from variables – and most important: separate all of these from output that is being generated. This way you can safely import modules or single parts of your SCSS anywhere.
For example:
/setup
_variables.scss
_functions.scss
_mixins.scss
...
_module.scss
/global
_base.scss
_layout.scss
_typography.scss
_helpers.scss
...
_module.scss
/components
_slideshow.scss
_pagination.scss
_widgets.scss
...
_module.scss
main.scss
Every _module.scss in one of the subfolders would like like this:
/* setup/_modules.scss */
#import 'variables';
#import 'functions';
#import 'mixins';
The main.scss would look like this:
/* main.scss */
#import 'setup/module';
#import 'global/module';
#import 'components/module';
Your question after what would be the benefit of importing: I don’t know. You have to know since only you know your application. If a 'standalone' component uses the same color set, for example, importing one single _colors.scss is indeed a good idea and keeps you DRY.
I have a parent SCSS file that is importing my other CSS files:
#import 'variables.css';
#import 'helpers.css';
#import 'layout.css';
And I have three scss files: variables.css.scss;helper.css.scss & layout.css.scss.
In variables I am defining colours, fonts and sizes to be used throughout the site. The trouble is I assumed these variables will be available to the other documents so long as it is imported first, but I am getting Undefined Variable errors.
I assume I just have the process wrong. Where am I going wrong?
You can do it that way if you're ok with an extra file as a middleman.
_master.css.scss:
#import 'variables.css';
#import 'helpers.css';
#import 'layout.css';
site.css.scss:
#import '_master.css';
The problem is how you named the scss files. The way you are importing the files makes SASS think that you are using the #import CSS rule https://developer.mozilla.org/en-US/docs/CSS/#import
Rename those files only with the scss extensions, remove the ".css", and import them like this
#import 'variables.scss';
#import 'helpers.scss';
#import 'layout.scss';
or you can even skip the extension at all
#import 'variables';
#import 'helpers';
#import 'layout';
If you want variables to be available on the other files you'll need to include that css in them as well. So basically layout.css.scss and helper.css.scss will need to have #import 'variables.css'
All I need is to do is have a directory with my custom reset sheets and other sass files for imports.
I've been playing around and I can't get compass to read my custom sheets.
1) Where do I put my custom css sheets for import?
2) how do I #import them
(I'm using the sass indentation, but I doubt that makes a difference,)
(I know little about ruby I'm just using it for compass)
Thanks
Look at the #import section in Sass reference.
You can import a Sass file without telling explicitly the file extension:
#import "file"; /*will import file.scss or file.sass. Anyway you could as well use #import "file.scss" or #import "file.sass*/
To import a CSS, provide its extension.
#import "file.css"; /*will import file.css"
There are more ways to differentiate them in the reference, but these are the most used.
You can put your files where you want, but write the path relative to the current directory (the directory which the file from where you are importing is).