Importing a file with LESS won't see the #filename var - less

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';

Related

Compile Less file using less.js on run time

I have multiple less files like variables.less, custom.less etc into variables.less files I have declared a #base variable and used in into different less file. Now we need to compile these less files using less.js and jquery so that if any user change #base color at run time then the theme change at run time. Is these any way to do it.
You can have all your .less files You want separately, then, make one to import and compile, for example libs.less
In that file, You may want to import all your other Less files; for example:
#import "common.less";
#import "variables.less";
#import "colors.less";
#import "otherlessfile.less";
Then compile... I use Winless, a very nice and easy to use compiler.
pd: This is my first answer here, regards ;)

How to avoid "Redefinition" and "Duplicate Protocol" definition errors in Bridging Header

I want to use a objc library and a objc class in a swift class. So I place the following in the Bridging-Header.h:
#import <FooLibrary/FooLibrary.h>
#import "FooClass.h"
The problem is that the FooClass.h has
#import "FooLibrary.h".
So when I compile I get hundreds of errors like:"Redefinition of enumerator" and "Property has previous definition" and "Duplicate protocol definition" and "Typedef redefinition"
How do I avoid this? It seems like this is just a stupid mental block I am having but I can't get past it so here I am asking.
PartiallyFinite suggested I watch for #include
I did a project wide search and I and not using it at all. There are a few in the library. I chose one of the errors. The file the decoration is in is never included in any file with #include
Sounds like something is causing the preprocessor to believe that the FooLibrary.h header imported indirectly by the second #import is somehow not the same file as the one you include just above it. My best guess as to what is that your first, framework-style import is referencing header files that are copied to a build location during build, while your second, direct file import is referencing the header file as it is in your project directory, meaning that the preprocessor sees them as two completely separate files, resulting in it being imported twice.
Proposed ways to fix:
If you can include FooClass.h using the framework-style import syntax (like #import <FooLibrary/FooClass.h>), that will probably fix the problem.
If you're absolutely sure that FooClass.h will always include FooLibrary.h, you can probably just omit the first import entirely, as everything will get imported indirectly via the second one.
Otherwise, you can try some nice, old-fashioned include guards (assuming you have write access to the library headers):
// FooLibrary.h
#pragma once // Maybe even throw in one of these for good measure;
// since we're dealing with an obscure-sounding bug,
// may as well try to fix it in all of the possible ways
#ifndef FOOLIBRARY_IMPORTED
#define FOOLIBRARY_IMPORTED
... // actual file contents
#endif
This will define a preprocessor macro the first time the file is imported, so the second time the preprocessor tries to import the file, the already defined macro will prevent the contents from being imported a second time. I fail to understand why the #import isn't doing this in your case, as that's literally its only purpose and advantage over #include, but if this fixes it, ¯\_(ツ)_/¯
This can also be caused by cocoapods - try upgrading or downgrading to a different version and re-running pod install
For me it was happening when I upgraded Xcode. All I did was to Clean Build folder and run again and it worked!

Using SASS, how can I access a variable from a partial file that is defined in base file?

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.

How to use LESS in twitter Bootstrap

I am trying to use LESS variables in Twitter Bootstrap but cant seem to get them to render in my application.css file
So when i setup bootstrap i installed
rails generate bootstrap:install --less
Which gave me my
bootstrap_and_overrides.css.less
So my understanding is that in this file i can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so
color: #white;
In my bootstrap.less file i call these
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
#import "twitter/bootstrap/variables.less";
and in my application.css file i call the bootstrap file
*= require bootstrap_and_overrides
Gemfile
gem 'less-rails'
This doesnt work and my variables are not being applied
Can anyone see anything that i am doing wrong?
any help appreciated
Thanks
... I can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so color: #white;
Hi, I'm not so familiar with using LESS inside Rails, so apologies if I'm off here.
I can only use less variables inside a file which will be compiled. So for example I can set
#white:#FFFFFF in a variables.less file
perhaps in a custom.less file I have
.light{
color:#white;
}
After I've compiled everything I can use the class .light in my CSS
So to address your quote above, you can set your less variables like
#white:#ffffff
and then you can use that variable in another less file which will be compiled, but not directly in a CSS file.

Objective-C's #import statement - Won't Import a file inside a folder

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.