I'm am using DotLess v1.4 and I would like to do the following:
// Variables
#Utilities-path: "../../Utilities";
#import "#{Utilities-path}/bacon.less";
When I do this I get a file not found error.
File Not Found while parsing: You are importing a file ending in .less that cannot be found.
If I do this it works correctly.
#import url('../../Utilities/bacon.less');
As far as I'm aware this was added to Less in version 1.4, so I assumed it would work in the latest version of DotLess.
Does anyone know if this feature is available and if so what I am doing wrong?
This is feature is not available in DotLess v1.4. Version 1.4 does not mean that is using the equivalent version of LESS.
According to: https://github.com/less/less.js/issues/410#issuecomment-16219936 it looks like this feature was added in less v1.4.0 and requires the use of a mixin to do the import.
#Utilities-path: "../../Utilities";
.bacon(){
#import "#{Utilities-path}/bacon.less";
}
.bacon();
Related
In my component's scss file, I am trying to use other scss files.
I thus wrote the following as the first statements in my component's scss file (before anything else):
#use './_one.scss';
#use './_two.scss';
However, when I run the dev server, I get a very confusing error:
[ ERROR ] sass error: src/components/my_component/my_component.scss:1:86
#use rules must be written before any other rules.
L1: #use '_one.scss';
L2: #use '_two.scss';
Also worth mentioning: _one.scss and _two.scss both use _common.scss and have the following as first statement:
#use './_common.scss'
commenting this out in _one.scss and _two.scss doesn't change anything.
Is this a known incompatibility between sass and stenciljs? I tried to search for answers but to no avail. What am I missing here?
Help appreciated. Thanks!
While trying to use grunt to convert my sass files into normal css files i get the warning:
Warning: Encoding::CompabilityError: incompatible character encodings: UTF-8 and CP850.
However when I run sass calling the file(s) everything works as it should even though no encoding is specified by me. My Gruntfile.js looks like this:
[...]
sass: {
main: {
files: {
'css/theme/default.css': 'css/theme/source/default.scss',
'css/theme/beige.css': 'css/theme/source/beige.scss',
'css/theme/night.css': 'css/theme/source/night.scss',
'css/theme/serif.css': 'css/theme/source/serif.scss',
'css/theme/simple.css': 'css/theme/source/simple.scss',
'css/theme/sky.css': 'css/theme/source/sky.scss',
'css/theme/moon.css': 'css/theme/source/moon.scss',
'css/theme/solarized.css': 'css/theme/source/solarized.scss',
}
}
}
[...]
which is a part of the Gruntfile.js I forked from the reveal.js on GitHub. I took a look at the grunt-contrib-sass on GitHub and tried to find the option to change the encoding manualy. However it apears that there is none (maybe I just overlooked it?).
I think a keypart of the problem is that I am using Windows 8 and not any Unix based OS.
So my question is:
How do i get rid of this warning? Or how do i fix the code to work properly?
Any help is appreciated.
I had this error when trying to use the command:
sass --watch global.scss:global.css --style compressed
And the cause was the most stupid cause ever... I had this folder: E:\Dropbox[Websites][External] Fundación Global\css and I run the command in there, and SASS returned this same error: Warning: Encoding::CompabilityError: incompatible character encodings: UTF-8 and CP850.
I just needed to take out the ó from the folder's path!
That simple and silly! Just changed this: ...Fundación Global\css for this ...Fundacion Global\css and I have SASS watching with no issues again.
I am working with really big projects which are using compass(compass sprites tools including) sass framework cli tool(compass watch, compass compile) to create app.css file. Sass of the project is using multiple #import statements to include dozens on sass partials.
Problem is that app.css file is compiling for more than 2 minutes(app.css is 70000 lines long) after each small change in any sass partial imported into app.scss file compiling all of them at once while I need only 1 line change.
I made an extensive research and found articles like this one http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import which is suggesting to use spockets instead of #import to include sass partials. I like the solution more than most but big refactor will be needed even to test if it will work also all global includes like mixins and variables will need to be included in each sass partial used in the project which is also not ideal.
After some more research I have found this https://github.com/petebrowne/sprockets-sass tool which should automatically transform #imports into spockets require statements for compiler and also preserve ability of global imports.
The problem is I don't know ruby and did not use anything ruby related else then "gem install" statement )))
Can someone who knows ruby help me by explaining step by step how to make compass compiler work with sprockets-sass ?
P.S Please do not suggest solutions like libsass and it's like I have tested it by excluding all compass sprite related stuff and libsass also take a bunch of time to compile 40000 lines that remained without sprites(I suspect that part of the problem is not in compilation speed but in time system needs to create 400000 line file after).
The only thing that you can do is to split the output top-level file (app.css) into multiple output top-level files, and at the end of the compass-compilation reconcat them with a sprockets task!
This optimizes the usage of sass cache and the final concat-task is efficient because is a simple concatenation!
By the way, at the moment, compass is replaced with the EyeGlass Project made by Chris Eppstein the author of Compass.
So Consider the idea of a whole refactoring using (grunt/gulp) with libsass (A sass compiler built in C/C++) and EyeGlass that adds all compass-like features to sass!
hope Helps!
I've got an app broken into a handful of packages. Each of these packages has their own .styl sheet to style the components that specific package offers. Currently, these .styl sheets all rely on the same functions, mixins, and variables declared in the variables.import.styl that is in the ./client/styles folder. I do this because if I change the errorRed color in the variables.import.styl, it changes the color across all packages.
To get access to those variables, at the top of each package's stylesheet, I have a #import "./client/styles/variables.import". Alternatively, I could create a separate package for the stylus vars & then make that package a dependency in all the other packages. I don't love either option, but I suppose it's the price I pay to keep stylesheets separated by package. Anyone have a more elegant alternative?
It's worth noting that on the Meteor devel branch, my previous solution no longer works (stylus can't see folder above the package root). Regardless of whether this is fixed or not before the next version release, I know there's gotta be a cleaner solution.
As of Meteor 1.2, this is now a feature working out of the box, for both stylus and less stylesheets.
https://github.com/meteor/meteor/tree/devel/packages/stylus#cross-packages-imports
In your package.js Package.onUse section, use api.addFiles to declare stylus sheets provided by this package :
api.addFiles('styles/package-sheet.styl', 'client', {isImport: true});
Notice the isImport: true option ?
Then in your main app master stylus stylesheet you can import a specific package (let's suppose it's named my-username:mypackage) sheet using this syntax :
#import '{my-username:my-package}/styles/package-sheet.styl'
Note that for importing sheets within your app you will also need to use this new syntax, without any package name :
#import '{}/client/styles/app-sheet.styl'
The previous syntax will no longuer work !
// the Meteor build tool will complain about not finding the sheet
#import 'client/styles/app-sheet.styl'
I'm building a Sass library and I want to let the user check both the library and Sass versions to see if he can safely output his code.
The library version is defined as a $variable on the index .sass file, and I wanted to use a function/mixin that could be like required_versions($library, $sass), where both arguments are the minimum required versions to be used on the project.
For Sass version checking, I saw this http://webdesign.tutsplus.com/articles/when-and-how-to-support-multiple-versions-of-sass--cms-20935, but I want something more acurate.
At first I thought I could use Version to get Sass version, and version_gt or version_geq to compare the versions stated in the function/mixin arguments with the Sass' Version :number and the library version defined on its index file, but these seem to be Ruby's only methods.
Is there a way to make something like this?