I'm using assetic with less filter and storing main less file in app/Resources/...
I'd like to import into that file other less stylesheets from inside bundles.
Everything works fine but the paths are driving me nuts.
My base.less looks more or less like this:
#import 'normalize.less';
#import 'mixins.less';
#import 'header.less';
#import 'footer.less';
#import "../../../../../../src/Acme/FooBundle/Resources/public/less/example.less";
Is there a way to pass 'paths' option to less compiler in symfony2?
EDIT: I've found a issue for my problem on assetic's repo on github:
https://github.com/kriswallsmith/assetic/pull/218
Isn't it possible to store the path in a variable like they say in the less documentation?
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
This is not exactly what you want but this way you define it only once.
Related
I'm trying to import a Google Font inside the main.scss file, but following code didn't work:
#import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
Is there a way to do that? I looking for this question in stackoverflow, but I don't find a concrete answer...
Can somebody help me?
Instead of using url(), try the below:
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700';
The correct syntax for importing Google Fonts into Sass:
#import url('https://fonts.googleapis.com/css2?family=Alegreya + Sans + SC:wght#400;500;800');
Another example from my case, for multiple import:
CSS:
#import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap');
SCSS:
#import 'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap';
Right know, using Gulp and Dart Sass, both work. I prefer the Sass-way, just saying. So, with the new Google Fonts’ syntax:
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap");
or
#import "https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap";
give the same, exact result compiled from Sass to CSS. Then, if you add one of these in a .scss file, you don’t have to worry at all.
The site I'm working on uses the rails asset pipeline and an application.scss file to import and process different CSS files.
However, some stylesheets are used in specific places, and for those, it makes little sense to import them into the global manifest. But not so importing them requires importing variables.scss, and possibly mixins.scss into the sheet itself (so they'll process correctly), resulting in duplicate code in the final CSS.
Is there a way to basically tell the preprocessor - "trust me, the variable/mixin you're seeing will be defined by the time everything gets processed"?
Otherwise, I don't see how to avoid importing every sheet into a single manifest, which seems bloated.
Thanks.
The short answer to your question is no. The variables need to be defined in a logical order from when they are called in compilation. It's like a "chicken and the egg" scenario.
From what I can ascertain in your description, the project you're working on is not compiling into a unified workflow, but chunking out into modular portions relational to your file structure. IF this is the case, what you can do at the beginning of each file is reference the variables file from the root.
In a normal workflow, you would import your scss files based on your defined hierarchy like so:
sass/style.scss
/* Main Stylesheet */
#import "variables";
#import "mixins";
/* Modular Sections */
#import "layout/header";
#import "layout/body";
#import "layout/footer";
would compile out to one stylesheet style.css with a command sass sass/style.scss:style.css
What I'm assuming your project does is have all the /* Modular Sections */ files compile out into their own CSS files.
layout/header.scss
/* Header Stylesheet */
#import "../variables";
#import "../mixins";
Given a files structure that resembles:
/root
style.scss
variables.scss
mixins.scss
/layouts
header.scss
body.scss
footer.scss
This all seems kinda silly though. I don't know all the parameters that go into your current sass compilation, but I'd recommend using a unified workflow.
You can use Partials so the compiler will not try to interpret variables etc.
Basically, rename the files that you do not want the compiler to interpret -- but will be available when compiled -- with an underscore before the filename.
eg.
_filename.scss
If I understood well you want to avoid copies of the same css in css files caused by using #import in scss. I solved this problems by doing a hierarchical three.
For exemple consider the home.scss file, where you import header.scss and footer.scss.
Both header.scss and footer.scss use specific colors that you import from a file named colors.scss:
// colors.scss
$MidnightBlue: #00478f;
$RedOrange: #ff5d00;
$MistyBlue: #d8e1e7;
$Ebony: #2a231f;
Now you could import colors in header.scss, footer.scss and maybe even in home.scss. The result is that in home.css the code of colors.scss is repeated 3 times.
A solution is importing colors.scss only in header.scss. Then in home.scss the first #import that you specify is #import "header.scss"; and then #import "footer.scss";, thus you can use the colors variables in footer.scss and in home.scss even if you don't import them directly in footer.scss and home.scss. That's because the variables of colors are imported before the footer and compiled before the rest of the code in home.scss.
Now if you check home.css you shouldn't see repeated code
When at first you write the color variables in footer you will receive an error because they are not defined, but it disappear when you import footer in home.scss
If you #import the same SASS file (e.g. variables.sass) in multiple files and then #import those files in the one main.sass file, the resulting main.css file will contain the content of variables multiple times.
A good way of structuring SASS files is to obey the rule of importing each file only once. Iconic architecture is the 7-1 Pattern. You basically decompose your SASS files into atomic parts and then import those in appropriate order only once in the main file.
I am developing a new template for joomla and decided to use the Gantry framework. The mai problem of using it, is that i don't really understand the css/less structure. I need to understand it so i can make it more dry and easy to maintain. I find different overrides in difeerent css/less files. I don't really understand the logic. Can someone explain me how the css/less is structured?
Here is the global less file:(hope this gives an ideea about the structure)
#import "jui/less/mixins.less";
// Core variables and mixins
#import "variables.less";
#import "mixins/index.less";
// Core and Grid
#import "gantry-core.less";
#import "joomla-core.less";
// Template core styling and layout
#import "template.less";
#import "style.less";
#import "header-#{headerstyle}.less";
#import "jui/less/font-awesome/font-awesome.less";
#import "utilities.less";
#import "prettify.less";
#import "offline.less";
#import "error.less";
#import "jui/less/bootstrap-overrides.less";
Thanks.
It's a mess, I agree. It's clearly not been authored with end-users in mind, and it certainly isn't DRY. In my experience Gantry's LESS is very badly written, demonstrating a fundamental lack of understanding about how to use pre-processors responsibly or efficiently and creating some horrible outputs in the process.
If you want lightweight and maintainable LESS you'd be better writing it yourself, from scratch.
Last template I built with Gantry I disabled their LESS compiler, removed their LESS files and dropped in my own Sass framework instead.
The line #import "header-#{headerstyle}.less"; gives us a clue that from global.less you are able to load different themes depending on user selection in backend.
Basically you can follow the files inheritance by seeing what is being imported by each file.
In several examples (i.e. Railscasts episode, this Stackoverflow question, etc), I see "compass" being imported before "compass/reset" like so:
#import "compass";
#import "compass/reset";
Could someone explain to me why reset shouldn't come first? Or does the reset order not matter with respect to the base compass import?
#import "compass/reset";
#import "compass";
In the case of Compass, it does not matter what order you do your imports because it is just a collection of mixins, functions, and variables. Compass does not emit any styles unless you tell it to.
This may or may not be the case with other libraries, so make sure you always read the documentation.
I have the following stack:
Symfony2
Twig with lessphp filter installed.
Twitter Boostrap
In base.css i have:
// base.less
#import '/path/to/bootstrap.less'
#linkColor: 13px;
Variable name is not important at all. It can be any other variable used in bootstrap. It just doesn't get overridden. But if i put the variable into separate .less file and import it in base.less everything works as expected:
// base.less
#import '/path/to/bootstrap.less'
#import '/path/to/variables.less'
and
// variables.less
#linkColor: 13px;
Why does this work and the other not? Looked up for the docs (less/lessphp) but couldn't find anything related to this. (or i didn't know where to look).
Can someone explain why is this happening?
It looks like it's a bug in the lessphp compiler. Take a look at the github issue. Your workaround, to put the variable declaration into another file and also import it works just fine. Thanks by the way ;)
This is happening because you override the variable after it's been used to define all the Bootstrap styles.
I solve this problem this way:
Create my own main.less that imports my own bootstrap.less.
My own bootstrap.less is just the Bootstrap's bootstrap.less file copied over to my own folder with import paths changed accordingly, but with one exception: it imports by own variables.less instead of the Bootstrap's one.
My own variables.less imports the Bootstrap's variables.less and then overrides the ones I need.