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.
Related
Can't find any resources online, but i'm trying to optimize our in-house component library, which i'm trying to make more tree shaker friendly.
How with rollup can i leave .css files in the output along with maintain their import in the file.
I.E
Foo.js (inside import "./foo.css")
Foo.css
Output.
Foo.js (inside import "./foo.css" remains) created into module
Foo.css
This seems as straight forward as possible and iv'e found similar threads asking for this but zero responses. https://github.com/egoist/rollup-plugin-postcss/issues/204
Allowing this will basically mean when people who consume my project will only get critical css automatically.
I.E Import { Foo } from "xyz/foo" will automatically import the accompanying css file.
Unfortunately I couldn't find a solution with Rollup for what you're looking for. However, if you're open to using Webpack there's a plugin that would make this possible called MiniCssExtractPlugin. It creates CSS files per JS file and would achieve the structure you're wanting.
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
Say I have a ton of small classes that I want to import all at once, is there a way to define a file that is literally just a list of imports and then only import that one file instead of having a long list of imports for each class?
Your suggestion will work fine: you can create a header file, and put #import "..." directives in it. Then you can include that header in all your files as needed.
Xcode provides an even better solution - the file called Prefix.pch. Instead of creating your own header, put the #import directives there. The result would be that all your files will implicitly include the files that you import in Prefix.pch - you wouldn't even have to import them.
I'm trying to load an .less file into my main theme, this is my filestructure:
main.less
themes/pink.less
themes/yellow.less
themes/blue.less
I'm using this mixin to retrieve the selected theme:
.theme(#filename){
#import 'themes/#{filename}.less';
}
.theme('pink');
It doesn't work and I get this error:
SyntaxError: variable #filename is undefined
.theme('pink');
I'm used to do the same with background images without getting errors, where I'm wrong?
Unfortunately Less.js throws the error you describe with imports for .less files (it works fine with imports for .css files), if you define the variable in in the mixin parameter/attribute, but it works if you define the variable directly inside (localy) or outside the mixin (globaly). For example, this should work:
#filename: 'pink';
.theme(){
#import 'themes/#{filename}.less';
}
.theme();
Here is a link to a discussion where the plan of implementing this has been discussed a while ago, and it seems that the longterm goal is to have your version working as well, it just hasn't happened yet completely ^_^
However, if you just want to load a theme according to the variable, you can do it without the mixin. just by doing something like this:
#theme: 'pink';
#import 'themes/#{theme}.less';
I'm new to Objective-C here, and still learning its syntax, so I'm experimenting some things... and I'm trying to understand how the #import statement works when it comes to importing a file inside a folder.
I have a main function inside of a file and in the same directory of my main function contains a folder for a class, inside that folder I am trying to import a header file for that class.
I'm trying to import it like this:
#import "Person/person.h"
And I believe that should work but instead Xcode fires off a error saying it can not find the file/directory.
The folder that contains person.h is in the same directory as my main function's file.
I still don't understand what's wrong with that piece of code, if someone can tell me the proper way to do this it would help a lot, thanks!
Try #import "person.h", the folder isn't really. It is a group, something like a virtual folder in the project, that let you organize visually your project files.
(one way) to use this functionality is to add the parent directory (of Person/) to your target's include paths.