I have wrote a large main.scss file with variables and mixins to style many pages of my website, I want to know if there is a way to compile different files for the different pages and these files just include the styles for the pages. For ex:
I have main.scss file which contains styles for index.php, about.php, and list.php, rather than all these php files share the same compiled main.css, I want the sass/compass compiler to compile different files for these pages.
Or there is another technique to accomplish this.
Please advice,
Thanx,
Split your main.scss into multiple files. For example scaffolding.scss, nav.scss, button.scss etc.
Create index.scss, about.scss and list.scss. In each of these files import scaffolding.scss, nav.scss and other files you need for the specific page
Example
scaffolding.scss:
.container {
width: 100%;
}
nav.scss:
nav {
color: pink;
}
button.scss:
input[type=button] {
width: 2em;
}
index.scss:
#import "scaffolding";
#import "nav";
about.scss:
#import "scaffolding";
#import "nav";
list.scss:
#import "scaffolding";
#import "button";
If you are concerned about performance, it could still be a good choice to have all your css in one file since it will only be downloaded the first time, the next time it will be loaded from the cache.
Related
Is it possible to load property from class from different scss file? This side scss file is imported to main scss file. All properties are inherited, but margins, paddings, font styles not. Browser is not willing to load these properites. Are there any rules with extend?
Side scss file:
.section-headline {
font-size: em(30);
font-weight: 700;
line-height: auto;
color: $main-col-text;
margin-bottom: em(20);
}
Main scss file:
.i-headline {
#extend .section-headline;
}
In SASS you can declare classes in one file and import them into another without any problem, just make sure your import is done properly. And yes you can use #extend to access the rules of your imported selector.
Also try display: inline-block; and see if your margin/padding are working. Maybe you were trying to apply them to an inline element.
Does your em() function is imported somewhere ?
I found the problem. I have one scss file where are imported all scss sub-files. It looks like this:
#import 'gClass';
#import 'buttons';
#import 'general';
#import 'mixins';
#import 'typography';
#import 'pages/home';
In sub-file gClass is my class .section-headline. In pages/home is scss code with i-headline class. I tried to copy .section-headline to main scss file mentioned upper. In this case it works, but if i try to have .section-headline in gClass file, it doesnt.
I'm struggling with the dotLESS #import to have a separate variables file; I just constantly get "variable is undefined".
If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an #import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.
The variables file LESS-config.less is:
/*
.LESS VARIABLES
*/
#mbw_dark_cyan: #1293b5;
#mbw_cyan: #11add4;
#mbw_magenta: #e935da;
#control_text: #ffffff;
#action_delete: #ff5400;
#section_level1_bg: #mbw_dark_cyan;
#section_level1_fg: #control_text;
#button_bg: #mbw_dark_cyan;
#button_fg: #control_text;
#button_icon: #control_text;
#data_table_header: #mbw_cyan;
.dummy {
color: #control_text;
}
Which renders as:
/*
.LESS VARIABLES
*/
.dummy {
color: #ffffff;
}
Calling stylesheet main.css is:
#import (less) '/css/LESS-config';
button {
background: #button_bg;
}
Which gives the error:
variable #button_bg is undefined on line 4 in file '/css/main.css':
[3]: button {
[4]: background: #button_bg;
----------------^
[5]: }
As I said, if I replace the import with the same variables copied and pasted, it all works fine.
I've tried saving without BOM as in another answer, but that doesn't help.
EDIT, I've tried:
Removing the (less)
Changing to double quotes
Using relative path LESS-config as opposed to virtual absolute as above
Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to
web.config (cache is already false)
Adding debug="1"
Adding
debug="true"
Absolutely no change in behaviour.
EDIT 2:
I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.
So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!
FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:
This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553
The complete fix was to:
Upgrade dotLESS to version 1.6.7
Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method
not found error
Change the file extension of the import from .css to .less
Now all working.
Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.
I potentially see two problems that you have.
You are trying to call #import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.
Change your main.css to a main.less file and now try generating your css from main.less as your root file.
Assuming your import url for LESS-config.less is correct.
The above mentioned corrections should probably do the trick.
#import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less #import Rules).
If you want to use #import in your CSS, it should follow this syntax (See here)
#import url|string list-of-mediaqueries;
But, you cannot import a Less file inside your CSS anyways.
The way I would have done this:
Say you have 3 .less files: config.less, color.less, header.less
I would create a style.less file with the following content:
/*------------------------------------------------------------------------------*/
style.less
/*------------------------------------------------------------------------------*/
/* 01. config */
#import "config.less";
/* 02. color */
#import "color.less";
/* 03. header */
#import "header.less";
Then I would complie style.less which would produce, style.css and I would include style.css in my website.
I'm relatively new to SASS and bootstrap. I use bootstrap with SASS and struggle a little bit with a concept.
I always used CSS like this: one base CSS-file with the basic layout (eq. base.css). Every template includes additionally a different CSS-file (eq. sitemap.css, team.css, news.css). This CSS-files only contain the parts of the respective templates. So I can overwrite the definitions in the previous files.
In SASS everything is compiled in one file. In combination with bootstrap I actually struggle with the concept I used until now.
Every time I want to add a new CSS-file to the existing definitions, I get an error because I have to reinclude the complete bootstrap structure. But if I reinclude it, the whole bootstrap code gets written into the additional files (eq. sitemap.css, team.css, news.css) too. If I include both files in my HTML-tree, the bootstrap definitions (like the whole normalize block) gets defined two or more times.
I have this setup:
- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
|-- base.css
└-- team.css
In base.scss I include the bootstrap stuff. I do also need the bootstrap stuff in team.scss, but not all the main stuff like the normalize things.
How do I achieve that? Is that even possible or do I have to switch my css needs by adding a css-class to the body tag (like body.team)? But then I have to carry the whole CSS stuff of every page in one file. Isn't this crab?
Edit to clear things up a bit:
This is in base.scss:
#import "settings/vars";
#import "vendors/bootstrap";
...
header {
#extend .container;
...
.contentbox {
margin-top: $mainGap;
}
...
}
...
and this is in team.scss:
header .contentbox {
#extend .sr-only;
}
It's absolutely clear that "#extend .sr-only;" doesn't work in team.scss because of the absence of bootstrap. But if I include bootstrap with
#import "vendors/bootstrap";
in the first line of team.scss, I would automatically add all the standard 16kb bootstrap things to team.css as well. However, these definitions are already in base.css. So I would have a preventable overhead.
I think I know there is no way to say: "Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway.". But perhaps?
What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!
but...
Since .sr-only and other are just provided as classes instead SASS mixins, you can't #include it, like you could do with the .transition mixin for example.
So, for the moment if you are using SASS, you have 2 options:
Import the Bootstrap module with the class you want to extend/reuse
//contain the .sr-only definition
#import "vendors/bootstrap/_scaffolding";
#import "vendors/bootstrap/_variables";
header .contentbox {
#extend .sr-only;
}
Copy/Paste the class from the Bootstrap source and extend it:
#import "vendors/bootstrap/_variables";
// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
header .contentbox {
#extend .sr-only;
}
What you're searching for is named a partial in Sass I guess:
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
FYI, in LESS it'd be an import option: #import (reference) "colors"
(I have searched various answers, but couldn't find anything relevant.)
I have two LESS files, say, file1.less and file2.less. file1.less contains import of file2.less. Files are compiled into .css OK so I have file1.css but the problem is that file2.less is ALSO compiled into file2.css besides its imported contents in file1.css. That is, I have duplicate contents of file2.less - in compiled file1.css and its own separate file2.css.
Is there any way to have file2.less imported and file1.less and NOT create its own file2.css? (I use WebStorm plugin compiler, if it matters.)
To make it visually clear, here's what I've got:
file1.less (e.g., contains body { font-size: 100%; } and "#import file2.less")
file2.less (let's say it contains body { background-color: #ffffff; })
RESULTS:
file1.css with
body { font-size: 100%; }
body { background-color: #ffffff; }
AND
file2.css with body { background-color: #ffffff; } (duplicate!!!)
How do I prevent file2.css from being created and just have it imported into file1?
This is something related to your compiler, not a LESS issue. I have never used this compiler of yours myself but I can suggest you to use http://winless.org/ if you are a Windows user (or less.app on Mac).
Winless watches a folder and subfolders for modifications (in .less files) and creates a ".css" based on the file you define as your bootstrap.
I am experimenting on themes. For this i have downloaded and installed ruby.
I am clueless as in how to have a different css file to have my own theme for the application.
I think i have make changes to a file with an extension .scss. Can someone walk me through the steps to have my own theme for the application ?
Why not you define partials for theme and put theme related stuff in variables. These partials whould'nt create any .css file. Here is example
Make 3 files home.scss, _homePartials.scss and _homeTheme.scss
_homePartials.scss
$textColor: #333;
_homeTheme.scss
.text { color:$textColor; }
home.scss
.text { width:100%; }
#import '../partials/homePartials';
#import '../partials/homeTheme';
take a look at http://blog.behance.net/dev/how-we-used-sass-to-build-17-websites-in-five-days