I am using less files for developing css but when I am compiling as css base.less get compile multiple times for eg:
style.less
#import 'base.less'
#import 'variable.less'
#import '../../dashboard/my-dashboard.less'
my-dashboard.less
#import 'base.less'
.my-dashboard-css{
all css goes here
}
when compiling style.less to style.css want to skip base.less from "my-dashboard.less" but i want to import base.less for reference for developer .Pls suggest me how to avoid me. Also Ihv tried #import(once) but its not working.
You can import only references using keyword reference: #import (reference) "foo.less";.
http://lesscss.org/features/#import-options
I agree to #3rdthemagical answer. So for your answer follow the link as your guideline.
Here's probably your output in the end.
style.less
#import (reference) 'base.less'
#import (reference) 'variable.less'
#import (less) '../../dashboard/my-dashboard.less'
my-dashboard.less
#import (reference) 'base.less'
.my-dashboard-css{
all css goes here
}
and here's my actual LESS CSS
// CodeKit Framework Libraries [Bootstrap]
#import (reference) "utilities";
#import (reference) "variables";
#import (reference) "mixins";
// Internal Libraries
#import (less) "_fonts";
#import (less) "_mixins";
#import (less) "components/default";
#import (less) "components/menu";
#import (less) "components/header";
#import (less) "components/footer";
#import (less) "components/core";
Note: All under reference will be my variables and mixins. And if you declare your import as less it will read and import the file as less content.
Related
I'm very new to SCSS so I'm still learning the basics.
I'm simply wondering if you can access variables and mixins in a parent file from a child module. It's kind of hard to put into words so I'll give an example below..
File: app.scss
#use base;
$main_color: red;
File: _base.scss
#use app;
body {
color: app.main_color;
}
The idea is that you could have a root file with a bunch of base styles that the imported modules could reference... is this a thing? If so how do you do it?
You need to change _base.scss in this way:
#import "app";
body {
color: $main_color;
}
I have three .css files: header.css, footer.css and breadcrumbs.css. I imported them all into compose.css:
#import "/footer/footer.css";
#import "/header/header.css";
#import "breadcrumbs/breadcrumbs.css";
When I import compose.css to main-page.css it doesn't import files from header.css, footer.css and breadcrumbs.css, but only from compose.css.
Is there any crutchless method to implement the idea of .css double-importing?
I figured out what was the problem. The thing is the paths in my compose.css are relative to compose.css itself. And it is evident that these links will not work for main-page.css which is located in another folder. To make it work, i written absolute links. In my case it looks so:
#import "http://localhost:63342/labs/php-lab-1/common/default-styles/defaults.css";
#import "http://localhost:63342/labs/php-lab-1/common/footer/footer.css";
#import "http://localhost:63342/labs/php-lab-1/common/header/header.css";
In order to render a background image dynamically, I have a piece of SCSS that looks like this:
my-div {
background-image: url(asset_path('img_name.png'));
}
However, what I'd like to do is use a .yml file to import that background image dynamically. I imagine it would look like this:
my-div {
background-image: url(asset_path('{{ site.data.directory.background_image }}'));
}
//directory.yml
background_image: img_name.png
Doing so requires that I preprocess my scss file. In order to do that, jekyll-assets requires that I append the .liquid file type to the .scss file so that it will render all the liquid tags within. However, doing such causes an error, because #import cannot find .liquid files.
//styles.scss.liquid
my-div {
...
}
//main.scss
#import "styles"
error: File to import not found or unreadable: styles
Alternatively, if I try to import:
#import "styles.scss.liquid" I get the same issue.
What is the correct approach to getting the liquid preprocessor to both be imported and used?
You should be using Sprokets to require anything that is processed using Sprockets asset pipeline, Sprockets does not directly integrate with SASS in that manner, and neither does Jekyll-Assets. The following should work:
//= require ./styles.scss.liquid
body {
// My Styles
}
I have the following file structure:
main.less
modules
colors.less
header.less
footer.less
video_player.less
reset.less
base.less
colors.less looks like:
#brand-primary-color: orange;
#brand-secondary-color: grey;
I would like to import colors.less in main.less, and have the variables used globally throughout the less files.
Creating themes would look something like this:
brand-1.less
#import "themes/brand-1-colors.less"
brqand-2.less
#import "themes/brand-2-colors.less"
brand-3.less
#import "themes/brand-3-colors.less"
[...]
Can't find any way to do this!
The only method that seems to work is to import the colors.less file within each less sub-file. This makes creating themes a bit tedious...
Any ideas? :) Thanks guys!
Presuming main.less has CSS in it, all you have to do is create a file where you'd import all other less files. The file structure would look like:
final.less
modules
main.less
colors.less
header.less
footer.less
video_player.less
reset.less
base.less
After compiled, the final.css would be the CSS file containing everything. The final.less would look like:
#import "main.less";
#import "colors.less";
#import "header.less";
#import "footer.less";
#import "video-player.less";
#import "reset.less";
#import "reset.less";
Last but not least, you should compile only final.less.
how is at the rate import filename.css in style tag different from link tag to relate to css file.?
I'm confused and they both do the same thing of giving css file path.
I'm using this
<style>
#import "filename.css";
</style>
- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your HTML document like this:
#import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an #import in the head of your HTML document, it is written:
#import url("styles.css");
more info : http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
Never use #import for stylesheet because it's block parallel download which effect the page performance.
Always use <link rel="stylesheet" href="stylesheet.css" > for stylesheet.