(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.
Related
I am new to SASS so please forgive me on my terminology and understanding. I am going through some tutorials on youtube and it has been great, the video is called 'Learn Sass In 20 Minutes | Sass Crash Course'. I am using visual studio code and what is tripping me up is the part where he has me create a _header.scss file along with _variables.scss as extensions of the main style.scss. Where the header from the style.scss is an #import 'header'; from the _header.scss using a #mixin variable.
I am running the live server on visual studio code and it will not update until I manually save all the files that I changed then also save the 'style.scss' in the end. Is there a way I could say modify the _header.scss file and _variables.scss and have it auto-update the style.scss?
If that doesn't make sense I will say it this way. I have a mixin variable and other '$variable's in my main style.scss file. When I make changes to the _variable.scss file and the _header.scss, is there a way I can just save these and have it automatically update the style.scss file as well? It is extremely time consuming having to go through and save them all to get it to do one update.
I tried making a key in VS code for 'Save All' multiple ways from online tutorial. Nothing works. I hope I am making sense, it is hard for me to explain being new to this. Thank you
style.scss
#import 'variables';
#import 'header';
.contact {
#include flexCenter(row, grey);
}
_header.scss
#mixin flexCenter($direction, $background) {
height: 25vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
background: $background;
}
header {
#include flexCenter(row, rgb(31, 28, 28));
color: $textColor;
h1 {
color: $textColor;
}
button {
background: $primaryBtn;
&::after {
content: "o";
}
}
}
_variables.scss
$textColor: brown;
$primaryBtn: pink;
I had to delete both the include and exclude list in the settings. I then closed the workspace and opened the folder and now it works.
I am relatively new to programming and markup languages.
Is there a way to add classes in less from an external css file?
/* this is in a single less file */
.foo {
color: blue;
}
h1 {
.foo; /* works just fine and turns my h1 html tag blue*/
}
/* now if want to add (for examlpe) a bootstrap class in my less file like so*/
#import "bootstrap.css"; /*it is in the same folder as my less file */
h1 {
.text-danger; /*throws an error */
}
This should make my h1 tag red, as I imported the bootstrap.css file.
Now I tried this with creating my own css file and import that to my less file and do the same thing but it doesn't work either.
What am i doing wrong?
I was wondering if anyone had found a way to create different CSS files from the same less files.
In my context I created a different customer less file. This file consist in a series of variable with their settings for the theme of a specific color and other CSS instruction.
I also have a less file for the default settings.
Here a representation of the less folder
Less Folder
My less folder
All the style specific to my context
customer.default.less
cutomer.less
I would like to compile two different css from the "My less folder" the first one would use the customer.default.less file in the variables. The second one would use the customer.less file. Creating the customer.default.css and the customer.css. In order of having the customer.css and the customer.default.css all way in synch together.
I'm currently using the compiler plugin in webstorm. Am I using the right tool?
Thanks
You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.
E.g., here is the main stylesheet we're using for a site:
/* main-stylesheet.less */
#maincolor: #ff0000;
#secondarycolor: #00ff00;
body {
color: #maincolor;
background-color: #secondarycolor;
}
Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:
/* secondary-stylesheet.less */
#import "main-stylesheet";
// Override variables from the 'main' stylesheet.
#maincolor: #0000ff;
Note that we do not define any rules or set any styles here, only override the variables.
Here are the output CSS files:
/* main */
body {
color: #ff0000;
background-color: #00ff00;
}
/* secondary */
body {
color: #0000ff;
background-color: #00ff00;
}
This is possible because Less uses lazy loading.
Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.
(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less)
I think you can accomplish this using the grunt-contrib-less GruntJS task with something like this in your Gruntfile.
less: {
development: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
},
production: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
}
}
LESS isn't my bread-and-butter, but using Sass enough and the grunt-contrib-sass task I assume the same set of features would exist.
If I have a file called 'structure.scss' and inside this file I have the code
body { margin: 20px; }
and I have another file called 'fonts.scss' with the following code inside
body { color: red; }
and I use codekit to compress I get the following code
body{margin:20px;}body{color:red;}
Is there any way to get the code minified even further or is there an option in codekit to do this to make the code...
body{margin:20px;color:red;}
No, that is not possible in Codekit.
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.